User Id * 156 Title * CRUD Operation Using Modal Dialog in ASP.NET MVC Category * Tag * ASP.NET MVC× Description * In this article I am going to explain how to add, edit, delete and find [CRUD (Create, Retrieve, Update, Delete)] records using razor view engine in ASP.NET MVC3 or above version. Content *In this article I am going to explain how to add, edit, delete and find [CRUD (Create, Retrieve, Update, Delete)] records using razor view engine in ASP.NET MVC3 or above version. It will display modal dialog if the JavaScript is turned on otherwise a simple view page, when we try to add and edit the records of student.

Please follow the steps given below to create an application that allows user to add, edit, delete and find records of student.

Open Microsoft Visual Studio 2010 à Select New Project à Select Web from the Installed Templates à Select ASP.NET MVC3 or MVC4 Web Application à Enter the project name Modal_CRUD_MVC in the Name textbox à Click OK.

CRUD operation using Modal dialog in ASP.NET MVC

After select the project you can see the following dialog box:

Select Empty from the Select a template option à Select Razor view engine à Click OK.

CRUD operation using Modal dialog in ASP.NET MVC

Add the following Modal classes (Student and StudentContext) in your Model folder:

Student class represents the table structure in the database and StudentContext Students property represents the name of table and data of the students in the database.

    public class Student

    {
        public int StudentID { get; set; }
        public string Name { get; set; }
        public string Age { get; set; }
        public string State { get; set; }
        public string Country { get; set; }
    }
    public class StudentContext : DbContext
    {
        public DbSet<Student> Students
        {
            get;
            set;
        }
    }

 Also include Entity framework reference in your project because in this application we are going to use entity framework code first model to add, edit, delete and find records from the database. To include entity framework dll, follow these steps:

Go to Project à Manage NuGet Packages à Enter entity framework in the search textbox and search online.

CRUD operation using Modal dialog in ASP.NET MVC

You will find latest version of Entity framework version.

You also have to configure your web.config file for the implementation of this project. Add the connectionStrings element under configuration tag:

  <connectionStrings>

    <add name="StudentContext"connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=StudentDb;Integrated Security=true;"providerName="System.Data.SqlClient" />
  </connectionStrings>

 Add a Controller in your project and edit the controller name as HomeController as shown in the figure below:

CRUD operation using Modal dialog in ASP.NET MVC

After adding HomeController, add an Index view into your project:


CRUD operation using Modal dialog in ASP.NET MVC

Edit the Index view and add the following code as given below. Also include these

files (jquery-ui.min.css, jquery-1.7.1.min.js, jquery-ui-1.8.20.min.js) in your project.

@model IEnumerable<Modal_CRUD_MVC.Models.Student>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $("#openDialog").live("click", function (e) {
                e.preventDefault();
                var url = $(this).attr('href');
                $("#dialog-edit").dialog({
                    title: 'Add Student',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-edit").dialog('open');
                return false;
            });
            $(".editDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-edit").dialog({
                    title: 'Edit Customer',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-edit").dialog('open');
                return false;
            });
            $(".confirmDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-confirm").dialog({
                    autoOpen: false,
                    resizable: false,
                    height: 170,
                    width: 350,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    buttons: {
                        "OK": function () {
                            $(this).dialog("close");
                            window.location = url;
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-confirm").dialog('open');
                return false;
            });
            $(".viewDialog").live("click", function (e) {
                var url = $(this).attr('href');
                $("#dialog-view").dialog({
                    title: 'View Customer',
                    autoOpen: false,
                    resizable: false,
                    height: 355,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                    buttons: {
                        "Close": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }
                });
                $("#dialog-view").dialog('open');
                return false;
            });
            $("#btncancel").live("click", function (e) {
                $("#dialog-edit").dialog('close');
            });
        });  
    </script>
</head>
<body>
    <table align="center" width="800px">
        <tr>
            <td>
                @Html.ActionLink("Create New", "AddEditRecord", "Home", null, new { @id = "openDialog" })
            </td>
        </tr>
    </table>
    <table cellpadding="10" style="border: 1px solid black; font-family: Verdana;" align="center"
        width="800px">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Age)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.State)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Country)
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.State)
                </td>
                <td align="center">
                    @Html.DisplayFor(modelItem => item.Country)
                </td>
                <td>
                    @Html.ActionLink("Edit", "AddEditRecord", new { id = item.StudentID }, new { @class = "editDialog" })|
                    @Html.ActionLink("Details", "Details", new { id = item.StudentID }, new { @class = "viewDialog" }) |
                    @Html.ActionLink("Delete", "DeleteRecord", new { id = item.StudentID }, new { @class = "confirmDialog" })
                </td>
            </tr>
        }
    </table>
    <div id="dialog-confirm" style="display: none">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            Are you sure to delete ?
        </p>
    </div>
    <div id="dialog-edit" style="display: none">
    </div>
    <div id="dialog-view" style="display: none">
    </div>
