瀏覽jQuery對話框內

我有一個對話框，裏面有一個按鈕。當按鈕被點擊時，我想要在同一個對話框中渲染動作（替換當前內容）。那可能嗎？瀏覽jQuery對話框內

現在，我已經有了這段代碼，但是它並沒有渲染對話框中的動作，它只是重定向整個頁面。

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

來源

2013-02-21 Mathieu

基思的答案是正確的。我只是提供了一個更完整的例子。

這是控制器：

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-25 18:06:31

您需要做一個ajax調用，並在成功時替換對話框的內部內容。您目前的方式無法執行此操作，因爲這會導致整個頁面刷新。該對話框只是一個定位顯示在屏幕頂部的div，而不是單獨的iFrame或任何東西。

添加數據的屬性稱爲數據行動要執行那麼這樣做的動作：

$('.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-21 18:54:00

您能否介紹一些實施細節？我無法弄清楚 – Mathieu 2013-02-21 21:41:41

瀏覽jQuery對話框內

回答

相關問題