Ajax.BeginFormでの部分ビュー更新について

Question

いつもお世話になっております。
ASP.NET MVCの部分ビューの動的更新について、皆様のお力をお貸しいただきたいです。

開発環境
OS : Windows10
.NET FrameWork : 4.5.2
Visual Studio : 2015 Professonal
Visual Studioプロジェクト : ASP.NET Web Application(.NET FrameWork)
プロジェクトテンプレート : MVCを指定
実行環境 : IIS(Visual Studioでの実行時)
Ajax.BeginFormを使用する為の参照設定 : NuGet => Microsoft.jQuery.Unobtrusive.Ajax 3.2.5
JQueryの読込も正しく行っております。

現在、以下のソースにて、問題が発生しております。

Test/Index.cshtml

<div>
    @Html.Partial("_List", Model)
</div>

Test/_List.cshtml

@using BootstrapSite1.Models.Test
@model TestViewModel 

@using (Ajax.BeginForm("Delete", "Test",
                                        new AjaxOptions
                                        {
                                            InsertionMode = InsertionMode.Replace,
                                            HttpMethod = "POST",
                                            UpdateTargetId = "system-list",

                                        }))
{
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>削除</th>
        </tr>
        @for(int i = 0; i < Model.SystemList.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(m=>m.SystemList[i].Id)
                    @Html.HiddenFor(m=>m.SystemList[i].Id)
                </td>
                <td>@Html.TextBoxFor(m=>m.SystemList[i].Name)</td>
                <td>
                    <button type="submit" name="idx" value="@i">削除</button>
                </td>
            </tr>
        }
    </table>
}
```　

Model
```C#
using System.Collections.Generic;
using System.Data;
using System.Text;

namespace BootstrapSite1.Models.Test 
{
    public class SystemModel
    {
        public int Id { get; set; }

        public string Name { get; set; }

    }
    public class TestViewModel 
    {
        public List<SystemModel> SystemList { get; set; }

        public TestViewModel ()
        {
            this.SystemList = new List<SystemModel>();
        }

