MVC 中 使用unobtrusive ajax 局部更新

前端之家收集整理的这篇文章主要介绍了MVC 中 使用unobtrusive ajax 局部更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

1.先创建ProductControl

[csharp] view plain copy
@H_502_57@
  • 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页面代码

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

    猜你在找的Ajax相关文章