我有一个带有模态窗口的视图。当我点击打开模态窗口时,我想传递参数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>
您当前为集合中的每个项目生成一个模式,但给它一个id="myModal"
这是无效的 html,意味着data-target="#myModal"
只会打开第一个。将模态移到循环之外,这样您就只创建一个(并且还删除了<h4 class="modal-title" id="myModal"></h4>
也有相同的元素id
属性)
然后将按钮 html 更改为
<button type="button" class=".." .. data-url="@Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
并将模态中的html更改为
Instrument: <a id="details" href="#">Details</a>
然后将脚本更改为
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
旁注:您可能想做类似的事情Checked: @item.Checked
在模态中
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)