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，然后会触发推文模式窗口并填入数据进行编辑。

我有模态编辑触发，但不知道接下来要做什么来将外部数据加载到模态中进行更新。

任何人都可以协助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。

在页面的某个位置，您应该拥有模态元素：

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

它是空的，因为它将使用对以下Action的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);
}

以下是您的部分视图_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调用操作ActionNameToGetAddressInfo并将其结果放入div id="ModalEditAddress"。当发生这种情况时，它将在局部视图的最后部分运行脚本并显示模态。

你必须编写另一个动作来保存地址，一些JQuery在保存模式时隐藏模态。

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

将外部数据（多个字段）加载到Twitter Bootstrap模式中

1 个答案: