6

現在、ASP MVC3 ビューで Ajax 呼び出しを使用して、新しいリスト項目をページに追加しています。ViewResultビューは、部分ビューを返すコントローラー アクションを呼び出す Ajax 呼び出しを行います。次に、Ajax は、呼び出し元の要素で.append(html)メソッドを呼び出すように設定されます。<div>

問題は、新しい行を追加する代わりに、ビュー全体が消えて部分的なものだけが表示されることです。

これがビュー内のコードです。このビューは、別のモデルのリスト オブジェクトを持つビュー モデルを使用します。コードのこの部分は、部分ビューを呼び出して、リスト オブジェクトの各項目を表示します。

@model Monet.ViewModel.BankListViewModel
@using (Html.BeginForm())
{
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table>
        <th>State Code</th>
        <th>Agent ID</th>
        <th></th>
            <div class="fixedRows">
                @foreach(var item in Model.Fixed)
                {
                    if (!String.IsNullOrWhiteSpace(item.AgentId))
                    {

                            @Html.Partial("FixedPartialView", item) 

                    }      
                }
            </div>
        </table>
        <br />
        @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
    </fieldset>
}

これがaddFixedAjax呼び出しです

$("#addFixed").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#fixedRows").append(html); }
    });
    return false;
});

これはViewResult、Ajax が呼び出すコントローラー アクションです。

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

最後に、これは部分的なビューです。

@model Monet.Models.BankListAgentId


@using (Html.BeginCollectionItem("Fixed"))
{
    <tr id="item-@Model.AgentId">
        <td>
            @Html.DropDownListFor(model => model.StateCode,
                (SelectList)ViewBag.StateCodeList, Model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
            @Html.ValidationMessageFor(model => model.AgentId)
        </td>
        <td>
        <a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>
    </tr>
}

リンクを選択するAdd anotherと、ページは次のようになります

ここに画像の説明を入力

これに

ここに画像の説明を入力

以下のコメントごとに、ページの HTML を次に示します。

<input type="hidden" name="Fixed.index" autocomplete="off" value="6dd1b028-14f7-4400-95d1-a803c2521b68" />
        <tr id="item-">
            <td>
                <select id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__StateCode" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].StateCode"><option>AL</option>
<option>AK</option>
<option>AS</option>
<option>AZ</option>

.
.
. <-removed list of all 50 states for clarity
</select>
            </td>
            <td>
                <input class="text-box single-line" id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__AgentId" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].AgentId" type="text" value="" />

            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>

        </tr>
                    </section>

編集

以下のコメントを読んだ後、テーブルタグを に変更しました<table id="fixedRows">が、これは同じ結果を返しました。次に、Ajax呼び出しの属性を変更して、success次のような基本的なHTMLを含めました

success: function (html) { $("#fixedRows").append("<tr><td>New</td></tr>"); }

しかし、再び、同じ結果が得られました。Visual Studio と Chrome のデバッガーの両方でブレークポイントを設定したところ、Ajax が呼び出されていないことがわかりました。代わりに、コントローラー アクションへの呼び出しが行われ、部分ビューが に追加されるのではなく、単独で読み込まれ<table id="fixedRows">ます。

ただし、誰かにアイデアがあれば、これを回避するためにまだ取り組んでいます。どうも！

4

4 に答える 4

0

あなたが持っているコードでこれが発生する唯一の方法は、ページのコンテンツを単純な HTML で置き換えるのではなく、そのアクションをブラウザ タブに直接ロードする場合です。アクションリンクがデフォルトで行うこと。

  1. event.preventDefault()その「別の追加」リンクのクリック ハンドラーが false を使用するか、単に false を返すことを確認してください。リンクのデフォルトの動作を妨げない場合、AJAX コードがそれを行い、ブラウザは通常どおりリンクをロードし、機能していないように見せます。

  2. ページに JavaScript エラーがないことを確認します。JS が機能しなくなった場合は、デフォルトの動作が引き継がれ、表示される結果が得られます。

于 2013-04-03T18:44:34.833 に答える
0

部分ビューで AJAX 呼び出しを行わないようにしています。AJAX では、情報を再表示するために最後のページの状態を覚えておく必要があります。そうは言っても、コントローラーに戻って部分ビューを呼び出し、サーバー呼び出しでビューと連携して部分ビューを表示するだけです。

 @Html.Partial("FixedPartialView", new BankListAgentId(){/*Construct the View Model Here here. assign the properties to your view model */  AgentId = /*however your creating this*/})

AJAX がこの問題を解決する方法だとは思いません。

于 2013-04-04T12:33:52.377 に答える
0

<table>タグ内での div の使用法がわかりにくいと思いますjQuery.append。

代わりに次のことを試してください。

<fieldset>
    <legend>Stat(s) Fixed</legend>
    <table id="fixedRows">
        <tr>
            <th>State Code</th>
            <th>Agent ID</th>
        </tr>
        @foreach(var item in Model.Fixed)
        {
            if (!String.IsNullOrWhiteSpace(item.AgentId))
            {
                @Html.Partial("FixedPartialView", item) 
            }      
        }
    </table>
    <br />
    @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
</fieldset>

また、これはあなたがjQueryで指定しているものであるため、id="fixedRows"代わりに使用したことに注意してください。class="fixedRows"

比較：

于 2013-04-03T18:51:04.193 に答える