在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="~/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的同步