[英]MVC4 Razor - bind object Id from foreach loop to Url.Action that's outside the loop
我不确定这是否可以完成,因为Url.Action()
试图访问仅在foreach范围内的变量-也许使用jQuery?
我有一个强类型的部分视图,该视图采用包含搜索结果列表的视图模型。
我遍历列表,每个结果以摘要形式显示。 列表中的每个项目旁边都有一个按钮,单击该按钮( 应 )会启动一个模式窗口,该窗口显示有关列表项目的更多详细信息。 因此,如果列表中有10个项目,那么将有10个对应的“更多信息”按钮。
部分视图:
<div>
@foreach (var result in Model.SearchResults)
{
<div class="basic-search-result">
<div class="row-fluid">
<img class="span3" src="http://some-img.jpg" />
<div class="span3">
<div class="address">
@result.Address.TownCity<br />@result.Address.County
</div>
<div>
€@result.MonthlyRate Monthly
</div>
</div>
<div class="span3 offset1" id="basic-search-result-btns">
<button class="btn btn-primary btn-block" id="btn-show-modal-from-get-all">More info</button>
</div>
</div>
</div>
}
</div>
在foreach循环的正下方,我定义了模态( ViewProperty
是一个控制器操作,它返回包含模态主体的部分):
<div class="modal hide fade in" id="modal-view-property-from-get-all"
data-url="@Url.Action("ViewProperty", "ResidentialProperties", new { id = result.ResidentialPropertyId })">
<div id="view-property-from-get-all-container"></div>
</div>
单击其中一个按钮时,它应该启动一个模态。 像这样处理:
<script type="text/javascript">
$(document).ready(function () {
$('#btn-show-modal-from-get-all').click(function () {
var url = $('#modal-view-property-from-get-all').data('url');
$.get(url, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});
我知道我在Url.Action()
绑定的ID在foreach的范围之外。 是否有可能以某种方式获取result.ResidentialPropertyId
并把它传递给Url.Action()
点击一个按钮时动态?
为了证明它是有效的,我将Url.Action()
放在了foreach循环中,但这仅为列表中的第一项启动了一个模式。 我要实现的目标可以实现吗?
不要在data-url
包含Id
<div class="modal hide fade in" id="modal-view-property-from-get-all"
data-url="@Url.Action("ViewProperty", "ResidentialProperties")">
<div id="view-property-from-get-all-container"></div>
</div>
使用该代码, data-url
的值将为ResidentialProperties/ViewProperty
。
然后将每一行的Id
包含在您的按钮中,或者您可以从其容器元素中读取它。 我还建议您删除按钮的ID,也许只需要一个类,以确保不会对按钮的所有实例都执行ajax调用
// assuming Id is the identifier per row
<button class="btn btn-primary btn-block show-modal"
data-id="@result.Id">More info</button>
并在您的js中执行以下操作
$(document).ready(function () {
$('.show-modal').click(function () {
var url = $("#modal-view-property-from-get-all").attr('data-url');
var id = $(this).attr('data-id');
$.get(url + '/' + id, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.