Bạn có thể cập nhật một phần chế độ xem thay vì đăng toàn bộ trang không?

Question

Có cách nào để gửi biểu mẫu xem một phần trong asp.net mvc mà không cần tải lại trang gốc, nhưng chỉ tải lại chế độ xem một phần cho trạng thái mới của nó? Tương tự như cách cập nhật knockout.js bằng cách sử dụng liên kết dữ liệu.

Bảng dữ liệu của tôi hiển thị với số cột/tên biến vì vậy tôi không nghĩ knockout.js là một tùy chọn cho cột này, vì vậy, tôi đang cố sử dụng một phần xem thay thế.

Answer 1

Không cần jQuery.

gì bạn phải làm là đặt một phần của bạn trong một div, một cái gì đó như:

<div id="partial"> 
    @Html.Partial("YourPartial") 
</div> 

Sau đó, để cập nhật (ví dụ nhấp chuột vào một nút với id button), bạn có thể làm:

$("#button").click(function() { 
    $.ajax({ 
     url: "YourController/GetData", 
     type: "get", 
     data: $("form").serialize(), //if you need to post Model data, use this 
     success: function (result) { 
      $("#partial").html(result); 
     } 
    }); 
} 

Sau đó, hành động của bạn sẽ giống như thế:

public ActionResult GetData(YourModel model) //that's if you need the model 
{ 
    //do whatever 

    return View(model); 
} 

Answer 2

Trên thực tế, nếu một phần của bạn có một phương thức hành động con, bạn có thể đăng (hoặc thậm chí sử dụng liên kết anchor) trực tiếp đến hành động con và nhận được một ảnh hưởng giống như Ajax. Chúng tôi thực hiện việc này trong một vài Chế độ xem.

Cú pháp là

@Html.Action("MyPartial") 

Các hành động trẻ em là

public ActionResult MyPartial() 
{ 
    return PartialView(Model); 
} 

Nếu hình thức bài viết của mình với hành động con

@using (Html.BeginForm("MyPartial")) 
{ 
    ... 
} 

Các phần View sẽ được cập nhật với quan điểm từng phần trở về từ hành động con.

Jquery vẫn là cách hợp pháp để cập nhật một phần. Nhưng về mặt kỹ thuật, câu trả lời cho câu hỏi của bạn là CÓ.

Answer 3

Tôi sẽ sử dụng các mẫu helper Ajax cho các kịch bản như sử dụng một cái nhìn cục bộ và @ Html.RenderPartial ("partialName") partial helpers

Answer 4

Như bình thường những gì tôi tìm thấy khi tìm kiếm những thứ như thế này là người cung cấp cho quá thông tin hạn chế vì vậy tôi sẽ cố gắng giúp đỡ ở đây. Điều quan trọng là để thiết lập một div với một ID bạn có thể nối thêm html trả về. Ngoài ra khi nhấn điều khiển của bạn chắc chắn rằng nó trả về một phần. Có một số vấn đề tiềm năng với phương pháp này nhưng vào một ngày tốt thì nó sẽ hoạt động.

<div id="CategoryList" class="widget"> 
    @{ 
     Html.RenderPartial("WidgetCategories.cshtml"); 
    } 
</div> 

      function DeleteCategory(CategoryID) { 
      $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID, 
       function (data) { 
        if (data == "No") { 
         alert('The Category has report widgets assigned to it and cannot be deleted.'); 
        } 
        else { 
         $('#CategoryList').html(data); 
        } 

       } 
      ); 
     } 


    [HttpGet("DeleteWidgetCategory")] 
    [HttpPost("DeleteWidgetCategory")] 
    public IActionResult DeleteWidgetCategory(string CategoryID) 
    { 
     string Deleted = CategoryModel.DeleteCategory(CategoryID); 

     if (Deleted == "Yes") 
     { 
      return PartialView("WidgetCategories"); 
     } 
     else 
     { 
      return this.Json("No"); 
     } 
    }