我正在使用MVC 4和Entity Framework开发Intranet Web应用程序。我有一个可以通过编辑操作进行修改的人员列表。我想通过使用模式形式使我的应用程序更加动态。所以我试图将编辑视图放入Bootstrap模态,对此我有两个问题:
我认为我必须使用AJAX和/或jQuery,但是我对这些技术还是陌生的。任何帮助,将不胜感激。
编辑:我的索引视图:
@model IEnumerable<BuSIMaterial.Models.Person> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <br /> <div class="group"> <input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/> <input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/> </div> @using (Html.BeginForm("SelectedPersonDetails", "Person")) { <form class="form-search"> <input type="text" id="tbPerson" name="tbPerson" placeholder="Find an employee..." class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> } <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Start Date</th> <th>End Date</th> <th>Details</th> <th>Actions</th> </tr> </thead> <tbody> @foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons) { <tr> <td>@item.FirstName</td> <td>@item.LastName</td> <td>@item.StartDate.ToShortDateString()</td> <td> @if (item.EndDate.HasValue) { @item.EndDate.Value.ToShortDateString() } </td> <td> <a class="details_link" data-target-id="@item.Id_Person">Details</a> </td> <td> <div> <button class="btn btn-primary edit-person" data-id="@item.Id_Person">Edit</button> </div> </td> </tr> <tr> <td colspan="6"> <table> <tr> <th>National Number</th> <td>@item.NumNat</td> </tr> <tr> <th>Vehicle Category</th> <td>@item.ProductPackageCategory.Name</td> </tr> <tr> <th>Upgrade</th><td>@item.Upgrade</td> </tr> <tr> <th>House to work</th> <td>@item.HouseToWorkKilometers.ToString("G29")</td> </tr> </table> <div id="details_@item.Id_Person"></div> </td> </tr> } </tbody> </table> <div class="modal hide fade in" id="edit-member"> <div id="edit-person-container"></div> </div> @section Scripts { @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") <script type="text/javascript" language="javascript"> $(document).ready(function () { $('#tbPerson').autocomplete({ source: '@Url.Action("AutoComplete")' }); $(".details_link").click(function () { var id = $(this).data("target-id"); var url = '/ProductAllocation/ListByOwner/' + id; $("#details_"+ id).load(url); }); $('.edit-person').click(function () { var url = "/Person/EditPerson"; var id = $(this).attr('data-id'); $.get(url + '/' + id, function (data) { $('#edit-person-container').html(data); $('.edit-person').modal('show'); }); }); }); </script> }
我的部分观点:
@model BuSIMaterial.Models.Person <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Edit</h3> </div> <div> @using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "list-of-people" })) { @Html.ValidationSummary() @Html.AntiForgeryToken() <div class="modal-body"> <div class="editor-field"> @Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 }) @Html.ValidationMessageFor(model => model.FirstName) </div> <div class="editor-field"> @Html.TextBoxFor(model => model.LastName, new { maxlength = 50 }) @Html.ValidationMessageFor(model => model.LastName) </div> </div> <div class="modal-footer"> <button class="btn btn-inverse" type="submit">Save</button> </div> }
您应该使用局部视图。我使用以下方法:
使用视图模型,这样就不会将域模型传递给视图:
public class EditPersonViewModel { public int Id { get; set; } // this is only used to retrieve record from Db public string Name { get; set; } public string Age { get; set; } }
在你的 PersonController:
PersonController:
[HttpGet] // this action result returns the partial containing the modal public ActionResult EditPerson(int id) { var viewModel = new EditPersonViewModel(); viewModel.Id = id; return PartialView("_EditPersonPartial", viewModel); } [HttpPost] // this action takes the viewModel from the modal public ActionResult EditPerson(EditPersonViewModel viewModel) { if (ModelState.IsValid) { var toUpdate = personRepo.Find(viewModel.Id); toUpdate.Name = viewModel.Name; toUpdate.Age = viewModel.Age; personRepo.InsertOrUpdate(toUpdate); personRepo.Save(); return View("Index"); } }
接下来,创建一个名为的局部视图_EditPersonPartial。其中包含模态页眉,正文和页脚。它还包含Ajax表单。它是强类型的,并包含在我们的视图模型中。
_EditPersonPartial
@model Namespace.ViewModels.EditPersonViewModel <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Edit group member</h3> </div> <div> @using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "list-of-people" })) { @Html.ValidationSummary() @Html.AntiForgeryToken() <div class="modal-body"> @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Name) @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Age) </div> <div class="modal-footer"> <button class="btn btn-inverse" type="submit">Save</button> </div> }
现在在您的应用程序中的某处,说另一个_peoplePartial.cshtml等:
<div> @foreach(var person in Model.People) { <button class="btn btn-primary edit-person" data-id="@person.PersonId">Edit</button> } </div> // this is the modal definition <div class="modal hide fade in" id="edit-person"> <div id="edit-person-container"></div> </div> <script type="text/javascript"> $(document).ready(function () { $('.edit-person').click(function () { var url = "/Person/EditPerson"; // the url to the controller var id = $(this).attr('data-id'); // the id that's given to each button in the list $.get(url + '/' + id, function (data) { $('#edit-person-container').html(data); $('#edit-person').modal('show'); }); }); }); </script>