</body>
</html>

 I have put all the code necessary to perform add, edit, delete and find records of the students in the Index view. In this project we do not have any Layout or Master page.

After including files in the project, your solution explorer might something look like this:


CRUD operation using Modal dialog in ASP.NET MVC

Add a partial view _StudentData in Views à Home folder.


CRUD operation using Modal dialog in ASP.NET MVC

Edit the _StudentData partial view as below:

@model Modal_CRUD_MVC.Models.Student

@using (Ajax.BeginForm("AddEditRecord", "Home", new AjaxOptions{ HttpMethod = "POST", UpdateTargetId = "studentDialog" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Student</legend>
        @if (ViewBag.IsUpdate == true)
        {
            @Html.HiddenFor(model => model.StudentID)
        }
        <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.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.State)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.State)
            @Html.ValidationMessageFor(model => model.State)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Country)
            @Html.ValidationMessageFor(model => model.Country)
        </div>
        <p>
            @if (ViewBag.IsUpdate == true)
            {
                <input type="submit" value="Update" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            }
            else
            {
                <input type="submit" value="Save" id="btnSave" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            }
            <input type="button" value="Cancel" id="btncancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
        </p>
    </fieldset>
}

 Also add StudentData view in the same folder Views à Home. This view will response by the controller to the browser if the JavaScript is turned off otherwise the above partial view will display in a modal dialog to the user.

@model Modal_CRUD_MVC.Models.Student

@using (Html.BeginForm("AddEditRecord", "Home"))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Student</legend>
        @if (ViewBag.IsUpdate == true)
        {
            @Html.HiddenFor(model => model.StudentID)
        }
        <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.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.State)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.State)
            @Html.ValidationMessageFor(model => model.State)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Country)
            @Html.ValidationMessageFor(model => model.Country)
        </div>
        <p>
            @if (ViewBag.IsUpdate == true)
            {
                <input type="submit" value="Update" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            }
            else
            {
                <input type="submit" value="Save" id="btnSave" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            }
            @Html.ActionLink("Back to List", "Index")
        </p>
    </fieldset>
}

 Add a partial view _StudentDetails in Views à Home folder.

Edit the _StudentDetails partial view as below:

@model Modal_CRUD_MVC.Models.Student


<fieldset>
    <legend>Student</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Age)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Age)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.State)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.State)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Country)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Country)
    </div>
</fieldset>

 

Add and Edit StudentDetails in Views => Home folder.

The purpose of adding StudentDetails view is same as I have explained above for StudentData view.

@model Modal_CRUD_MVC.Models.Student


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>StudentDetails</title>
</head>
<body>
    <fieldset>
        <legend>Student</legend>

        <div class="display-label">
             @Html.DisplayNameFor(model => model.Name)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.Name)
        </div>

        <div class="display-label">
             @Html.DisplayNameFor(model => model.Age)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.Age)
        </div>

        <div class="display-label">
             @Html.DisplayNameFor(model => model.State)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.State)
        </div>

        <div class="display-label">
             @Html.DisplayNameFor(model => model.Country)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.Country)
        </div>
    </fieldset>
    <p>
        @Html.ActionLink("Edit", "Edit", new { id = Model.StudentID }, new { @class = "editDialog" }) |
        @Html.ActionLink("Back to List", "Index")
    </p>