        public void SetSystemList()
        {
            this.SystemList.Add(new SystemModel { Id = 1, Name = "1" });
            this.SystemList.Add(new SystemModel { Id = 2, Name = "2" });
            this.SystemList.Add(new SystemModel { Id = 3, Name = "3" });
        }
}

Controller

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace BootstrapSite1.Controllers
{
    public class TestController: Controller
    {
        public ActionResult Index()
        {
            TestViewModel model = new TestViewModel ();
            model.SetSystemList();
            return View(model);
        }
        
        public PartialViewResult Delete(TestViewModel model, int idx)
        {
            List<SystemModel> list = model.SystemList;
            list.RemoveAt(idx);
            model.SystemList = list;
            return PartialView("_List", model);
        }
    }
}

上記のソースを実行した場合、画面には以下の表が表示されます。

id	name	削除
1	1	削除
2	2	削除
3	3	削除

しかし、1行目の削除ボタンを実行するした場合

id	name	削除
2	1	削除
3	3	削除

上記の様に、部分的に再描画されますが、
@Html.HiddenForまたはTextBoxForなど出力している箇所が、前回の値を参照してしまっているような状態です。
部分ビュー出力時にデバックで追いかけても前回データはModelから削除されている為、前回値が表示されるのが何故か理解できません。

どうすれば、ビューが正しく更新されますでしょうか。

よろしくお願いいたします。

Comments

[退会済みユーザー]

MVC4 のタグがついてますが 4 に間違いないですか？ 違う場合は付け直してください。他にASP.NET, ASP.NET MVC Framework というのがあります。

[退会済みユーザー]

それから、あなたの開発環境を書いてください。OS, .NET, MVC, Visual Studio のバージョン、テンプレートは何を使ったか、開発用サーバーは何かなどの情報は重要です。

[退会済みユーザー]

BootstrapSite1.Utility.Convert とか BootstrapSite1.Utility.Database という内容不明な名前空間（？）がコードに書かれていますが、今回の話とは直接関係ない（無視してよい）のですか？

[nepia]

ご指摘頂いた件を修正させて頂きました。

[nepia]

BootstrapSite1.Utility.Convert とか BootstrapSite1.Utility.Databaseにつきまして、未使用のusingですので、無視して頂いて結構です。

[退会済みユーザー]

意味不明の名前が多々あるのですが・・・　アクションメソッド public ActionResult Index() に対するビューが「View」で、「View」のコードの @Html.Partial("_List", Model) の _List が「部分View」、Model がアクションメソッドの return View(model); の model ですか？

[退会済みユーザー]

「Ajax.BeginFormを使用する為の参照設定 : NuGet => Microsoft.jQuery.Unobtrusive.Ajax 3.2.5」とのことですが、NuGet パッケージのインストールだけでなく、参照設定も jQuery 都の順番などを含めて間違いなくされていると理解して良いですか？

[nepia]

上記のご指摘の件、修正させて頂きました。また、JQueryの読み込み順序もAJaxとして非同期更新が可能なので、問題ないと思われます。

Answer 1

上記のご指摘の件、修正させて頂きました。

まだはっきりしませんが、上の質問に対する先の私のコメント、

アクションメソッド public ActionResult Index() に対するビューが「View」で、「View」のコードの @Html.Partial("_List", Model) の _List が「部分View」、Model がアクションメソッドの return View(model); の model ですか？

・・・は合っていると理解してレスしておきます。理解が違っていたらどこがどう違うか連絡ください。

たぶん ajax 呼び出しになっていないと思いますが、そこは今回の問題、

@Html.HiddenForまたはTextBoxForなど出力している箇所が、前回の値を参照してしまっているような状態です。

・・・には直接の関係はなさそうなのでちょっと置いときます。（後述します）

［削除］ボタンをクリックした結果で、何故 LabelFor と HiddenFor / TextBoxFor の値が違うかは以下の記事に書いてある通りの理由だと思います。

EditorFor と DisplayFor の違い
http://surferonwww.info/BlogEngine/post/2013/03/27/editorfor-and-displayfor-display-different-values.aspx

HiddenFor / TextBoxFor については、POST された値が ModelState ディクショナリ（model ではない）に格納されていて、Html Helper はまず ModelState ディクショナリを調べて、そこに値があればそれを表示するようになっています。

上の記事にも書いてありますが、試しに Delete アクションメソッドに以下のコードを追加してみてください。（これを解決策としていいかどうかは別の話ですよ）

if (ModelState.IsValid)
{
    ModelState.Clear();
}

これで期待通りになれば上の記事の話が当たりです。

そこが解決できても ajax 呼び出しになっていなそうな点と、Ajax.BeginForm の使い方が正しくない点は訂正が必要だと思います。

また、JQueryの読み込み順序もAJaxとして非同期更新が可能なので、問題ないと思われます。

とのことですが、動いているように見えるだけで ajax を使って非同期更新はできてない様な気がします。

NuGet パッケージのインストールだけでなく、参照設定もきちんとしないとダメです。以下の記事に書いてるように BundleConfig.cs への登録と View での @Scripts.Render("~/bundles/xxx") の追加が必要ですが、きちんとやってますか？

MVC5 で AjaxHelper が働かない
http://surferonwww.info/BlogEngine/post/2018/05/28/ajaxhelpers-do-not-work-on-mvc5-application-created-by-visual-studio-template.aspx

それから、Test/_List.cshtml での Ajax.BeginForm の使い方ですが、UpdateTargetId = "system-list" で指定される部分が書き換わるので、そこをきちんと書かないとダメです。

質問者さんの例では Test/_List.cshtml のコードの table 要素全体を <div id="system-list"> ... </div> で囲うというようにしないと期待した結果は得られないはずです。

Comments

[nepia]

ありがとうございました！
ModelState.Clear()処理を記入することで、期待通りの動作となりました。

[len_souko]

TextBoxに入力した値が初期化されると言われて困る気がする