Question

我有一个Bootstrap模式，可以从不同的超链接启动，每个超链接都提供另一个ID。

但我想要的是，每次启动模态时，它都会填充传递给模态的ID的数据。这是（简化的）代码（请参阅代码中的注释以获取解释）：

@model ViewModels.BookcaseItem.EditBookcaseItemViewModel

<div class="modal hide modal-large" id="editBookDialog">
    @using (Html.BeginForm("Edit", "Bookcase", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        <!-- this is where the ID will be passed to -->
        @Html.HiddenFor(x => x.Id)

        <div class="modal-body">
            <!-- there s actually a couple of editors and labels here, but that doesn t really matter -->
            @Html.EditorFor(x => x.Bla)
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    }
</div>

以下是用于启动模式并将ID传递给它的超链接之一：

<a href="#editBookDialog" data-toggle="modal" data-id="@bookcaseItem.Id" title="Edit this item" class="open-EditBookDialog"></a>

最后但同样重要的是JQuery部分实际传递ID：

$(document).on("click", ".open-EditBookDialog", function () {
    var myBookcaseItemId = $(this).data( id );
    $(".modal #Id").val(myBookcaseItemId);
    $( #editBookDialog ).modal( show );
});

让我们假设有一个签名为ActionResult Edit（字符串id）的方法，它将数据返回到放置模态的PartialView。

模态已经嵌入到包含所有超链接的页面中，只是默认情况下不可见。

我只是不知道如何根据传递的ID用不同的数据填充它。

Answer 1

您可以使用AJAX通过控制器操作从服务器加载新数据：

$(function() {
    $(document).on( click ,  .open-EditBookDialog , function () {
        var myBookcaseItemId = $(this).data( id );
        // send an AJAX request to fetch the data
        $.get(this.href, { id: myBookcaseItemId }, function(data) {
            $( #editBookDialog ).html(data).modal( show );
        });
        return false;
    });
});

现在很明显，您应该修改应该打开对话框的锚点，使其s href指向编辑控制器操作：

@Html.ActionLink(
    "Some text", 
    "Edit", 
    null, 
    new {
        data_toggle = "modal",
        data_id = bookcaseItem.Id,
        title = "Edit this item",
        @class = "open-EditBookDialog"
    }
)

友情链接