在 jQuery 对话框中导航答案

【问题标题】：Navigating inside a jQuery dialog在 jQuery 对话框中导航
【发布时间】：2013-02-26 02:06:31
【问题描述】：

我有一个对话框，里面有一个按钮。单击按钮时，我希望在同一个对话框中呈现操作（替换当前内容）。这可能吗？

目前，我有这段代码，但它不会在对话框中呈现操作，它只是重定向整个页面。

<button style="float: right" class="awe-btn" onclick="location.href='@Url.Action("Edit", "Agenda", new { paramid = Model.ID })'">
    @:Modify
</button>

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-dialog

【解决方案1】：

基思的回答是对的。我只是提供一个更完整的例子。

这是控制器：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult WhatTimeIsIt()
        {
            return Json(DateTime.Now.ToString(), JsonRequestBehavior.AllowGet);
        }

    }

以及观点：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-modal.js"></script>
    <script type="text/javascript">
        function showModal() {
            $('#TheModal').modal('show');
        }

        function whatTimeIsIt() {
            $.ajax({
                url: '/home/whattimeisit',
                type: 'GET'
            }).done(function (data) {
                showCurrentTime(data);
            });
        }

        function showCurrentTime(data) {
            $('#TheModal .modal-header h3').html('Current time and date from the server');
            $('#TheModal .modal-body').html(data);
        }
    </script>
</head>
<body>
    <button class="btn btn-primary" onclick="showModal(); return false;">Show the modal window!</button>

    <div class="modal hide" id="TheModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>This is your modal</h3>
    </div>
    <div class="modal-body">
        Modal content goes here.
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" onclick="whatTimeIsIt(); return false;">What time is it?</button>
    </div>
</div>
</body>
</html>

注意事件必须如何由 javascript 处理。这是一个带有 DOM 操作的 AJAX 调用。

【讨论】：

【解决方案2】：

您需要进行 ajax 调用并在成功时替换对话框的内部内容。您不能以当前的方式执行此操作，因为这会导致整个页面刷新。对话框只是定位在屏幕顶部显示的 div，而不是单独的 iFrame 或任何东西。

添加一个名为 data-action 的数据属性以及您要执行的操作，然后执行以下操作：

$('.awe-btn').click(function(e) {
   var url  = $(e.target).data('action');
   $.ajax({
      url: url,
      type: 'GET'
   }).done(function(html) {
       $('.my-modal').html(html);
   });
});

【讨论】：

您能否提供更多实施细节？我想不通