MVC 中 使用unobtrusive ajax 局部更新

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

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

[html] view plain copy

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

1.先创建ProductControl

[csharp] view plain copy

1. publicclassProductController:Controller
2. {
3. TestDBDataContextcontext=newTestDBDataContext();
4. //
5. //GET:/Product/
7. publicActionResultIndex()
8. {
9. varproducts=(fromproductincontext.GetTable<Product>()
10. selectproduct).ToList();
11. ViewData["products"]=products;
12. returnView();
13. }
15. publicActionResultAddProduct(ProductproductModel)
16. {
17. productModel.CreateTime=DateTime.Now;
18. context.Products.InsertOnSubmit(productModel);
19. context.SubmitChanges();
21. returnPartialView("ProductControl1",context.Products.ToList());
22. }
24. }

2.创建View

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

Index页面代码

[html] view plain copy

1. @modelMvcApp.Product
3. @{
4. View.Title="Index";
5. Layout="~/Views/Shared/_Layout.cshtml";
6. }
8. <h2>Index</h2>
9. <fieldset>
10. <h1>Addproduct</h1>
11. @using(Ajax.BeginForm("AddProduct",newAjaxOptions{UpdateTargetId="productList"}))
12. {
13. <div>@Html.LabelFor(m=>m.Title)</div>
14. <div>@Html.EditorFor(m=>m.Title)</div>
15. <div>@Html.LabelFor(m=>m.Price)</div>
16. <div>@Html.EditorFor(m=>m.Price)</div>
17. <p>
18. <inputtype="submit"value="AddProduct"/>
19. </p>
20. }
21. </fieldset>
25. <divid="productList">
26. @{Html.RenderPartial("ProductControl1",ViewData["products"]);}
27. </div>

ProductControl1页面代码

[html] view plain copy

1. @modelIEnumerable<MvcApp.Product>
2. <table>
3. <tr>
4. <td>Title</td>
5. <td>Price</td>
6. <td>CreateTime</td>
7. </tr>
8. @foreach(varpinModel)
9. {
10. <tr>
11. <td>@p.Title</td>
12. <td>@p.Price</td>
13. <td>@p.CreateTime</td>
14. </tr>
15. }
16. </table>

原文地址：https://www.jb51.cc/ajax/164136.html