Question

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

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

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

Answer 1

您需要执行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);
   });
});

Answer 2

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

这是控制器：

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调用。

在jQuery对话框中导航

2 个答案: