首页 > 代码库 > 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库。最后让Knockout绑定一个Json对象。
创建一个领域模型。
namespace MvcApplication3.Models
{public class Product{public int Id { get; set; }public string Name { get; set; }public string Category { get; set; }public decimal Price { get; set; }}}
派生于DbContext的上下文。
using System.Data.Entity;
namespace MvcApplication3.Models
{public class ProductContext : DbContext{public ProductContext() : base("conn"){Database.SetInitializer(new ProductInitializer());
}public DbSet<Product> Products { get; set; }}}
设置一些种子数据。
using System.Data.Entity;
namespace MvcApplication3.Models
{public class ProductInitializer : DropCreateDatabaseIfModelChanges<ProductContext>{protected override void Seed(ProductContext context){context.Products.Add(new Product() {Name = "秋意真浓", Price = 85M, Category = "散文"});context.Products.Add(new Product() {Name = "冬日恋歌", Price = 95M, Category = "小说" });context.Products.Add(new Product() { Name = "春暖花开", Price = 105M, Category = "散文" });}}}
Web.config中connectionStrings节点配置。
<connectionStrings>...<add name="conn" connectionString="Data Source=.;User=用户名;Password=密码;Initial Catalog=ProductStore;Integrated Security=True" providerName="System.Data.SqlClient" /></connectionStrings>
创建一个针对Product领域模型的接口。
using System.Collections.Generic;
namespace MvcApplication3.Models
{public interface IProductRepository{IEnumerable<Product> GetAll();Product GetById(int id);
Product Add(Product item);bool Update(Product item);
bool Delete(int id);}}
对IProductRepository接口的实现。
using System.Data;
namespace MvcApplication3.Models
{public class ProductRepository : IProductRepository{private ProductContext db = new ProductContext();public System.Collections.Generic.IEnumerable<Product> GetAll()
{return db.Products;
}public Product GetById(int id){return db.Products.Find(id);
}public Product Add(Product item)
{db.Products.Add(item);db.SaveChanges();return item;
}public bool Update(Product item){db.Entry(item).State = EntityState.Modified;db.SaveChanges();return true;}public bool Delete(int id){Product product = db.Products.Find(id);db.Products.Remove(product);if (db.SaveChanges() > 0)
{return true;}else
{return false;}}}}
在HomeController中提供一个Action,用来获取数据库中第一条Product记录,并以json格式返回。
using System;
using System.Web.Mvc;
using MvcApplication3.Models;
namespace MvcApplication3.Controllers
{public class HomeController : Controller{static readonly IProductRepository repository = new ProductRepository();public ActionResult Index()
{return View();
}public JsonResult GetFirstProduct()
{var product = repository.GetById(1);return Json(product, JsonRequestBehavior.AllowGet);
}}}
在Home/Index.cshtml中,让Knockout绑定一个json类型的View Model,然后向控制器发出一个异步请求,返回的数据更新json对象的name属性。
@{ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}<div data-bind="text:name"></div> <hr/>
<input type="text" data-bind="value:name"/>@section scripts{<script src="http://www.mamicode.com/~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript">
$(function() {ko.applyBindings(productViewModel);$.getJSON(‘@Url.Action("GetFirstProduct","Home")‘, function (data) {productViewModel.name(data.Name);});});var productViewModel = {id: ko.observable(""),name: ko.observable("初始值"),
price: ko.observable(""),category: ko.observable("")};</script>}
以上,
○ View Model的类型是一个json对象
○ 使用ko.observable(""),让View Model的成员与界面保持同步
○ 界面视图使用data-bind属性实现与View Model的同步
在ASP.NET MVC中使用Knockout实践01,绑定Json对象
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。