如何使用bootstrap模式编辑MVC中的表数据？

我在MVC视图中有一个显示员工详细信息的表。 我想添加一个编辑function，但我不想在新页面中打开它，而是想使用bootstrap模式显示它。 （ http://twitter.github.com/bootstrap/javascript.html#modals ）

我不认为我必须使用ajax，因为页面上已有数据。 我想我需要一些jquery或razor代码将所选员工的数据传递给bootstrap模式，然后在同一个屏幕上弹出。 以下是我的代码。 任何帮助将不胜感激。 谢谢

@Foreach(var item in Model.Employees) {  @User.Identity.Name  @item.FirstName ....other columns Edit  ........other rows } **Bootstrap Modal** 
 
 × 
Edit Employee
 
 
 
Selected Employee details go here with textbox, dropdown, etc...
 
 
 Close Save changes 
  

Answer 1

确实有两种可能性：有或没有AJAX。 如果你想在没有AJAX的情况下这样做，你可以订阅Edit链接的click事件，然后将值从表复制到模态，最后显示模态。

首先给你的编辑链接一些类：

 Edit 

你可以订阅：

 $('a.edit').on('click', function() { var myModal = $('#myModal'); // now get the values from the table var firstName = $(this).closest('tr').find('td.firstName').html(); var lastName = $(this).closest('tr').find('td.lastName').html(); .... // and set them in the modal: $('.firstName', myModal).val(firstName); $('.lastNameName', myModal).val(lastName); .... // and finally show the modal myModal.modal({ show: true }); return false; }); 

这假设您已经为

元素和模式中的输入字段提供了适当的CSS类。

---

如果你想使用AJAX，你可以生成如下链接：

 @Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" }) 

然后您订阅此按钮的click事件并触发AJAX请求：

 $('a.edit').on('click', function() { $.ajax({ url: this.href, type: 'GET', cache: false, success: function(result) { $('#myModal').html(result).find('.modal').modal({ show: true }); } }); return false; }); 

你将在主视图中有一个简单的占位符，它将包含详细信息：

将被命中的控制器操作应使用id获取员工记录并将其转移到部分视图：

 public ActionResult Edit(int id) { Employee employee = repository.Get(id); EmployeeViewModel model = Mapper.Map(employee); return PartialView(model); } 

最后相应的部分：

 @model EmployeeViewModel 
 
 × 
Edit Employee
 
 
 
 @Html.LabelFor(x => x.FirstName) @Html.EditorFor(x => x.FirstName) 
 
 @Html.LabelFor(x => x.LastName) @Html.EditorFor(x => x.LastName) 
 ... 
 
 Close Save changes 
  

显然，您还需要将输入字段包装到Html.BeginForm ，以便将更新的员工详细信息发送到服务器。 如果您想要保持同一页面，可能还需要AJAXify此表单。