我有一个显示员工详细MVC视图的表。 我想补充的编辑功能，但不是在新页面中打开它，我想表明它使用的引导模式。 （ http://twitter.github.com/bootstrap/javascript.html#modals ）
我不认为我必须使用AJAX，因为数据已经可以在页面上。 我想我需要一些jQuery的或剃刀代码选定员工的数据传递到引导模式，并流行起来在同一屏幕上。 下面是我的代码。 任何帮助将不胜感激。 谢谢
@Foreach(var item in Model.Employees)
{
<tr>
<td>@User.Identity.Name
</td>
<td>@item.FirstName
</td>....other columns
<td><a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
<td>
</tr>........other rows
}
**Bootstrap Modal**
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Employee</h3>
</div>
<div class="modal-body">
<p>Selected Employee details go here with textbox, dropdown, etc...</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
确实有两个可能性：有或没有AJAX。 如果你想要做的，没有AJAX，你可以订阅的编辑链接的点击事件，然后从表中的值复制到模式终于显示模式。
因此，通过给你的编辑链接一些类开始：
<a href="#" class="btn edit">Edit</a>
你可以订阅：
$('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类的<td>元素和输入字段中的模式。
如果你想使用AJAX你可以生成这样的链接：
@Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" })
然后您订阅了此按钮的点击事件，并触发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;
});
你会为你的主视图的模态，将怀有细节一个简单的占位符：
<div id="myModal"></div>
控制器的行动，将受到重创应该使用id的dpass它的局部视图获取员工记录：
public ActionResult Edit(int id)
{
Employee employee = repository.Get(id);
EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee);
return PartialView(model);
}
最后相应的部分：
@model EmployeeViewModel
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Edit Employee</h3>
</div>
<div class="modal-body">
<div>
@Html.LabelFor(x => x.FirstName)
@Html.EditorFor(x => x.FirstName)
</div>
<div>
@Html.LabelFor(x => x.LastName)
@Html.EditorFor(x => x.LastName)
</div>
...
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
很明显，你还需要包裹输入字段为Html.BeginForm ，让您的员工的更新信息发送到服务器。 这也可能是必要的AJAXify这种形式，如果你想留在同一页上。
