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 に答える