我在MVC视图中有一个表格,显示员工详细信息 . 我喜欢用bootstrap模态来显示它 . (http://twitter.github.com/bootstrap/javascript.html#modals)
我不认为我必须使用ajax,因为页面上已有数据 . 我想我需要一些jquery或razor代码将所选员工的数据传递给bootstrap模式,然后在同一个屏幕上弹出 . 以下是我的代码 . 任何帮助将不胜感激 . 谢谢
@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>
1 回答
确实有两种可能性:有或没有AJAX . 如果你想在没有AJAX的情况下这样做,你可以订阅Edit链接的click事件,然后将值从表复制到模态,最后显示模态 .
所以首先给你的编辑链接一些类:
您可以订阅:
这假定您已为
<td>
元素和模式中的输入字段提供了适当的CSS类 .如果你想使用AJAX,你可以生成如下链接:
然后您订阅此按钮的click事件并触发AJAX请求:
你将在主视图中有一个简单的占位符,它将包含详细信息:
将被命中的控制器操作应使用id获取员工记录并将其转移到部分视图:
最后相应的部分:
显然,您还需要将输入字段包装到
Html.BeginForm
中,以便将更新的员工详细信息发送到服务器 . 如果您想要保持同一页面,可能还需要AJAXify此表单 .