在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的同步