</body>
</html>

 I have finished Model and View portion. Now I am going to explain about the HomeController and its Action methods which are necessary in order to run our application.

Index action returns a View along with the list of students:

    public class HomeController : Controller

    {
        StudentContext db = new StudentContext();

        public ActionResult Index()
        {
            return View(db.Students.ToList());
        }
    }

 Add the AddEditRecord action with the parameter (id) which can be either null or not null. If the id parameter is null it will return empty _StudentData or StudentData, partial view or View respectively otherwise it will find the record of student on the basis of id and passes the student model to the view in order to update the student details.

Here I am also creating a dynamic property ViewBag.IsUpdate to change the button type in view. If the IsUpdate is true it will set button text as Update and if IsUpdate is false then it will be set as Save.

 [HttpGet]

        public ActionResult AddEditRecord(int? id)
        {
            if (Request.IsAjaxRequest())
            {
                if (id != null)
                {
                    ViewBag.IsUpdate = true;
                    Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();
                    return PartialView("_StudentData", student);
                }
                ViewBag.IsUpdate = false;
                return PartialView("_StudentData");
            }
            else
            {
                if (id != null)
                {
                    ViewBag.IsUpdate = true;
                    Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();
                    return PartialView("StudentData", student);
                }
                ViewBag.IsUpdate = false;
                return View("StudentData");
            }
        }

 

Add the AddEditRecord action which is of HttpPost type to add or update student record. If the cmd contains Save it will add the record of student in the database otherwise update the data of student in the database.

[HttpPost]

        public ActionResult AddEditRecord(Student student, string cmd)
        {
            if (ModelState.IsValid)
            {
                if (cmd == "Save")
                {
                    try
                    {
                        db.Students.Add(student);
                        db.SaveChanges();
                        return RedirectToAction("Index");
                    }
                    catch { }
                }
                else
                {
                    try
                    {
                        Student stud = db.Students.Where(m => m.StudentID == student.StudentID).FirstOrDefault();
                        if (stud != null)
                        {
                            stud.Name = student.Name;
                            stud.Age = student.Age;
                            stud.State = student.State;
                            stud.Country = student.Country;
                            db.SaveChanges();
                        }
                        return RedirectToAction("Index");
                    }
                    catch { }
                }
            }

            if (Request.IsAjaxRequest())
            {
                return PartialView("_StudentData", student);
            }
            else
            {
                return View("StudentData", student);
            }
        }

 To delete the record of students add the DeleteRecord action in the HomeController. This will delete the record of a student from the database on the basis of id.

public ActionResult DeleteRecord(int id)

        {
            Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();
            if (student != null)
            {
                try
                {
                    db.Students.Remove(student);
                    db.SaveChanges();
                }
                catch { }
            }
            return RedirectToAction("Index");
        }

  To view the details of student, add the Details action in your HomeController. This will display the details of a student on the basis of id.

public ActionResult Details(int id)

        {
            Student student = db.Students.Where(m => m.StudentID == id).FirstOrDefault();
            if (student != null)
            {
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_StudentDetails", student);
                }
                else
                {
                    return View("StudentDetails", student);
                }
            }
            return View("Index");
        }

 

Now both coding and design part is over. To test an application, run or debug your application:

 I have added few records during coding. You can add student records by using Create New option.


CRUD operation using Modal dialog in ASP.NET MVC

To edit records, just press edit link given for each students in a row.


CRUD operation using Modal dialog in ASP.NET MVC

If the JavaScript is turned off, you cannot use modal dialog to add and edit the records of students, then in that case you can use StudentData view to add and edit the records.


CRUD operation using Modal dialog in ASP.NET MVC

To delete the record of student, use Delete link.


CRUD operation using Modal dialog in ASP.NET MVC

