MVC 4仅刷新局部视图
问题描述:
我目前正在开发一个具有CRUD功能的网站。在添加,编辑或删除成功完成后,我正在使用以下JavaScript代码来显示消息。MVC 4仅刷新局部视图
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();
}
}
但是,我渲染包含webGrid的部分视图的结果。在这种情况下,产品的表格列表位于此局部视图中。之后(假设)编辑过程已完成,我希望编辑的字段在编辑对话框关闭后反映出来。我的问题是,我不知道如何刷新partialview而不影响整个页面。
有人可以请我指出一个很好的方法来做到这一点?非常感谢你!
编辑:
下面是我如何将项目添加到我的网格。请注意,这整个代码都在我的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")
));
}
答
使用jQuery ajax
重新加载内容
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")")
}
假设yourContainerDiv
就是你有网格的标记和Items
控制器的你GetProducts
操作方法的DIV /表返回电网的标记。
,如果你正在做一个按钮单击事件保存/更新,确保使用peventDefault
方法
$("#someButtonId").click(function(e){
e.preventDefault();
//Save data or whatever ...
});
编辑停止默认表单提交行为:塞汀更新的问题后。
你为什么要混合你的UI(view
)和code
。保持它独立。
有一个action
来获取数据并传递到一个强类型的视图
public ActionResult GetProducts()
{
var repository = new MyStore.Business.Manager.ProductsManager();
var productList = repository.GetAllProducts(ViewData["StoreCode"].ToString());
return View(productList);
}
现在有哪些是强类型到产品迷失类视图(GetProducts.cshtml
)。
@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>
个人而言,我把我的实体/型号名称为奇状Customer
/Product
嗨!感谢您的回应!你能解释一下'GetProducts'和'Items'部分吗?我似乎没有得到它。谢谢!!! – Smiley 2012-07-16 02:33:59
这是否意味着'GetProducts'是来自'Items'控制器的方法的名称,它返回一个ListofProducts以绑定到webGrid?因为如果确实如此,那么我必须说我不是那样做的。请参阅我上面的编辑。谢谢! :) – Smiley 2012-07-16 02:39:18