引导程序模式:加载提供的ID的数据 [英] Bootstrap modal: load data for supplied ID

问题描述

我有一个引导模式，可以从其他模式启动超链接，每个超链接都提供另一个ID.

I've got a Bootstrap modal, that can be launched from different hyperlinks, each supplying another ID.

但是我想要的是每次启动模态时，都会使用传递给模态的ID的数据填充它.这是(简化的)代码(有关说明，请参见代码内部的注释):

But what I want is that every time the modal is launched, it is populated with the data for the ID that's passed to the modal. Here's the (simplified) code (see the comments inside the code for explanation):

@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传递给它的超链接之一:

Here is one of the hyperlinks that is used to launch the modal and pass the ID to it:

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

最后但并非最不重要的JQuery部分实际上是通过ID传递的:

And last but not least the JQuery part to actually pass the ID:

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

让我们假设有一个方法带有签名ActionResult Edit(字符串id)，该方法将数据返回到放置模态的PartialView中.

And let's assume there's a method with the signature ActionResult Edit(string id) that returns the data to the PartialView where the modal is placed in.

该模式已包含在所有超链接的页面中，默认情况下不可见.

The modal is already embedded in the page with all the hyperlinks, it's just not visible by default.

我只是不知道如何根据传递的ID向其中填充不同的数据.

I just can't figure out how to populate it with different data based on the ID that was passed.

推荐答案

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

You could use AJAX in order to load fresh data from the server by going through the controller action:

$(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;
    });
});

现在显然，您应该修改应该打开对话框的锚点，以便它的href指向编辑"控制器操作:

Now obviously you should modify the anchor that is supposed to open the dialog so that it's href points to the Edit controller action:

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

这篇关于引导程序模式:加载提供的ID的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！