Crud Operation Using Model Popup Jquery Ajax in Asp.Net
Question
All replies
-
User1400794712 posted
Hi Ashraf007,
Do you mean that you want CRUD operations with Modal Popup and Jquery Ajax? I make a demo about the Edit operation, you can refer to it:
Index View:
@model IEnumerable<MVCDemo.Models.Student> <table class="table"> <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> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Age) </td> <td> @Html.DisplayFor(modelItem => item.State) </td> <td> @Html.DisplayFor(modelItem => item.Country) </td> <td> @Html.HiddenFor(modelItme=>item.StudentID) <a href="#" data-toggle="modal" data-target="#myModal" class="Edit"><strong>Edit</strong></a> </td> </tr> } </table> @* Input partial view *@ <div id="showModal"></div> @section scripts{ <script> function objectifyForm(formArray) {//serialize data function var returnArray = {}; for (var i = 0; i < formArray.length; i++) { returnArray[formArray[i]['name']] = formArray[i]['value']; } return returnArray; } $("body").on("click", "a[class='Edit']", function () { $(this).prevAll("input[type='hidden']").val(); $.ajax({ url: '/Demo1/Edit', data: { id: $(this).prevAll("input[type='hidden']").val() } }).done(function (msg) { $("#showModal").html(msg); $("#myModal").modal(); }) }) $("body").on("click", ".close", function () { $("#showModal").html(""); window.location.reload(); }) $("body").on("submit", "form", function () { var myData = objectifyForm($('form').serializeArray()); $.ajax({ url: '@Url.Action("Edit","Demo1")', type: "Post", data: { student: myData }, success: function (result) { if (result.success) { $("#dialog-alert").html("Data has been updated succeessfully"); } else { alert("Fail"); } } }); return false; }) </script> }Edit View:
@model MVCDemo.Models.Student <div class="modal" id="myModal" tabindex="-1"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Student</h4> </div> <div class="modal-body"> @using (Html.BeginForm()) { @*@Html.AntiForgeryToken()*@ <div class="form-horizontal"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.StudentID) <div class="form-group"> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" class="btn btn-default" /> </div> </div> </div> } </div> <div id="dialog-alert"></div> <div class="modal-footer"> <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button> </div> </div> </div> </div>Controller:
public ActionResult Index() { return View(db.Student.ToList()); } public ActionResult Edit(int? id) { var model = db.Student.Where(s => s.StudentID == id).SingleOrDefault(); return View(model); } [HttpPost] public ActionResult Edit(Student student) { if (ModelState.IsValid) { db.Entry(student).State = EntityState.Modified; db.SaveChanges(); } return Json(new { Data = student, success = ModelState.IsValid ? true : false, error = ViewData }, JsonRequestBehavior.AllowGet); }How it works:
Best Regards,
Daisy
