Ajax Post-MVC3によるモデルの変更によるビューの更新

Question

モデル値を更新してその新しい値をビューに反映させるためにAjax（私が思う）呼び出しを使用しようとしています。私はちょうどその時のテスト目的のためにこれを使用しています。ここで

は概要です：

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

    } 

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（）セクションで送信する入力タイプを変更してラップすることで動作させることができますが、このようにするにはどうすればいいですか？または、それを達成するための唯一の方法を提出していますか？

おかげで、入力の値を設定するための適切な方法は、我々はあなたがポストアクションの結果では、コントローラを見てみましょう

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

次を使用することであるjQueryので

Answer 1

最初のものあなたのajax呼び出しでView全体を返します。つまり、すべてのhtml、スクリプトリファレンス、およびjavascriptがjqueryのポストリクエストで返されます。更新しようとしているのは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); 

} 

次の私はあなたのためにあなたのモデルをシリアライズので、あなたが持つことができますjqueryの中であなたのhtmlの入力を置くだろうし、次にあなたがするあなたの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では、あなたの上にあなたが前にやったすべてをやっているが、今要求タイプをテストしているし、それがアヤックスだ場合、あなたの文字列値のJSONの結果を返します。リクエストがajax呼び出しからのものでなかった場合、ブラウザには完全なView（HTML、スクリプトなど）が返されて表示されます。

私はこれがあなたを助け、あなたが探していたものであることを望みます。