Tải một phần xem trong jquery.dialog

Question

Tôi là người hoàn toàn mới với mvc và cố gắng tạo một ứng dụng giả để tìm hiểu mvc 3. Tôi đã làm việc theo cách của mình thông qua ví dụ cửa hàng âm nhạc và giờ tôi đang cố gắng mở rộng vào một ứng dụng thực tế hơn. Với ví dụ bất cứ khi nào bạn muốn bất kỳ mục mới nào bạn được chuyển hướng đến chế độ xem Tạo tốt nhưng tôi muốn thay vì làm một bài đăng đầy đủ, tôi muốn sử dụng jquery.dialog để mở cửa sổ bật lên phương thức cho phép người dùng để chèn một mục mới.

cho đến nay tôi có

<script type="text/javascript"> 

    $(function() { 

     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      title: "hi there", 
      modal: true, 
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $('#my-button').click(function() { 
     $('#dialog').dialog('open'); 
     });}); </script> 

    <div id="dialog" title="Create Album" style="overflow: hidden;"> 
    @Html.Partial("_CreateAlbumPartial")</div> 

vấn đề với điều này là quan điểm từng phần được nạp mỗi lần không thông qua ajax và tôi thực sự không biết nơi tôi nên đặt quan điểm một phần. Shoukld nó ở trong vị trí được chia sẻ hoặc trong thư mục với các chế độ xem khác? Làm cách nào để cập nhật lớp trình điều khiển để phục vụ cho chế độ xem một phần?

Xin lỗi nếu đây là dễ dàng để làm, im 3 ngày vào :) MVC

Answer 1

Hãy thử một cái gì đó như thế này:

<script type="text/javascript"> 
    $(function() { 
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      title: 'hi there', 
      modal: true, 
      open: function(event, ui) { 
       //Load the CreateAlbumPartial action which will return 
       // the partial view _CreateAlbumPartial 
       $(this).load("@Url.Action("CreateAlbumPartial")"); 
      }, 
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('#my-button').click(function() { 
      $('#dialog').dialog('open'); 
     }); 
    }); 
</script> 
<div id="dialog" title="Create Album" style="overflow: hidden;"> 

Chúng tôi sử dụng các chức năng mở mà được kích hoạt khi hộp thoại được mở ra và bên trong chúng tôi gửi yêu cầu AJAX đến một hành động điều khiển sẽ trả về một phần:

public ActionResult CreateAlbumPartial() 
{ 
    return View("_CreateAlbumPartial"); 
} 

Answer 2

Để cải thiện câu trả lời của Darin, chúng tôi có thể di chuyển mã tải div trong sự kiện nhấp nút. Bằng cách này, tất cả các alghorithms của vị trí của hộp thoại hoạt động trên văn bản mới và do đó hộp thoại được đặt chính xác.

<script type="text/javascript"> 
    $(function() { 
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      title: 'hi there', 
      modal: true,   
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('#my-button').click(function() { 
      //Load the CreateAlbumPartial action which will return 
      // the partial view _CreateAlbumPartial 
      $('#dialog').load("@Url.Action("CreateAlbumPartial")", 
        function (response, status, xhr) { 
         $('#dialog').dialog('open'); 
        }); 
     }); 
    }); 
</script> 
<div id="dialog" title="Create Album" style="overflow: hidden;">