MVC 中 使用unobtrusive ajax 局部更新

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

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

[html] view plain copy

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

1.先创建ProductControl

[csharp] view plain copy

1. public class ProductController : Controller  
2. {  
3.     TestDBDataContext context = new TestDBDataContext();  
4.     //  
5.     // GET: /Product/  
6.   
7.     public ActionResult Index()  
8.     {  
9.         var products = (from product in context.GetTable<Product>()  
10.                        select product).ToList();  
11.         ViewData["products"] = products;  
12.         return View();  
13.     }  
14.       
15.     public ActionResult AddProduct(Product productModel)  
16.     {  
17.         productModel.CreateTime = DateTime.Now;  
18.         context.Products.InsertOnSubmit(productModel);  
19.         context.SubmitChanges();  
20.   
21.         return PartialView("ProductControl1", context.Products.ToList());  
22.     }  
23.   
24. }  

2.创建View

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

Index页面代码

[html] view plain copy

1. @model MvcApp.Product  
2.   
3. @{  
4.     View.Title = "Index";  
5.     Layout = "~/Views/Shared/_Layout.cshtml";  
6. }  
7.   
8. <h2>Index</h2>  
9. <fieldset>  
10. <h1>Add product</h1>  
11. @using(Ajax.BeginForm("AddProduct",new AjaxOptions{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.    <input type="submit" value="Add Product" />  
19.    </p>  
20. }  
21. </fieldset>  
22.   
23.   
24.   
25. <div id="productList">  
26. @{Html.RenderPartial("ProductControl1",ViewData["products"]);}  
27. </div>  

ProductControl1页面代码

[html] view plain copy

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