Mở hộp thoại jQuery khi nhấp vào Html.ActionLink + MVC4

Question

Tôi có chế độ xem hiển thị danh sách các bên. mỗi bên có một ActionLink.

@Html.ActionLink("Edit", "Edit", new { id = 234 }) 

Liên kết hành động của tôi chuyển đến hành động chỉnh sửa và hiển thị chế độ xem trình chỉnh sửa.

Ý tưởng chính là, khi nhấp vào ActionLink, hộp thoại jQuery sẽ xuất hiện với chế độ xem trình chỉnh sửa và mọi chỉnh sửa trong chế độ xem sẽ được lưu vào cơ sở dữ liệu.

Vấn đề của tôi là, tôi không biết cách mở chế độ xem trong hộp thoại jQuery. Vậy làm thế nào bạn sẽ mở một khung nhìn trong một hộp thoại jQuery?

Nếu điều tương tự có thể đạt được mà không sử dụng ActionLink, điều đó cũng hữu ích.

Answer 1

Bạn có thể có hành động trả lại một phần lượt xem thay vì xem toàn bộ, sau đó đọc tài liệu của jQuery UI dialog và cuối cùng viết mã cần thiết.

Bắt đầu bằng cách cho neo của bạn một lớp:

@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" }) 

định nghĩa một giữ chỗ cho thoại của bạn:

<div id="my-dialog"></div> 

chắc chắn hành động điều khiển của bạn đang trở lại một cái nhìn cục bộ:

public ActionResult Edit(int id) 
{ 
    MyViewModel model = ... 
    return PartialView(model);  
} 

và cuối cùng viết javascript để làm cho nó sống:

<script type="text/javascript"> 
    $(function() { 
     $('#my-dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      modal: true 
     }); 

     $('.modal').click(function() { 
      $('#my-dialog').load(this.href, function() { 
       $(this).dialog('open'); 
      }); 
      return false; 
     }); 
    }); 
</script> 

Không cần phải nói rằng bạn cần bao gồm tập lệnh jQuery ui sau jquery cũng như các bảng định kiểu cần thiết.

Answer 2

Bạn không cần phải làm tất cả những phiền xung quanh, hãy thử một cái gì đó như:

@Html.ActionLink("Open Dialog", null, null, null, 
     new { data_role = "button", data_inline = true, data_rel = "dialog", 
      data_transition = "pop", href="#dialogId" }) 

Các cheat mấu chốt ở đây là thuộc tính href.

Cũng nhớ bạn có thể thêm các hộp thoại để trang mong muốn của bạn như sau:

@section dialogPages { 
    <div data-role="page" id="dialogId"> 
     <div data-role="header"> 
     </div> 
     <div data-role="content"> 
     </div> 
     <div data-role="footer"> 
     </div> 
    </div> 
} 

Và sau đó bao gồm những điều sau đây trong _Layout.cshtml của bạn:

@if (IsSectionDefined("dialogPages")) 
{ 
    @RenderSection("dialogPages") 
} 

trình cho tôi :)

Answer 3

bạn có thể làm như thế này đơn giản

formatter: function (cellvalue, options, rowObject) { 
        var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })'; 
        return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name); 
       }, sortable: true, align: 'left', width: 200, editable: true