7

MVC4 インターネット プロジェクト

私は Ajax.BeginForm を使用して検証付きのポストバックを実行しており、UpdateTargetID だけでなくページ全体をポストバックしています。SOに関する他の投稿を見てきましたが、答えが見つかりませんでした。テスト用に新しい MVC4 インターネット プロジェクトを作成しました (VS 2012 は「ASP.NET and Web Tools 2012.2」で更新されました)。

これが私のコードです

コントローラ

public ActionResult Index() 
{
  var vM = _db.Students.FirstOrDefault(); return View(vM);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(Student vM)
{
  if (ModelState.IsValid)
  { //code if Model valid
    return Json(new { url = Url.Action("About", "Controller") });
  }
  ModelState.AddModelError(string.Empty, "AJAX Post");
  return PartialView("Index", vM);
}

意見

@model AJAX_Test.Models.Student
@{ ViewBag.Title = "Student"; }
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">  var onSuccess = function (result)
{
  if (result.url) { window.location.href = result.url; } 
}
  // when server returns JSON object containing an url property redirect the browser    </script>
<h1>@ViewBag.Title</h1>
<div id="IDXForm">
@using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" }))
{   
  @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
  <span>@Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString()</span> <input type="submit" value="Submit" />                   
}
</div>

初期ビューは次のとおりです。 ここに画像の説明を入力

提出後: ここに画像の説明を入力

提出後の本文のソースコード:

        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">  var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } }
  // when server returns JSON object containing an url property redirect the browser </script>
<h1>Student</h1>
<div id="IDXForm">
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#IDXForm" id="form0" method="post"><input name="__RequestVerificationToken" type="hidden" value="vkCszJu-fKT6zUr5ys2StOTPF6a9pZdj5k1MyaAZKo8MPweS53dUuni0C9B17NjL_GVydHa7-jI1H0F9HrYEdKxeCWq9mCeER3ebaZYLxIs1" /><span><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Carson" /> 9/1/2005</span> <input type="submit" value="Submit" />                                                                                                     
</form></div>

私のコードの何が問題なのか誰にもわかりますか?

ありがとうございました。

4

6 に答える 6

11

この動作を引き起こしている可能性があるいくつかのことが考えられます。

  1. あなたの質問では、バンドル登録を表示しましたが、実際にそれらをビューまたはレイアウトに含めましたか? jquery.jsビューまたはレイアウトに最初に含め、次にjquery.unobtrusive-ajax.js(その順序で) 以下を含めていることを確認してください。

    @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

  2. このスクリプトは、これjquery.unobtrusive-ajax.jsまでの に依存しているため、jquery 1.9 以降とは互換性がありません。そのため、何らかの理由で jQuery のバージョンを 1.9 以降にアップグレードした場合、それは機能しません。ダウングレードする必要があります。.live()removed in jQuery 1.9

  3. onSuccess コールバックでは、コントローラー アクションが JSON を返す場合、URL にリダイレクトしています。そうではないことを確認しましたか？を使用してリダイレクトが発生した場合window.location.href、部分的な更新ではなくページ全体のリロードが行われるのはごく普通のことです。

どのような場合でも、JavaScript デバッグ ツールを使用して、正確に何が起こっているかを確認してください。Firefox を使用している場合は、FireBug を使用できます。Google Chrome を使用している場合は、Chrome 開発者ツールバーを使用できます。潜在的な JavaScript エラーがないかコンソールを確認してください。ネットワーク タブを見て、すべての JavaScript が正常に読み込まれているかどうか、404 エラーがないかどうかを確認します。ツールを使用して JavaScript コードをデバッグする方法を学びます。これらのツールが提供するコードの潜在的な問題について、驚くほど多くの情報が得られます。

于 2013-03-07T21:54:12.190 に答える
9

UpdateTargetID のコンテンツは部分ビューにある必要があり、その部分ビューはコントローラー ポスト アクションから呼び出す必要があります。Darin は電子メールで返信してくれました (Darin に感謝します)。部分ビューを使用する必要があります。私は彼の回答を2回更新しようとしましたが、モデレーターはそれを行っていないか、理由を説明していないため、他の人の利益のために私自身の回答を投稿しています.

_MyForm ビュー:

@model AJAX_Test.Models.Student

@using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess" }))
{   
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <span>
        @Html.EditorFor(m => m.FirstName)              @Model.EnrollmentDate.ToShortDateString()
    </span> 
    <input type="submit" value="Submit" />                                                                                                     
}

メイン ビュー:

<div id="IDXForm">
    @Html.Partial("_MyForm")
</div>

コントローラ ポスト アクション:

  ModelState.AddModelError(string.Empty, "AJAX Post");
  return PartialView("_MyForm", vM);
于 2013-03-19T00:47:23.110 に答える
1

他にも注意すべき点がいくつかあります。

  1. jquery.unobtrusive-ajax.js が JQuery 1.9 をサポートするようになりました。jquery.unobtrusive-ajax.js バージョン 3.0.0 をインストールしましたが、JQuery 1.9 で動作しています

2. Ajax.BeginForm を含むビューとメイン ビューを含め、すべての div タグが適切に閉じられていることを確認します。また、メイン ビューまたは Ajax.BeginForm を含むビュー内に @Html.Raw() がある場合は、それにも注意してください。

ここに投稿して、頭を悩ませる 1 日を節約しましょう。

于 2014-03-31T23:12:12.303 に答える
1

使用する：<script src="../Scripts/jquery.unobtrusive-ajax.js"></script>

この JS は、Ajax を機能させるものです。

于 2013-12-20T07:43:46.380 に答える
0

少なくとも、次の 2 つのインクルードが必要です。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

それでも問題が解決しない場合は、web.config をチェックして unobtrusive が有効になっていることを確認します。

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

それでも効果がない場合は、目立たない js ファイルが現在の jQuery バージョンと互換性があることを確認してください。使用している jQuery のバージョンは、以下の URL にあります。

http://www.nuget.org/packages?q=目立たない

于 2013-12-31T17:31:06.080 に答える