通過Ajax Post更新模型更改視圖MVC3

Question

我正在嘗試使用Ajax（我認爲）調用來更新我的模型值，然後在視圖中反映出新的值。目前我只是將它用於測試目的。

這裏的概述：

模型

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

控制器

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); 

    } 

VIEW

@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> 

基本上該視圖呈現一個帶有文本框的按鈕。我唯一的目標是簡單地在文本框中顯示我的模型（Str屬性）的值。

我試過各種組合的changeButtonClicked（）函數無濟於事。 Test1是我的控制器的名稱。我不明白的是當我調試它時，控制器操作會觸發並正確設置我的值。如果我在輸入標籤的「@ Model.Str」部分放置一個斷點，它會告訴我，我的@ Model.Str等於Changed！哪個是對的。但是，只要我的成功函數在javascript中觸發，該值就會恢復爲原始值。

我可以通過改變輸入類型來提交和包裝它在@ Html.BeginForm（）部分，但我想知道如果/如何做到這一點？或者是提交完成它的唯一方法？

感謝

Answer 1

在jQuery的

第一件事正確的方式來設置值的輸入是使用

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

接下來我們來看看控制器，中郵作用的結果你在你的ajax調用中返回整個視圖。這意味着所有的HTML，腳本引用和JavaScript都會在你的jquery post請求中返回。因爲你試圖更新的是名爲str的輸入的值，所以我只是將該值作爲json返回而沒有其他值。

[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); 

} 

接下來我會放在你的HTML輸入按照這樣你就可以擁有jQuery的系列化你爲你的模型，然後你可以改變你的jQuery郵政編碼爲：

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

所有連載做將表單中的輸入編碼爲字符串，如果所有內容都正確命名，aps.net會將其綁定回您的模型。

如果您需要讓您的路由處理ajax調用和完整請求，則可以使用asp.net的IsAjaxRequest函數來測試請求並根據請求是否爲ajax返回不同的結果。你會做這樣的事情在你的控制器：

[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); 
    } 
} 

在ActionResult的上面，你在做你之前所做的一切，但現在正在測試的請求類型，如果它的AJAX你回到你的字符串值的JSON結果。如果請求不是來自ajax調用，那麼完整的View（html，腳本等）將被返回以顯示在瀏覽器中。

我希望這可以幫助你，並且你正在尋找。