MVC 中 使用unobtrusive ajax 局部更新

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

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

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

1.先创建ProductControl

public class ProductController : Controller { TestDBDataContext context = new TestDBDataContext(); // // GET: /Product/ public ActionResult Index() { var products = (from product in context.GetTable<Product>() select product).ToList(); ViewData["products"] = products; return View(); } public ActionResult AddProduct(Product productModel) { productModel.CreateTime = DateTime.Now; context.Products.InsertOnSubmit(productModel); context.SubmitChanges(); return PartialView("ProductControl1", context.Products.ToList()); } }2.创建View

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

Index页面代码

@model MvcApp.Product @{ View.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <fieldset> <h1>Add product</h1> @using(Ajax.BeginForm("AddProduct",new AjaxOptions{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> <input type="submit" value="Add Product" /> </p> } </fieldset> <div id="productList"> @{Html.RenderPartial("ProductControl1",ViewData["products"]);} </div>ProductControl1页面代码

@model IEnumerable<MvcApp.Product> <table> <tr> <td>Title</td> <td>Price</td> <td>CreateTime</td> </tr> @foreach(var p in Model) { <tr> <td>@p.Title</td> <td>@p.Price</td> <td>@p.CreateTime</td> </tr> } </table>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值