Javascript MVC 4 仅刷新 PartialView
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11497411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC 4 Refresh a PartialView Only
提问by Smiley
I am currently developing a website with CRUD functionality. I am using the below javascript code to display a message after the Add, Edit, or Delete has been completed successfully.
我目前正在开发一个具有 CRUD 功能的网站。我使用下面的 javascript 代码在添加、编辑或删除成功完成后显示一条消息。
function addSuccess(data) {
if (data.Success == true) {
$('#addDialog').dialog('close');
$('#commonMessage').html("Process Complete");
$('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#add-message").html(data.ErrorMessage);
$("#add-message").show();
}
}
However, I am rendering results on a partial view containing a webGrid. In this case, a tabular list of products are in this Partial View. After (let's say) an Edit Process has been completed, I want the edited field to reflect after the Edit Dialog has been closed. My problem is, I don't know how to refresh a partialview without affecting the whole page.
但是，我在包含 webGrid 的部分视图上呈现结果。在这种情况下，产品的表格列表位于此部分视图中。在（假设）编辑过程完成后，我希望编辑的字段在编辑对话框关闭后反映出来。我的问题是，我不知道如何在不影响整个页面的情况下刷新局部视图。
Can someone please point me to a good way to do this? Thank you very much!
有人可以指出我这样做的好方法吗？非常感谢！
EDIT:
编辑：
Below is how I add items to my grid. Please note that this entire code is inside my PartialView. Thank you!
下面是我如何将项目添加到我的网格。请注意，整个代码都在我的 PartialView 中。谢谢！
@{
MyStore.Business.Manager.ProductsManager repository = new MyStore.Business.Manager.ProductsManager ();
List<MyStore.Data.Products> ProductsList = repository.GetAllProducts(ViewData["StoreCode"].ToString());
var grid = new WebGrid(ProductsList );
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(tableStyle: "webGrid",
htmlAttributes: new { id = "DataTable" },
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("ProductCode", style: "width: 400px;"),
grid.Column("Name", style: "width: 400px"),
grid.Column("Price", style: "width: 100px;"),
grid.Column("", format: @<text>@Html.ActionLink("Edit", "_Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px"),
grid.Column("", format: @<text>@Html.ActionLink("Delete", "_Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px")
));
}
采纳答案by Shyju
Use jquery ajaxto reload the content
使用jqueryajax重新加载内容
if (data.Success == true) {
$('#addDialog').dialog('close');
$('#commonMessage').html("Process Complete")
.delay(400).slideDown(400).delay(3000).slideUp(400);
$("#yourContainerDiv").load("Url.Action("GetProducts ","Items")")
}
Assuming yourContainerDivis the Div /table where you have the markup of the Grid and Your GetProductsaction method of Itemscontroller returns the markup of the grid.
假设yourContainerDiv是 Div /table，您在其中拥有网格的标记，并且控制器的GetProducts操作方法Items返回网格的标记。
and if you are doing the Save/Update in a button click event, Make sure to stop the default form submit behaviour by using peventDefaultmethod
如果您在按钮单击事件中执行保存/更新，请确保使用peventDefault方法停止默认表单提交行为
$("#someButtonId").click(function(e){
e.preventDefault();
//Save data or whatever ...
});
EDIT:After seting the updated question.
编辑：设置更新的问题后。
Why are you mixing your UI (view) with the code. Keep it seperate.
为什么将 UI ( view) 与code. 把它分开。
Have an actionto get the data and pass that to a strongly typed view
有一个action获取数据并将其传递给强类型视图
public ActionResult GetProducts()
{
var repository = new MyStore.Business.Manager.ProductsManager ();
var productList = repository.GetAllProducts(ViewData["StoreCode"].ToString());
return View(productList);
}
Now have a view(GetProducts.cshtml) which is strongly typed to Lost of Products class.
现在有一个 view( GetProducts.cshtml) ，它被强类型化为 Lost of Products 类。
@model MyStore.Data.Products
@{
Layout=null;
}
<table>
@foreach(var item in Model)
{
<tr>
<td>@item.ProductCode</td>
<td>@item.Name</td>
<td>@item.Price</td>
</tr>
}
</table>
Personally I keep my Entity/Model name as Singular like Customer/Product
就我个人而言，我将我的实体/模型名称保留为 Singular 之类的Customer/Product
