CRUD operations in ASP.NET MVC using Jquery,EF Part 2 ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Thursday, 31 March 2016

CRUD operations in ASP.NET MVC using Jquery,EF Part 2

10:00:00 Posted by raviteja swayampu , , 1 comment
Introduction:
This article is continuation for the previous article please refer previous article before going through this article.
In part 1 of the article we had created a Controller with action methods and index view of the application. now in this article we are going to create all other pages(partial views create,edit,delete,details).
Step 1: Create partial views
1.Right click on Views folder-->  Add-->View.
2.In Add window popup name the partial view as create-->check the 'Create Partial view ' checkbox.



3.Create partial created now replace the code with below code.

Create.cshtml:
@model WvcCrudusingJqueryUI.Models.User
@{
    Layout = null;
}
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>User</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNo)
            @Html.ValidationMessageFor(model => model.ContactNo)
        </div>
        <p>
            <input type="submit" id="btnsubmit" value="Create" />&nbsp;&nbsp;
            <input type="button" value="cancel" id="btncancel" />
        </p>
    </fieldset>
}

Step 2:
1.Similarly create all the other partial views for details,update with following code..
details.cshtml:
@model WvcCrudusingJqueryUI.Models.User
<fieldset>
    <legend>User</legend>
    <div class="display-label" style="font-size:20px;">
         @Html.DisplayNameFor(model => model.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>
    <div class="display-label" style="font-size:20px;">
        @Html.DisplayNameFor(model => model.Address)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Address)
    </div>
    <div class="display-label" style="font-size:20px;">
        @Html.DisplayNameFor(model => model.ContactNo)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.ContactNo)
    </div>

</fieldset>

Edit.cshtml:
@model WvcCrudusingJqueryUI.Models.User
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>User</legend>
        @Html.HiddenFor(model => model.UserID)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNo)
            @Html.ValidationMessageFor(model => model.ContactNo)
        </div>
        <p>
            <input type="submit" value="Save" />&nbsp;&nbsp;
            <input type="submit" value="Cancel" id="btncancel" />
        </p>
    </fieldset>
}
Step 3:
1.Now add below javascript code in index.cshtml file for popup functionality after the jquery libreary files. 
    var url = "";
    $(document).ready(function () {
        $("#alert-dialog").dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            resizable: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
        $("#details-dialog").dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            resizable: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            },
            buttons: {
                "Close": function () { $(this).dialog("close"); }
            }
        });
        $("#create-dialog").dialog({
            title:"Create User",
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 400,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load(url);
            }
        });
        $("#delete-dialog").dialog({
            title: "Confirm Deletion of User",
            autoOpen: false,
            resizable: false,
            modal:true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    //to go to Delete action..
                    window.location.href = url;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        if ('@TempData["msg"]' != "") {
            $("#alert-dialog").dialog("open");
        }       
        $("#lnkCreate").on("click", function (e) {
            //e.preventDefault();
            url = $(this).attr("href");
            $("#create-dialog").dialog("open");
         
            return false;
        });
        $(".lnkDetail").on("click", function (e) {
            url = $(this).attr("href");
            $("#details-dialog").dialog("open");
            return false;
        });
        $(".lnkEdit").on("click", function (e) {
            $(".ui-dialog-title").html("Update User");
            url = $(this).attr("href");
            $("#create-dialog").dialog("open");
            return false;
        });
        $(".lnkDelete").on("click", function (e) {
            url = $(this).attr("href");
            $("#delete-dialog").dialog("open");
            return false;
        });
        $("#btncancel").on("click", function (e) {
            $("#create-dialog").dialog("close");
            return false;
        });
    });
2.here we are invoking the jquery popups using .("selector").dialog() method.and on() method is used to add more events at a time.
3.Now run the application F5.


4.click on create New then create popup will come like this..

5.After saving the data in DB an alert box shows a message like 'data saved successfully'.



Step 4: Changing the dialog box styles
1.The above dialog box look like some old(not attractive).if you want to modify the colors of the dialogbox just give the option in dialog like "dialogClass:'some css class'".and paste the following styles code in the index view in </style> tag.
2.finally the dialog appears like this..


Download the Source code click
Conclusion:
I hope this article helps you very much and you understand it well.If you suggest any modifications for this article please let me..

1 comment:

  1. Hello,
    Thanks for you example!!!
    the link for the code is not valid.
    Could you please correct it or send me a valid one.
    Best Regards,
    Pedro

    ReplyDelete