如何从javascript刷新视图中的表

时间:2016-03-04 16:41:07

标签: jquery ajax asp.net-mvc

我有一个非局部视图,它是从包含数据库结果的模型构建的。现在,当用户单击页面上的按钮时,它会运行ajax调用并对基础数据进行更改。现在我想刷新该数据表并在屏幕上显示一条消息。起初我刷新整个页面,但后来我无法弄清楚如何显示消息。所以我想知道我是否可以通过ajax从表中重新加载内容? 我相信我所描述的是足够的信息,但如果需要任何代码,请告诉我。

控制器代码:

public ActionResult ViewShipments()
    {
        FedExIntegration.FedExIntegration myProxy = new FedExIntegration.FedExIntegration();
        FedExIntegration.cWUPS[] shipments = myProxy.getShipmentsByRep(User.Identity.Name, "xxxxx");

        return View(shipments);
    }

表:

<table id="shipments" class="table table-bordered table-striped table-responsive table-hover">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.wups)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.woeOsiRef)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.trackId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.USD)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.shipWgt)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.shipDT)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.voided)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.osiDisp)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.companyName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.negRate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.shipTo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.address1)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.city)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.state)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.zip)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipVia)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.wups)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.woeOsiRef)
                </td>
                <td class="trackID">
                    @Html.DisplayFor(modelItem => item.trackId)
                </td>
                <td>
                    $@Html.DisplayFor(modelItem => item.USD)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.shipWgt)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.shipDT)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.voided)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.osiDisp)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.companyName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.negRate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.shipTo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.address1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.city)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.state)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.zip)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ShipVia)
                </td>
            </tr>
        }
    </tbody>
</table>

2 个答案:

答案 0 :(得分:0)

如果将表放在局部视图中,则可以将部分视图作为字符串从控制器返回。然后,所有javascript必须做的是从页面中删除旧表,并在其中插入新表。要将局部视图渲染为字符串,我会使用以下内容:

public string RenderPartialViewResultToString(PartialViewResult partialViewResult)
{
    // precondition: partialViewResult MUST either have View or ViewName specified.
    // easiest way to do this is EXPLICITLY enter the path to the view when generating the partial view
    // MVC's default mapping by method-name is NOT sufficient
    if (partialViewResult.View == null)
        partialViewResult.View = ViewEngines.Engines.FindPartialView(ControllerContext, partialViewResult.ViewName).View;
    var stringWriter = new StringWriter();
    var viewContext = new ViewContext(ControllerContext, partialViewResult.View, partialViewResult.ViewData, partialViewResult.TempData, stringWriter);
    partialViewResult.View.Render(viewContext, stringWriter);
    return stringWriter.GetStringBuilder().ToString();
}

答案 1 :(得分:0)

您正在使用ajax调用来应用基础更改,您可以使用该ajax的成功方法并更改您希望在页面上更新的内容而无需刷新页面

并代替撤消视图,您必须将Content("Your html code")作为字符串

返回
$("button").click(function(){
    $.ajax({
url: "/route/action", 
success: function(result){
//remove olde
 $("#table").html(result);
    }});
});