0

フォームに次のjqueryでカラーバンドされたグリッドがあります。

$("#tblePagedList tr:even").addClass("row1");
$("#tblePagedList tr:odd").addClass("row2");

これは、検索を実行し、Ajaxを使用してサーバーへの非同期呼び出しを介してグリッドを更新する場合を除いて、正常に機能します。この特定のスタイルは表示されなくなります。

フォームは次のjqueryで再ロードされます。

   var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-scd-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });

        return false;
    };

試みられた解決策の1つは、上記のdone関数の2つのスタイリング行をコピーして貼り付けることでしたが、これによる違いはありませんでした。

私のフォームは次のようになります。

@using SCD.Helpers
@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>

@{
    ViewBag.Title = "List Subcontractors";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<fieldset>
<legend>Subcontractors</legend>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

    <form method="get" action="@Url.Action("ListSubcontractors")" 
          data-scd-ajax="true" data-scd-target="#subcontractorList">
        <table class="searchTable">
            <tr>
                <td>Company: <input type="text" name="searchCompany" /></td>
                <td>Address: <input type="text" name="searchAddress" /></td>
                <td>Town/City: <input type="text" name="searchCity" /></td>
            </tr>
            <tr>
                <td>County: <input type="text" name="searchCounty" /></td>
                <td>Trade: <input type="text" name="searchTrade" /></td>
                <td>Other Trade: <input type="text" name="searchOtherTrade" /></td>
            </tr>
            <tr>
                <td colspan="2">@this.TempData["SearchMessage"].ToSafeString()</td>
                <td><input type="submit" value="Search" /> </td>
            </tr>
        </table>
    </form>
@Html.Partial("_Subcontractors")

</fieldset>

私のPartialViewは次のようになります

@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>
<div id="subcontractorList">
    <div class="pagedList" data-scd-target="#subcontractorList">
        @Html.PagedListPager(Model, page => Url.Action("ListSubcontractors", new { page }),
        PagedListRenderOptions.DefaultPlusFirstAndLast)
    </div>
    <table id="tblePagedList">
        <thead>
            <tr>
                <th>
                    Company
                </th>
                <th>
                    Address
                </th>
                <th style="width:100px;">
                    Telephone
                </th>
                <th style="width:100px;">
                    Contact
                </th>
                <th style="width:100px;">
                    Trade
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tblePagedListBody"></tbody>
        @foreach (var item in Model) {
            <tr>
                <td>
                    @item.Company
                </td>
                <td>
                    @item.AddressLine
                </td>
                <td>
                    @item.Telephone
                </td>
                <td>
                    @item.Contact
                </td>
                <td>
                    @item.TradeName
                </td>
                <td>
                    @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId })
                </td>
            </tr>
        }

    </table>
</div>
4

1 に答える 1

1

問題は、AJAX呼び出しから返されたHTMLがスタイル設定されていないことです。解決策は、グリッドを返されたhtmlに置き換えた後、グリッドのスタイルを変更するだけです。

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-scd-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");

        $("#tblePagedList tr:even").addClass("row1");
        $("#tblePagedList tr:odd").addClass("row2");
    });
于 2012-12-13T17:06:55.983 に答える