MVC 4 刷新局部视图答案

【问题标题】：MVC 4 refreshing partial viewMVC 4 刷新局部视图
【发布时间】：2016-05-06 16:36:14
【问题描述】：

我的主父视图中有一个局部视图，其中包含我需要更新的表。它在部分视图中的原因是我可以在不重新加载主视图的情况下更新它。我不能在这里使用表单，因为我在我的父视图中。

局部视图：

@model IList<ItemViewModel>

@Html.ActionLink("Add Item", "AddItem", "Home", new { model = Model }, null)

<table>
    ...
    @{foreach (var item in Model)
        //add table row
    }
    ....
</table>

控制器：

public ActionResult AddItem(IList<ItemViewModel> model)
{
    model.Add(...);
    return View("_PartialView", model);
    //also tried return PartialView(...)
}

大部分情况下一切正常，但是当我的 ActionResult 返回时，我的父视图消失了，我看到的只是部分视图。我想当我返回部分视图时这是有道理的，但是我如何在父级内部刷新它？

【问题讨论】：

您将需要一些客户端代码。什么情况下需要刷新？
显示父视图的代码
仅使用来自服务器的数据刷新页面的一部分需要 javascript 来完成。您将需要使用 ajax 请求。
@Maess 添加项目时，我需要将其添加到模型并显示新行。
@Travis J 如何在 ajax 请求后将结果绑定回模型？

标签： asp.net-mvc asp.net-mvc-4

【解决方案1】：

在您的主视图中，这是您的部分视图。

<div id="partialSummaryDiv">@{Html.RenderAction("GetSummary", "Order");}</div>

在某些事件中，您将进行 ajax 调用。

$.ajax({
    url: "/Order/GetContractTotals",
    type: "POST",
    success: function (result) {
         // refreshes partial view
        $('#partialSummaryDiv').html(result);
    }
});

控制器

[HttpPost]
public ActionResult GetContractTotals()
    {
       // blah blah
        return PartialView("_OrderContractTotals", octvm);        
    }

【讨论】：

$('#partialContractTotalsDiv') -> $('#partialSummaryDiv') ?
这是您开始@aw04 的好地方。请注意，这将发生在某些客户端事件中（如$("#myElement").click(function(){/*call ajax in here*/});）

【解决方案2】：

试试这个：

   $.ajax({
            url: "/Admin/DeleteCustomerDetail",
            data: { "id": id },
            success: function (result) {
                $("#CustomerPartial").load("/Admin/_partialCustomers/", { id: DealerId });
            }
        });

在控制器中

public void DeleteCustomerDetail(int Id)
{
           //Your code here
}

【讨论】：

【解决方案3】：

在您的主视图中，将您的部分放入一个 div：

  <div id='additemDiv'>
        // partial goes here
    </div>

在你的部分给锚一个 id：

@model IList<ItemViewModel>

<a href='javascript:void(0)' id='addItemLink'>Add Item </a>

<table>
    ...
    @{foreach (var item in Model)
        //add table row
    }
    ....
</table>

你需要链接绑定的点击事件：

$(#'addItemLink').on('click', function(){
     $.get('your url', function(data){
        $('#additemDiv').html(data);
     })
});

你的行动：

public ActionResult AddItem(IList<ItemViewModel> model)
{
    model.Add(...);
    return PartialView(model);
}

【讨论】：