Cập nhật Xem với Thay đổi mô hình qua Ajax Post - MVC3

Question

Tôi đang cố gắng sử dụng lệnh gọi Ajax (tôi nghĩ) để cập nhật giá trị mô hình của mình và sau đó có giá trị mới được phản ánh trong chế độ xem. Tôi chỉ sử dụng nó cho mục đích thử nghiệm cho thời điểm này.

Dưới đây là tổng quan về:

MODEL

public class MyModel 
{ 
    public int Integer { get; set; } 
    public string Str { get; set; } 
} 

CONTROLLER

public ActionResult Index() 
    { 
     var m = new MyModel(); 
     return View("Test1", m); 
    } 

    [HttpPost] 
    public ActionResult ChangeTheValue(MyModel model) 
    { 
     var m = new MyModel(); 
     m.Str = model.Str; 
     m.Str = m.Str + " Changed! "; 
     m.Integer++; 

     return View("Test1", m); 

    } 

XEM

@model Test_Telerik_MVC.Models.MyModel 
@using Test_Telerik_MVC.Models 
@{ 
    ViewBag.Title = "Test1"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<h2> 
    Test1</h2> 
@if (false) 
{ 
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script> 
} 
<h2> 
    ViewPage1 
</h2> 

<div> 
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" /> 
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/> 
    <div></div> 
</div> 

<script type="text/javascript"> 

    function changeButtonClicked() { 
     var url = '@Url.Action("ChangeTheValue", "Test1")'; 
     var data = '@Model'; 
     $.post(url, data, function (view) { 
      $("#Str").value = '@Model.Str'; 
     }); 
    } 

</script> 

Về cơ bản, chế độ xem hiển thị nút có hộp văn bản. Mục tiêu duy nhất của tôi là chỉ hiển thị giá trị của mô hình của tôi (thuộc tính Str) trong hộp văn bản.

Tôi đã thử các kết hợp khác nhau của hàm changeButtonClicked() không có kết quả. Test1 là tên của bộ điều khiển của tôi. Những gì tôi không hiểu là khi tôi gỡ lỗi nó, hành động điều khiển cháy và đặt giá trị của tôi một cách chính xác. Nếu tôi đặt điểm ngắt trên phần "@ Model.Str" của thẻ đầu vào, nó cho tôi thấy rằng @ Model.Str của tôi bằng với Thay đổi! đó là chính xác. Tuy nhiên, ngay sau khi hàm thành công của tôi kích hoạt trong javascript, giá trị sẽ trả về giá trị ban đầu của nó.

Tôi có thể làm cho nó hoạt động bằng cách thay đổi kiểu đầu vào để gửi và gói nó trong phần @ Html.BeginForm() nhưng tôi tự hỏi nếu/làm thế nào để làm điều đó như thế này? Hoặc là Gửi một cách duy nhất để hoàn thành nó?

Cảm ơn

Answer 1

Điều đầu tiên trong jQuery cách thích hợp để đặt một giá trị của một đầu vào là sử dụng

$("#Str").val(@Model.Str); 

Tiếp theo chúng ta sẽ xem xét các điều khiển, trong kết quả action Gửi bạn trả lại toàn bộ View trong cuộc gọi ajax của bạn. Điều đó có nghĩa là tất cả các tài liệu tham khảo html, script và javascript đang được trả lại trong yêu cầu bài đăng jquery của bạn. Vì tất cả các bạn đang cố gắng cập nhật là giá trị của đầu vào có tên str, tôi chỉ trả về giá trị đó là json và không có gì khác.

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    return Json(m.Str); 

} 

Tiếp theo, tôi sẽ đặt đầu vào html của bạn trong một, do đó bạn có thể có jquery serialize mô hình của bạn cho bạn và sau đó bạn có thể thay đổi mã bưu jquery của bạn là:

function changeButtonClicked() { 
    var url = '@Url.Action("ChangeTheValue", "Test1")'; 
    $.post(url, $('form').serialize(), function (view) { 
     $("#Str").val(view); 
    }); 
} 

Tất cả serialize đang làm là mã hóa các yếu tố đầu vào trong biểu mẫu của bạn thành một chuỗi và nếu mọi thứ được đặt tên đúng aps.net sẽ liên kết lại với mô hình của bạn.

Nếu bạn cần tuyến đường xử lý cả cuộc gọi ajax và yêu cầu đầy đủ, bạn có thể sử dụng hàm IsAjaxRequest của asp.net để kiểm tra yêu cầu và trả về kết quả khác tùy thuộc vào yêu cầu ajax hay không. Bạn sẽ làm một cái gì đó như thế này trong điều khiển của bạn:

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    if (Request.IsAjaxRequest) { 
     return Json(m.Str); 
    } 
    else { 
     return View("Test1", m); 
    } 
} 

Trong ActionResult trên bạn đang làm tất cả những gì bạn đã làm trước đó, nhưng bây giờ đang thử nghiệm các loại yêu cầu và nếu nó ajax bạn quay trở lại một Json kết quả của chuỗi giá trị của bạn. Nếu yêu cầu không phải từ cuộc gọi ajax thì Chế độ xem đầy đủ (html, tập lệnh, v.v.) sẽ được trả lại để hiển thị trong trình duyệt.

Tôi hy vọng điều này sẽ giúp bạn và là những gì bạn đang tìm kiếm.