将 Id 传递给 bootstrap 模式弹出窗口
Passing Id to bootstrap modal popup
这里是调整到 JQuery 后的工作:
$(.modalLink").click(function () {
var passedID = $(this).data('id');
$('#id').val(passedID);
$(".modal-body .hiddenid").val(passedID);
});
//查看Link
<a href="/Home/Employee/id=@item.Id" data-id="@item.Id" data-toggle="modal" data-target="#myModal">Load me</a>
如何在 <a href
单击时捕获我传递的 ID?
所以我有一个模式弹出窗口,当用户单击时我想在用户 post 数据时获取它的 ID。
查看:
@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="FirstName" class="control-label">First Name:</label>
@Html.Editor("FirstName", new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
<label for="LastName" class="control-label">Last Name:</label>
@Html.Editor("LastName", new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
控制器:
[HttpPost]
public ActionResult Employee(string id, string FirstName, string LastName)
{
//more work here..
return View("Index");
}
首先你需要一个 class 或者你可以用来引用链接的东西:
<a href="/Home/Employee/id=@item.Id" data-id="@item.Id" data-toggle="modal" data-target="#myModal" class="modalLink">Load me</a>
您需要一个隐藏的表单字段来保存将与表单一起提交的 ID。所以把它放在你的模态形式中:
@Html.Hidden("id", "", new { @class = "hiddenid" })
那么,就用一些javascript。我假设 jQuery 适合你?
$(document).on("click", ".modalLink", function () {
var passedID = $(this).data('id');
$(".modal-body .hiddenid").val(passedID);
});
这里是调整到 JQuery 后的工作:
$(.modalLink").click(function () {
var passedID = $(this).data('id');
$('#id').val(passedID);
$(".modal-body .hiddenid").val(passedID);
});
//查看Link
<a href="/Home/Employee/id=@item.Id" data-id="@item.Id" data-toggle="modal" data-target="#myModal">Load me</a>
如何在 <a href
单击时捕获我传递的 ID?
所以我有一个模式弹出窗口,当用户单击时我想在用户 post 数据时获取它的 ID。
查看:
@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="FirstName" class="control-label">First Name:</label>
@Html.Editor("FirstName", new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
<label for="LastName" class="control-label">Last Name:</label>
@Html.Editor("LastName", new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
控制器:
[HttpPost]
public ActionResult Employee(string id, string FirstName, string LastName)
{
//more work here..
return View("Index");
}
首先你需要一个 class 或者你可以用来引用链接的东西:
<a href="/Home/Employee/id=@item.Id" data-id="@item.Id" data-toggle="modal" data-target="#myModal" class="modalLink">Load me</a>
您需要一个隐藏的表单字段来保存将与表单一起提交的 ID。所以把它放在你的模态形式中:
@Html.Hidden("id", "", new { @class = "hiddenid" })
那么,就用一些javascript。我假设 jQuery 适合你?
$(document).on("click", ".modalLink", function () {
var passedID = $(this).data('id');
$(".modal-body .hiddenid").val(passedID);
});