Question

我的表单上有一个网格，使用以下jquery进行颜色处理;

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

这很好用，除非我通过使用Ajax对服务器的Asyncronous调用进行搜索并刷新网格时，这种特殊的样式消失了。

使用以下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;
    };

一个尝试的解决方案是在上面的完成函数中复制并粘贴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>

Answer 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");
    });

MVC JQuery - 在异步加载后丢失样式

1 个答案: