使用 JSON 进行客户 KnockoutJS 和 MVC 演示

Rui Inacio

4.00/5 (5投票s)

2012年7月19日

CPOL

1分钟阅读

49507

使用 JSON 进行客户 KnockoutJS 和 MVC 演示。

在阅读了关于 KnockoutJS 的资料后，我决定创建一个简单的演示，使用 JSON 与 Web 服务器进行通信。该应用程序从 ASP.NET MVC Action 获取一个 Customer 并将其发送以保存。

KnockoutJS 是一个 JavaScript 模型-视图-视图模型 (MVVM) 框架。视图模型对象包含属性，其值指定为 ko.observable()。当视图模型发生更改时，Knockout 会自动更新 UI。KnockoutJS 具有声明式绑定语法，其中 HTML 视图元素与我们的视图模型对象绑定。Knockout 在 HTML 元素中使用 "data-bind" 属性进行数据绑定。

要学习基础知识，请点击此处访问 KnockoutJS 网站。

先决条件

ASP.NET MVC 控制器具有获取和添加客户的操作。

namespace KnockoutDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "";
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Get(int customerID)
        {
            // Get the customer ...
            Customer customer = new Customer {CustomerID = customerID, 
              FirstName = "John", LastName = "Doe", IsMale = true };

            return Json(customer);
        }

        [HttpPost]
        public JsonResult Add(Customer customer)
        {
            // Save the customer ...

            // return status message 
            var message = "Customer: " + 
            customer.FirstName + " " + customer.LastName + " Added.";
            message += " IsMale: " + customer.IsMale.ToString();
            return Json(message);
        }
    }
}

ASP.NET MVC 模型是 customer

public class Customer
{
    public int CustomerID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public bool IsMale { get; set; }
}

ASP.NET MVC 布局如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.validation.js")" 
        type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Knockout Demo</h1>
            </div>
            <div>&nbsp;</div>
        </header>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

最后，ASP.NET MVC 视图具有 KnockoutJS 的特定内容

@{
    ViewBag.Title = "Add Customer";
}

<h2>
@ViewBag.Message</h2>
<form action="" method="post">
  Customer Number:  <span data-bind="text: CustomerID"></span>
  First Name: <input data-bind="value: 
FirstName" style="width: 200px;" type="text" /> 
  Last Name: <input data-bind="value: 
LastName" style="width: 200px;" type="text" /> 
  <input data-bind="checked: IsMale" 
  type="checkbox" />Male
  <input data-bind="click: KnockoutDemoNamespace.addCustomer" 
  type="button" value="Add Customer" />
</form>

<script type="text/javascript">
// Initialized the namespace
var KnockoutDemoNamespace = {};

// View model declaration
KnockoutDemoNamespace.initViewModel= function(customer) {
    var customerViewModel = {
        CustomerID: ko.observable(customer.CustomerID),
        FirstName: ko.observable(customer.FirstName),
        LastName: ko.observable(customer.LastName),
        IsMale: ko.observable(customer.IsMale)
    };
    return customerViewModel;
}

// Bind the customer
KnockoutDemoNamespace.bindData = function(customer)
{
    // Create the view model
    var viewModel = KnockoutDemoNamespace.initViewModel(customer);

    ko.applyBindings(viewModel);
}

KnockoutDemoNamespace.getCustomer = function (customerID) {

    $.ajax({
        url: "/Home/Get/",
        type: 'post',
        data: "{'customerID':'1' }",
        contentType: 'application/json',
        success: function (result) {
            KnockoutDemoNamespace.bindData(result);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            var errorMessage = '';
            $('#message').html(jqXHR.responseText);
        }
    });
}

KnockoutDemoNamespace.addCustomer = function () {
        $.ajax({
            url: "/Home/Add/",
            type: 'post',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function (result) {

                $('#message').html(result);
            }
        });
    }

    $(document).ready(function () {
        KnockoutDemoNamespace.getCustomer(1);

    });
</script>

KnockoutJS 具有以下特定内容

该演示对 span 以及 text、checkbox 和 button 类型的输入执行数据绑定。请注意，"data-bind" 具有要影响的 html 元素属性以及关联的视图模型属性。

视图模型对象：customerViewModel
HTML 视图：包含 KnockoutJS 特定属性以进行数据绑定的页面 HTML
视图模型激活：ko.applyBindings(viewModel);