2

这是我的第一个引导程序/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 模式窗口，其中填充了数据以进行编辑。

我有模态编辑触发，但不确定下一步将外部数据加载到模态中以进行更新。

http://i.imgur.com/5ig3k.jpg

http://i.imgur.com/Oi98S.jpg

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

4

1 回答 1

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>

它是空的，因为它将填充对以下操作的 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 调用 ActionActionNameToGetAddressInfo并将其结果放入divwith 中id="ModalEditAddress"。发生这种情况时，它将在局部视图的最底部运行脚本并显示模式。

您将不得不编写另一个动作来保存地址和一些 JQuery 来在保存时隐藏模式。

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

于 2012-12-13T21:59:48.157 回答