如何使用引导模式编辑在MVC表中的数据？ [英] How to use bootstrap modal to edit the table data in MVC?
问题描述
我在显示员工详细MVC视图的表。我想补充的编辑功能，但不是在新页面中打开它，我想表明它使用引导模式。 （<一href=\"http://twitter.github.com/bootstrap/javascript.html#modals\">http://twitter.github.com/bootstrap/javascript.html#modals)
我不认为我必须使用AJAX，因为数据已经可以在页面上。我想我需要一些jQuery或剃刀code到选定员工的数据传递到引导模式，并流行起来在同一屏幕上。下面是我的code。任何帮助将大大AP preciated。谢谢
@Foreach（在Model.Employees VAR项）
{
＆所述; TR＆GT;
＆LT; TD＆GT; @ User.Identity.Name
＆LT; / TD＆GT;
＆LT; TD＆GT; @ item.FirstName
＆LT; / TD＆GT; ....等栏目
＆LT; TD＆GT;＆LT; A HREF =＃myModal角色=按钮级=BTN数据切换=模式＆gt;编辑＆LT; / A＆GT;
＆所述; TD＆GT;
＆LT; / TR＆GT; ........其他行
}
**引导模态**
＆LT; DIV ID =myModal级=模式隐藏变脸的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT; ＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆×LT; /按钮＆GT;
＆LT; H3 ID =myModalLabel＆gt;编辑员工＆LT; / H3 GT＆;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模体＆GT;
＆LT; P＆GT;选定员工信息，请到这里与文本框，下拉列表等...＆LT; / P＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN数据解雇=莫代尔ARIA隐藏=真＆GT;关闭＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
有确实两种方式：带或不带AJAX。如果你想要做的，没有AJAX，你可以订阅的编辑链接的点击事件，然后从表中的值复制到模态，最后显示模式。
因此，通过给你的编辑链接一些类启动：
＆LT; A HREF =＃类=BTN编辑＆gt;编辑＆LT; / A＆GT;
，你可以订阅：
$（'a.edit'）。在（'点击'，功能（）{
VAR myModal = $（'＃myModal'）; //现在从表中获取值
。VAR的firstName = $（本）.closest（'TR'）找到（'td.firstName'）HTML（）。
。VAR的lastName = $（本）.closest（'TR'）找到（'td.lastName'）HTML（）。
.... //并设定他们的模式：
$（'的firstName，myModal）.VAL（名字）;
$（'。lastNameName'，myModal）.VAL（lastName的）;
.... //最后显示模式
myModal.modal（{显示：真正}）; 返回false;
}）;
这假定您已经给予适当的CSS类的＆LT; TD方式＆gt; 元素，并在你的模态的输入域
如果你想使用AJAX可以生成这样的链接：
@ Html.ActionLink（编辑，编辑，员工，新{ID = employee.Id}，{新@class =BTN编辑}）
然后您订阅了此按钮的点击事件，并触发AJAX请求：
$（'a.edit'）。在（'点击'，功能（）{
$阿贾克斯（{
网址：this.href，
输入：GET，
缓存：假的，
成功：函数（结果）{
$（'＃myModal'）。HTML（结果）.find（'模式'）。模态（{
显示：真
}）;
}
}）; 返回false;
}）;
你会为你的主视图模态，将怀有细节的简单占位符：
＆LT; DIV ID =myModal＆GT;＆LT; / DIV＆GT;
控制器动作将被打应该使用id的dpass它的局部视图获取雇员记录：
公众的ActionResult编辑（INT ID）
{
员工员工= repository.Get（ID）;
EmployeeViewModel模型= Mapper.Map＆LT;员工，EmployeeViewModel＆GT;（员工）;
返回PartialView（模型）;
}
和最终的相应的局部：
@model EmployeeViewModel＆LT; DIV CLASS =模式隐藏变脸＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H3＆gt;编辑员工＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
＆LT; DIV＆GT;
@ Html.LabelFor（X =＆GT; x.FirstName）
@ Html.EditorFor（X =＆GT; x.FirstName）
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
@ Html.LabelFor（X =＆GT; x.LastName）
@ Html.EditorFor（X =＆GT; x.LastName）
＆LT; / DIV＆GT;
...
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT; A HREF =＃类=BTN BTN-主要数据解雇=模式＆GT;关闭＆LT; / A＆GT;
＆LT;按钮类=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
显然，你还需要将包裹输入字段到 Html.BeginForm ，让您的员工的更新详细信息发送到服务器。这也可能是必要的AJAXify这种形式，如果你想留在同一页上。
I have a table in MVC view that displays employee details. I'd like to add an edit functionality, but instead of opening it in a new page, I'd like to show it using a bootstrap modal. (http://twitter.github.com/bootstrap/javascript.html#modals)
I don't think I have to use ajax since the data is already available on the page. I think I need to some jquery or razor code to pass the selected employee's data to the bootstrap modal, and pop it up on the same screen. Below is my code. Any help would be greatly appreciated. Thanks
@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>
There are indeed 2 possibilities: with or without AJAX. If you want to do that without AJAX you could subscribe to the click event of the Edit link and then copy the values from the table to the modal and finally show the modal.
So start by giving your edit link some class:
<a href="#" class="btn edit">Edit</a>
that you could subscribe to:
$('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;
});
This assumes that you have given proper CSS classes to the <td> elements and the input fields in your modal.
If you wanted to use AJAX you could generate the link like that:
@Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" })
and then you subscribe to the click event of this button and trigger the AJAX request:
$('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;
});
you will have a simple placeholder for the modal in your main view that will harbor the details:
<div id="myModal"></div>
The controller action that will be hit should fetch the employee record using the id an dpass it to a partial view:
public ActionResult Edit(int id)
{
Employee employee = repository.Get(id);
EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee);
return PartialView(model);
}
and finally the corresponding partial:
@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>
Obviously you will also need to wrap the input fields into an Html.BeginForm that will allow you to send the updated details of the employee to the server. It might also be necessary to AJAXify this form if you want to stay on the same page.
这篇关于如何使用引导模式编辑在MVC表中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
