javascript ASP MVC 将值传递到模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32714917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP MVC Passing value into modal window
提问by Khaine775
I have this view with a modal window. When I click to open the modal window, I'd like to pass the parameter item.InstrumentIdinto the modal window so that I can click on a link that redirects me to the page from that specific instrument that belongs to the InstrumentId. What I'm doing below successfully passes the InstrumentId into the window, but the problem is I don't know how to pass that value into the Html.ActionLink. Any hints as to how I can proceed?
我有一个带有模态窗口的视图。当我单击打开模态窗口时，我想将参数传递item.InstrumentId到模态窗口中，以便我可以单击一个链接，将我从属于 InstrumentId 的特定仪器重定向到页面。我在下面所做的成功将 InstrumentId 传递到窗口中，但问题是我不知道如何将该值传递到Html.ActionLink. 关于我如何继续的任何提示？
@foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: @item.InstrumentId
</h4>
</div>
<div class="col-md-4">
@item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="@item.InstrumentId">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
var modalId = $(this).data('id');
$(".modal-dialog #myModal").val(modalId);
})
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal"></h4>
</div>
<div class="modal-body">
@item.Message
<br/> <br/> <br/>
<div class="row">
<div class="col-md-4">
Slide: <a href="/Home/Slide" class="Button">1234500323</a>
</div>
<div class="col-md-4">
Instrument: @Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
</div>
<div class="col-md-4">
Checked: @item.Checked
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
}
UPDATE
更新
<div>
<ul class="list-group">
@foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: @item.InstrumentId
</h4>
</div>
<div class="col-md-4">
@item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-url="@Url.Action("Instrument", new {instrumentid = @item.InstrumentId})">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
});
</script>
</div>
</div>
</li>
}
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
@*@item.Message*@
<br /> <br /> <br />
<div class="row">
<div class="col-md-4">
Slide: <a href="/Home/Slide" class="Button">1234500323</a>
</div>
<div class="col-md-4">
Instrument: <a id="details" href="#">Details</a>
</div>
<div class="col-md-4">
Checked: @*@item.Checked*@
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
回答by
You currently generating a modal for each item in your collection but giving it an id="myModal"which is invalid html and means data-target="#myModal"will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4>element which also has the same idattribute)
您当前为集合中的每个项目生成一个模态，但给它一个id="myModal"无效的 html 并且意味着data-target="#myModal"只会打开第一个。将模态移到循环之外，以便您只创建一个（并删除<h4 class="modal-title" id="myModal"></h4>也具有相同id属性的元素）
Then change the button html to
然后将按钮 html 更改为
<button type="button" class=".." .. data-url="@Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
and change the html in the modal to
并将模态中的html更改为
Instrument: <a id="details" href="#">Details</a>
Then change the script to
然后将脚本更改为
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
Side note: You will probably want to do something similar with Checked: @item.Checkedin the modal
旁注：您可能想要Checked: @item.Checked在模态中做类似的事情
回答by J Santosh
1.Use IDfor Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320and you can inspect hreftoo.
1.ID用于锚链接。
2.注意<a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>代码中的这一行。它有Anchor Link Value=。当你打开模态时，你可以看到Anchor Link Value=10320320，你也可以检查href。
$('#myModal1').on('show.bs.modal', function(e) {
var modalId = $(e.relatedTarget).data('id');
$('#InstrumentIDLink').attr('href', 'url+'+ modalId)
$('#InstrumentIDLink').text('Anchor Link Value='+ modalId);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div> <a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
<a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>
</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>
</div>From bootstrap 3+ you can use e.relatedTargetto get element that triggered the modal
从 bootstrap 3+ 开始，您可以使用e.relatedTarget获取触发模态的元素
回答by Amar
Instrument:
乐器：
@Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})
Now in your COntroller you can access this value like
现在在您的控制器中，您可以访问此值，例如
public ActionResult Action_Name(int id)
{
//Do something
return view();
}
