0

我不确定这是否可以完成，因为它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');
        });
    });
});

我知道我在其中绑定的 IdUrl.Action()超出了 foreach 的范围。是否有可能在单击按钮时以某种方式获取result.ResidentialPropertyId并将其动态传递给？Url.Action()

为了证明它的工作，我将它放在Url.Action()foreach 循环中，但这只是为列表中的第一项启动了一个模式。我想做的事能实现吗？

4

1 回答 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每一行的 包含在您的按钮中，或者您可以从它的容器元素中读取它。我还建议您删除按钮的 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');
        });
    });
});
于 2013-04-09T10:54:46.910 回答