MVC4 Razor - 将对象Id从foreach循环绑定到循环外的Url.Action

时间:2013-04-09 10:45:21

标签: c# jquery asp.net-mvc razor asp.net-mvc-4

我不确定是否可以这样做,因为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循环中,但这只为列表中的第一项启动了一个模态。可以实现我想要做的吗?

1 个答案:

答案 0 :(得分:1)

请勿在{{1​​}}

中加入Id
data-url

使用该代码,<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,也许只是有一个类来确保不会为按钮的所有实例执行ajax调用

Id

并在您的js中执行以下操作

// assuming Id is the identifier per row
<button class="btn btn-primary btn-block show-modal" 
    data-id="@result.Id">More info</button>