0

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

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

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

2 回答 2

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);
   });
});
于 2013-02-21T18:54:00.387 回答
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 调用。

于 2013-02-25T18:06:31.883 回答