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

I'm not sure if this can be done as the Url.Action() is trying to access a variable that's only in the foreach's scope - maybe using jQuery?

我不确定是否可以这样做，因为Url.Action（）试图访问仅在foreach范围内的变量 - 可能使用jQuery？

I have a strongly typed partial view that takes a view model that contains a list of search results.

我有一个强类型的局部视图，它采用包含搜索结果列表的视图模型。

I iterate through the list and each result is displayed in summarised form. Beside each item in the list there's a button that (should) when clicked launches a modal window that displays more detailed information about the list item. So if there's 10 items in the list there's going to be 10 correspdonding 'More info' buttons.

我遍历列表，每个结果以摘要形式显示。除了列表中的每个项目之外，还有一个按钮（应该）在单击时启动模式窗口，该窗口显示有关列表项的更多详细信息。因此，如果列表中有10个项目，则会有10个相应的“更多信息”按钮。

Partial View:

部分视图：

<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>

Just below the foreach loop I define the modal (ViewProperty is a controller action that returns a partial that contains the modal's body):

在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>

When one of the buttons is clicked, it should launch a modal. Handled like this:

单击其中一个按钮时，它应该启动一个模态。处理方式如下：

<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');
        });
    });
});

I know that the Id I'm binding in the Url.Action() is outside of the scope of the foreach. Is it possible to somehow get the result.ResidentialPropertyId and pass it to the Url.Action() dynamically when a button is clicked?

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

To prove it's working, I placed the Url.Action() in the foreach loop, but this only launched a modal for the first item in the list. Can what I'm trying to do be achieved?

为了证明它正在工作，我将Url.Action（）放在foreach循环中，但这只为列表中的第一个项目启动了一个模态。可以实现我想要实现的目标吗？

1 个解决方案

#1

Do not include the Id in the 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>

With that code the data-url will have a value ResidentialProperties/ViewProperty.

使用该代码，data-url将具有值ResidentialProperties / ViewProperty。

Then include the Id on each row to your button or you can read it from it's container element. I also suggest you remove the id of the button and maybe just have a class to ensure that the ajax call won't get executed for all instances of your buttons

然后在按钮的每一行中包含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>

and in your js do the following

并在你的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');
        });
    });
});

#1