web-dev-qa-db-ja.com

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

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

    }

[〜＃〜]ビュー[〜＃〜]

  @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（）セクションでラップすることで機能させることができますが、このようにする方法や方法を知りたいですか？それともそれを達成する唯一の方法は提出ですか？

ありがとう

asp.netasp.net-mvc-3razor
23
Jason

JQueryで最初に入力の値を設定する適切な方法は、

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

次にコントローラーを見てみましょう。Postアクションの結果では、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入力をaに配置して、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呼び出しからのものではない場合、ブラウザに表示するために完全なビュー（html、スクリプトなど）が返されます。

これがあなたを助け、あなたが探していたものであることを願っています。

32
ajrawson

モデルだけでなく、ビューも更新できます。かみそりページのモデルは、ビューをレンダリングするためにサーバーでコンパイルされます。すべてのajaxリクエストの後で、かみそりのページを再コンパイルする必要があります。

実際のオプションは、サーバーからjsonを返し、手動でDOM/Viewを更新することです。

0
Spankied