3

私はMVC4を使用しています。プロジェクトで控えめなJavaScriptが有効になり、参照されています。Ajaxスクリプトが共有マスターページに読み込まれています。FireBugはエラーまたは404を報告しません。

フォーム内のフィールドTextの内容を更新するボックスをページに追加しました。ユーザーがキーを押してイベントが発生すると、次のように呼び出してフォームを強制的に送信します。HiddenAjaxKeyUpAjax

$("form#ajaxForm").trigger("submit");

ここで、 ajaxFormはAjaxフォームの名前です。これは正常に機能します。フォームがバックグラウンドで送信され、コントローラーイベントが発生します。モデルは、ユーザーからの入力に基づいて、新しいデータで更新されます。

しかし、それが奇妙になるのは、結果が私のフォームに戻るときです。フォームタグのコンテンツ全体divが、ページ全体である結果に置き換えられます。

<div id="basic-modal-content"">
   <input id="breed" type="text"/>
<div>
<form id="ajaxForm" method="post" data-ajax-update="#results" data-ajax-mode="replace" data-ajax="true" action="/Poultry/ListBreeds?Length=7">
   <div id="results">
    ->THIS AREA IS GETTING REPLACED WITH THE ENTIRE FORM <-
      <div id="basic-modal-content">
      </div>
   </div>
</form>
  • basic-modal-contentに、別のbasic-modal-contentが含まれていることに注目してください。結果divには、ビュー全体ではなく、更新結果のみを含める必要があります。明らかに。

私のコードは次のとおりです。

ビュー（BreedSelectorPartial.cshtml）

@model IQueryable<Inert.BreedViewModel>

<script type="text/javascript">
    $(document).ready(function () {
        $("#breed").keyup(function (e) {
            $("input[name=breedSearch]").val($("#breed").val());
            $("form#ajaxForm").trigger("submit");
        });
    });
</script>

<div id="basic-modal-content">
<input id="breed" type="text" style="width:100%; height:22px;" />
    <div>
        <div style="margin-top: 4px;">
            <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
        </div>
    </div>
    @using (Ajax.BeginForm("ListBreeds", "Poultry", new AjaxOptions {UpdateTargetId = "results" }, new { id = "ajaxForm" }))
    {
        <input id="breedSearch" name="breedSearch" type="hidden" />
    }
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
        @{
            var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
            int c = Model.Count();
         }
        @grid.GetHtml(tableStyle: "webgrid",
            alternatingRowStyle: "webgrid-alternating-row",
            rowStyle: "webgrid-row-style",
            displayHeader: true)
    </div>
</div>
<script type="text/javascript" src="/scripts/jquery.simplemodal.js"></script>
<script type="text/javascript" src="/scripts/basic.js"></script>

コントローラー（PoultryController.cs）

[HttpPost]
public ActionResult ListBreeds(string breedSearch)
{
    InertDatabaseEntitiesConnection db = new InertDatabaseEntitiesConnection();
    var breeds = db.Breeds.Where(q => q.Name.Contains(breedSearch));
    var names = breeds.Select(q => new BreedViewModel { Name = q.Name });
    return PartialView("BreedSelectorPartial", names);
}

これでどこが間違っているのかわかりません。私はこれを理解しようと何時間も費やしました。解決策はありますか？

4

3 に答える 3

11

最初の問題は、ヘルパーの誤ったオーバーロードを使用していることですAjax.BeginForm（ただし、これは望ましくない動作を引き起こしているわけではなく、単なる補足です）。

@using (Ajax.BeginForm(
    "ListBreeds",                                      // actionName
    "Poultry",                                         // routeValues
    new AjaxOptions { UpdateTargetId = "results" },    // ajaxOptions
    new { id = "ajaxForm" })                           // htmlAttributes
)

あなたが必要とするのに対して：

@using (Ajax.BeginForm(
    "ListBreeds",                                      // actionName
    "Poultry",                                         // controllerName
    null,                                              // routeValues
    new AjaxOptions { UpdateTargetId = "results" },    // ajaxOptions
    new { id = "ajaxForm" })                           // htmlAttributes
)

#resultsさて、本当の問題は、 divをパーシャルの外側とメインビューの内側に配置する必要があるということです。

<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
    @Html.Partial("BreedSelectorPartial")
</div>

もちろん、WebGrid部分を更新するだけでよい場合は、グリッドのみを部分の内側に残し、フォームをメインビューの外側に移動する方が理にかなっています。

したがって、メインビューは次のようになります。

@model IQueryable<BreedViewModel>
<script type="text/javascript">
    $(document).ready(function () {
        $("#breed").keyup(function (e) {
            $("input[name=breedSearch]").val($("#breed").val());
            $("form#ajaxForm").trigger("submit");
        });
    });
</script>

<div id="basic-modal-content">
    <input id="breed" type="text" style="width:100%; height:22px;" />
    <div>
        <div style="margin-top: 4px;">
            <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
        </div>
    </div>
    @using (Ajax.BeginForm("ListBreeds", "Poultry", null, new AjaxOptions { UpdateTargetId = "results" }, new { id = "ajaxForm" }))
    {
        <input id="breedSearch" name="breedSearch" type="hidden" />
    }
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
        @Html.Partial("BreedSelectorPartial")
    </div>
</div>

更新する必要があるのBreedSelectorPartial.cshtmlは、グリッドを含むパーシャルだけです。

@model IQueryable<BreedViewModel>
@{
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
}
@grid.GetHtml(
    tableStyle: "webgrid",
    alternatingRowStyle: "webgrid-alternating-row",
    rowStyle: "webgrid-row-style",
    displayHeader: true
)
于 2012-05-25T12:34:44.337 に答える
0

通常のフォーム送信を行っていませんか？$("form#ajaxForm").trigger("submit"); この行は通常のフォーム送信を行っていると思います 。通常のフォーム送信を呼び出す代わりに、ここでajaxフォーム投稿を行う必要があります。そのため、ページ全体がリロードされています。

于 2012-05-25T12:15:36.370 に答える
0

先日、これに似たものがありました。

正確な問題が何であったかは思い出せませんが、それはオブジェクトのHTML要素だけでなく、オブジェクト全体を返すことと関係がありました。

現時点ではコードが見つかりませんが、Firebugなどを使用している場合は、返されるデータを監視できるかどうかを確認してください。正しく覚えている場合は、最後に.htmlを追加するだけです。ライン。

少しあいまいですが、少しお役に立てば幸いです。

于 2012-05-25T12:10:43.927 に答える