MVC 中使用unobtrusive ajax 局部更新

发布时间：2020-12-16 00:15:51 所属栏目：百科来源：网络整理

导读：我使用的是Linq to sql 对数据库进行通信的，使用表为product 首先我们要引用unobtrusive这个js文件 [html] view plain copy script src = "@Url.Content(" ~/Scripts/jquery.unobtrusive-ajax.min.js")" type = "text/javascript" / script 1.先创建Product

我使用的是Linq to sql 对数据库进行通信的，使用表为product

首先我们要引用unobtrusive这个js文件

[html] view plain copy

<scriptsrc="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>

1.先创建ProductControl

[csharp] view plain copy

publicclassProductController:Controller
{
TestDBDataContextcontext=newTestDBDataContext();
//
//GET:/Product/
publicActionResultIndex()
{
varproducts=(fromproductincontext.GetTable<Product>()
selectproduct).ToList();
ViewData["products"]=products;
returnView();
}
publicActionResultAddProduct(ProductproductModel)
{
productModel.CreateTime=DateTime.Now;
context.Products.InsertOnSubmit(productModel);
context.SubmitChanges();
returnPartialView("ProductControl1",context.Products.ToList());
}
}

2.创建View

一个partial视图（ProductControl1.cshtml）用于显示Product信息，一个是index 页面添加产品，并且Render partial view(ProductControl1.cshtml)

Index页面代码

[html] view plain copy

@modelMvcApp.Product
@{
View.Title="Index";
Layout="~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<fieldset>
<h1>Addproduct</h1>
@using(Ajax.BeginForm("AddProduct",newAjaxOptions{UpdateTargetId="productList"}))
{
<div>@Html.LabelFor(m=>m.Title)</div>
<div>@Html.EditorFor(m=>m.Title)</div>
<div>@Html.LabelFor(m=>m.Price)</div>
<div>@Html.EditorFor(m=>m.Price)</div>
<p>
<inputtype="submit"value="AddProduct"/>
</p>
}
</fieldset>
<divid="productList">
@{Html.RenderPartial("ProductControl1",ViewData["products"]);}
</div>

ProductControl1页面代码

[html] view plain copy

@modelIEnumerable<MvcApp.Product>
<table>
<tr>
<td>Title</td>
<td>Price</td>
<td>CreateTime</td>
</tr>
@foreach(varpinModel)
{
<tr>
<td>@p.Title</td>
<td>@p.Price</td>
<td>@p.CreateTime</td>
</tr>
}
</table>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MVC 中 使用unobtrusive ajax 局部更新

MVC 中使用unobtrusive ajax 局部更新