Thanks for reading this article. You can enter your valuable comments and suggestion to improve this article in the comment box.

  Modified On Nov-17-2017 10:14:09 AM
  1. Can you attach the code please or can you mail me to dora.meka@gmail.com
  1. Hi
    How would you do if need display value of dropdown list <select??
    for example, my dropdownlist is:
    value    description
    001          DES1
    002          DES2

    how display you the description?
  1. Thank you so much Lot of helping for me I am new to MVC,
    I have one requirement Add one more column in the database ,
    I want to Insert ,Update delete,Display Image also
    plz help me
  1. I just included all libraries to use unobtrusive validation (Required, Range, etc) and the submit behaviour stopped to work.
    The validation works perfectly, but the submit button doesn't work anymore.
    Any ideas ?

    Thank you !
  1. Instead of Entity framework, can we use enteprise library for Data access block(includes store procedure calls etc..) ? is it possible ? How?
  1. Very very thanks for posting this. I am relay thank full to you. Grate.... This is very help full for me. Thanks a lot.
  1. I tried the code but can get the dialog only on  first click . There are no errors in the script can u mail me the code isrb.net@gmail.com
  1. Why "request.isajaxrequest()" always false? I have tried referencing "~/Scripts/jquery.unobtrusive-ajax.min.js" buy not work. Help me, please. I'm working with MVC4 and VS2010.
  1. the Edit and Delete code is working normally but I am having problem with the Create New
    when I click save the record is saved twice in the database. I debugged it and found that each instruction in the AddEditRecord action is being executed twice!! Any Idea??
    I'm working with vs2013 MVC4
  1. @using (Ajax.BeginForm("create", "Employee", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "studentDialog" }))
    Where is the studentDialog ?

  1. Hi Hamzaoui Mounir,

    Actually i refresh the whole page after add or update.
    you can can give the id of table as given below, so it will update the table section after add, update and delete.

    <table cellpadding="10" style="border: 1px solid black; font-family: Verdana;" align="center"

            width="800px">

    </table>


  1. pls giv me solution for this m begginer for mvc...


    public class Student

        {

            public int StudentID {  get;  set; }

            public string Name { getset; }

            public string Age { getset; }

            public string State { getset; }

            public string Country { getset; }

        }

        public class StudentContext : DbContext

        {

            public DbSet<Student> Students

            {

                get;

                set;

            }

        } when i add studen class in model folder 

    i found Red Line under the DbContext

    so which namespace i need to add to solve this problem 

  1. you need to add namespace:
    using System.Data.Entity;

    which resides in Entity Framework package. If Entity Framework package is not exist in your project you can add via package manager console by using command given below:
    install-package entityframework
  1. [HttpPost]

     public ActionResult AddEditRecord(Student s, string cmd)

    i found following errorat AddEditRecord in [HttpPost]

    Error

    'CRUD_Operation_using_Model_Dialog.Controllers.HomeController.AddEditRecord(CRUD_Operation_using_Model_Dialog.Models.Student, string)': not all code paths return a value


    what is the solution for it


  1. This is your programming fault. I think your method is not return anything in some case.
    Please post complete code of method, so that I can rectify.
  1.         [HttpPost]

            public ActionResult AddEditRecord(Student s, string cmd)

            {

                if (ModelState.IsValid)

                {

                    if (cmd == "Save")

                    {

                        try

                        {

                            db.Students.Add(s);

                            db.SaveChanges();

                            return RedirectToAction("Index");

                        }

                        catch { }

                    }

                    else

                    {

                        if (cmd == "Update")

                        try

                        {

                            Student stud = db.Students.Where(m => m.StudentID == s.StudentID).FirstOrDefault();

                            if (stud != null)

                            {

                                stud.Name = s.Name;

                                stud.Age = s.Age;

                                stud.State = s.State;

                                stud.Country = s.Country;

                                db.SaveChanges();

                            }

                            return RedirectToAction("Index");

                        }

                        catch { }

                    }

                    if (Request.IsAjaxRequest())

                    {

                        return PartialView("_StudentData", s);

                    }

                    else

                    {

                        return View("StudentData",s);

                    }

                }


            }

  1. replace your code with below one:
    your mistake is highlighted in bold:

    [HttpPost]
            public ActionResult AddEditRecord(Student s, string cmd)
            {
                if (ModelState.IsValid)
                {
                    if (cmd == "Save")
                    {
                        try
                        {
                            db.Students.Add(s);
                            db.SaveChanges();
                            return RedirectToAction("Index");
                        }
                        catch { }
                    }
                    else
                    {
                        if (cmd == "Update")
                            try
                            {
                                Student stud = db.Students.Where(m => m.StudentID == s.StudentID).FirstOrDefault();
                                if (stud != null)
                                {
                                    stud.Name = s.Name;
                                    stud.Age = s.Age;
                                    stud.State = s.State;
                                    stud.Country = s.Country;

                                    db.SaveChanges();

                                }

                                return RedirectToAction("Index");
                            }
                            catch { }
                    }
                }
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_StudentData", s);
                }
                else
                {
                    return View("StudentData", s);
                }
            }
  1. Thank you very much...ya i found the mistake done by me....

    and i want to inform u that this is the best artical for begginer to learn crud operatoin in mvc...

    carry on sir....

  1. Yes ..Good Article for beginners...
    Keep Posting Rohit!!
  1. Thank you for this article. It helped a great deal.

    I only receive the following errors when I'm using this for my MVC 5 website.
    0x800a138f - JavaScript runtime error: Unable to get property 'appendChild' of undefined or null reference
    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'live'
    0x800a139e - JavaScript runtime error: InvalidStateError

    Has this something to do with the versions of javacript I'm using?

    I'm using version 1.10.2 of javascript and version 1.10.4 of the javascript ui.

    Thank you in advance.

    Regards.
  1. Hi,

    I'm not able understand what is Partial view and all,..

    can u please send me the code...

    so that I can easily find out ...
    Please send me the code to "vasuarya143all@gmail.com" 

    Thanks,
    VasuArya
  1. Hi, Rohit: Your code is very helpful. I tried the create function and it works great. Except that if there is an error been catched int he create function, the Catch() return a partial view, the problem is that partial view does not show in the dialog box anymore, it open as a new page by itself. Do I miss anything. Can you send your code to me at laura.deng@symetra.com ? Thanks much! Laura
  1. source code please 
    cd10anil at gmail.com

     the pop window for me appear in new view rather than popup.

  1. Hi rohit.

    I've was trying to  implement using bootstrap and MVC5 ef6, with modals (http://getbootstrap.com/javascript/#modals) but I don´t know where I have to put the code for the modal, I put it in Index view page, or I have to put in every view included de partial views?? if you have an example it will be wonderful!!
  1. you should include the following in every partial view which is rendered in modal:

    <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <!-- place your controls here -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  1. Hi Chris, thank's you for the example. It's work fine for me, but the modal popup's isn't working.

    I try the example with Visual Studio 2013 and Mvc4.

    Also, i update the jquery version:

    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.11.2.min.js")" type="text/javascript"></script>

    So i get it:




    But i can't use the modal popup.

    Please, send me the code or could check my code?

    Ty.
  1. Sir can you please help me. It was working for me profectly. but now somehow something is wrong .When m clicking on Save button its not Saving data to database. Its going back to View. Can you tell me what's the issue 
  1. After add ,update and delete i don't want post back.i just want to update my list without postback.
  1. Chris, I really liked doing this project from scratch and learned a lot. I started with the ASP.NET MVC4 "empty" template and did everything you said except I had to adjust a few things for Visual Studio 2012. I used Server Explorer to create the connection string and once I clicked OK, it created the StudentDb database for me. This is the first time I used a code-first Model without using the EF wizard to build the code (database-first). This is a much better way of doing database classes. In the jQuery event handlers, I changed all of the ".live('click'," to just ".click(" since the .live method has been removed from newer versions of jQuery. The "StudentData.cshtml" file should be a full View, not a PartialView as shown. This looks like a copy-paste error. The same thing is true in a couple of places where you return PartialView("StudentData") instead of View("StudentData").

    My DbContext class ended up looking like this so that I can pass in the connection string to the constructor:  
      public class StudentContextDbContext
      {
        public StudentContext (string ConnectionString) : base (ConnectionString) {}
     
        public DbSet<Student> Students { getset; }
      }
  1. hi,

    I had followed all your instructions and still it is not producing any modal popups. It is getting navigated to the next page instead  of opening a dialog box. Can you please tell me why this is so?

Leave Comment