jquery - 将外部数据(多个字段)加载到 Twitter Bootstrap 模式中

Question

这是我的第一个 bootstrap/jQuery 应用程序。

我有一个应用程序，可以显示一个人的多个地址，并且每个地址都可以通过“编辑”按钮进行编辑。

我无法找到一种方法来单击“编辑”，然后让 ajax 调用脚本来从数据库加载特定数据，然后将其放置在 Twitter 模式窗口中。

编辑按钮代码为:

a class="btn btn-small open-EditAddress" data-toggle="modal" data-id="#custom.addr_id#"         href="##edit_address_modal"><i class="icon-pencil"></i> Edit</a>

每个编辑按钮都会传递Addr_id，然后它会触发一个 Twitter 模式窗口，其中填充了用于编辑的数据。

我触发了模态编辑，但不知道下一步该怎么做才能将外部数据加载到模态中进行更新。

任何人都可以协助 jQuery 调用外部数据并将其加载到模态中吗？

Answer 1

将您的Edit链接更新为如下所示，以便在单击时不会触发显示模式:

<a class="btn btn-small open-EditAddress" data-id="#custom.addr_id#" href="/ControllerName/ActionNameToGetAddressInfo/[locationId]" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#ModalEditAddress"><i class="icon-pencil"></i> Edit</a>

您不想这样做，因为加载表单后您将通过 JQuery 单独触发该操作。另请注意所有这些额外的数据属性。它们将启用 ajax 调用，以使用所需信息填充模态 div。

页面上的某个位置应该有 modal 元素:

<div id="ModalEditAddress" class="modal hide fade">
</div>

它是空的，因为它将通过对以下操作的 ajax 调用来填充:

public ActionResult ActionNameToGetAddressInfo(int id) // locationId
{
    var model = [get all the address information from DB or however you get it];
    return View("~/Views/[ControllerName]/_EditAddress.cshtml", model);
}

这是您的部分 View _EditAddress.cshtml:

    @using(Ajax.BeginForm("[ActionNameToSaveAddress]","[ControllerName]", new AjaxOptions{...}))
    {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Edit Address</h3>
        </div>
        <div class="modal-body">
            [all the form related inputs]
        </div>
        <div class="modal-footer">
            <input type="submit" value="Save Address" />
        </div>
    }
    <script type="text/javascript">
        $('#ModalEditAddress').modal('show');
    </script>

到目前为止，当您单击编辑链接时，它将触发 Ajax 调用 Action ActionNameToGetAddressInfo 并将其结果放入 div 中，其中 id="ModalEditAddress"。发生这种情况时，它将在部分 View 的最底部运行脚本并显示模式。

您将必须编写另一个操作来保存地址和一些 JQuery 以在保存时隐藏模式。

这都是伪代码，因此可能需要对其进行一些调整才能正常工作。