MVCのRedirectToActionが機能しない

Question

MVCのRedirectToActionが機能しない

MVCのモデルだけだとたりない情報があったので、javascriptからformdataを送信したのですが、コントローラーには届くのにRedirectToActionが機能しません。

発生している問題

RedirectToActionでIndexに戻らない。
バリデートがエラーの時にModelStateのメッセージが表示されない

該当のソースコード

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,,,,...他プロパティいろいろ")]Model model)
{
  var req = Request.Form;
  //--Request.Formへの処理---
  //　略
  //------------------------
  if(ModelState.IsValid) {
    return RedirectToAction("Index");
  } else {
    return View(model);
  }
}

@using (Html.BeginForm("Edit", "model", FormMethod.Post ,htmlAttributes: new { @id = "editform" })){
  //modelの入力フォーム
  <div class="col-xs-5">
   <select id="multiselect">
     //プルダウンメニュー
   </select>
   <button type="button" id="presubmit">更新</button>
}

    const form = <HTMLFormElement>document.getElementById("editform");
    //サブミット前選択されたメニューを追加する
    document.getElementById("presubmit").addEventListener("click", () => {
        var formData = new FormData(form);

        for (var i = 0; i < multiselect.options.length; i++) {
            formData.append("multiselect[" + i.toString() + "]", multiselect.options[i].value);
        }

        const url = location.origin + "/model/Edit";

        const xhr = new XMLHttpRequest();
        xhr.open(HttpMethod.POST, url, true);
        xhr.responseType = '';
        xhr.setRequestHeader("contentType", "application / json; charset = utf - 8");
        xhr.send(formData);
        Indicator.Hide();
    });

試したこと

XMLHttpRequestではなくform.submit()でも試してみたのですが、form.submit()だと追加した情報が反映されませんでした。

補足情報

IEも対象なのでES6は使用できない状況です。
ライブラリ等はASP.NET MVCで初期設定で存在しているbootstrapのみ使用しています。

Comments

[退会済みユーザー]

質問に書かれている情報だけでは何をしているのか分かりません。何が問題なのかもわかりません。

デバッガを使って if(ModelState.IsValid) がどうなるかなど調べてみましたか？ リダイレクトの意味が分かってますか？ 質問に書かれている JavaScript がどのタイミングで動くのか、それで何がしたいのか不明です。

IE も対象とのことですが、IE では動かない () => { ... } というコードもありますし。何か全く見当違いのことをしていませんか？　質問者さんは ASP.NET MVC 開発にどのくらい経験があるのでしょう？

Answer 1

XMLHttpRequestではなくform.submit()でも試してみたのですが、form.submit()だと追加した情報が反映されませんでした。

JavaScript で送信するのでなく、普通に input type="submit" ボタンのクリックなどで送信すれば「追加した情報が反映されません」以外は問題なく、期待通り検証がかかり、検証 OK の時は index にリダイレクトされるのですよね。

であれば、JavaScript で送信するのは止めて、普通に input type="submit" ボタンのクリックなどで送信するその方向に進んで、今とは別の方法で「追加した情報」の送信・受信を行う手段を考えてはいかがですか？

どのように検証機能を実装しているのか書いてないのでわかりませんが、標準で ASP.NET MVC に実装されているデータアノテーションによるクライアントサイドの検証のことを言っているのであれば、JavaScript で（質問のコードのように ajax で）送信している限り働かないと思います。サーバー側はモデルバインディングがされていれば働くはずですが、その前にエラーでモデルバインディングがされてないとダメでしょう（その場合でも ModelState.IsValid は false になるはずですが）

もう一つの問題、

コントローラーには届くのにRedirectToActionが機能しません。

は、JavaScript による送信でもコントローラーには制御が飛んでくるのだから、index にリダイレクトされないのは if(ModelState.IsValid) が true にならないから以外の原因はなさそうですが、その理由は質問に提供されている情報では分かりません。分かるように質問を書いてくれれば考えようもありますが・・・

【追記】

どうしても JavaScript で送信したいということなら、以下の記事の応用でできるかもしれません（まだ思い付きレベルです。Edit 機能を実装するのはかなりの茨の道になりそうな予感がしますが）。

以下の記事のアプリは ASP.NET Core 3.1 MVC ですが、.NET Framework 版の MVC5 でも同じことはできます。

jQuery ajax で部分ビューの呼出・表示
http://surferonwww.info/BlogEngine/post/2020/03/07/use-jquery-ajax-to-request-and-render-partial-view.aspx

jQuery ajax を使っている点、CSRF 防止用のトークンを含むフォームデータを jQuery の .serialize() メソッドを使って取得しそれを data パラメータに設定して送信している点、応答は部分ビューとして返している点に注目してください。

上の記事のサンプルではユーザー入力はないのでその検証関係のコードは実装してませんが、Model を定義して追加できると思います（要件次第ですが）。

ただ、やはり、クライアント側での検証は普通に submit した時のようにはいかないと思いますが。

Comments

[rastynail3366]

ありがとうございます。やっぱりJavaScriptでModelにないプロパティを追加するのは厳しいみたいですね。
ViewModelを生成して他のコントローラーを作成してみることにします。