Knockout官网实例在MVC下的实现-02,实现计次

本篇使用Knockout在MVC下实现"Hello World"，对应的官网实例在这里。

当次数达到3：

  View视图

页面包含三个部分：
1、显示点击按钮的次数
2、button按钮，每点击一次，显示的次数加1，并且，当次数达到3次，button禁用
3、最下面的div只有在次数达到3的时候才显示，并提供"重置"按钮

<div>You've clicked <span data-bind='text: numberOfClicks()'>&nbsp;</span> times</div>
 
<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>
 
<div data-bind='visible: hasClickedTooManyTimes'>
    That's too many clicks! Please stop before you wear out your fingers.
    <button data-bind='click: resetClicks'>Reset clicks</button>
</div>

  Model领域模型

namespace MyMVCKnockout.Models
{
    public class ClickCounterModel
    {
        public int NumberOfClicks { get; set; }

        public void RegisterClick()
        {
            NumberOfClicks++;
        }
    }
}

以上，NumberOfClicks属性用来记录当前的次数，当点击视图的button，就执行这里的RegisterClick()方法，使当前次数加一。

创建ClickCounterController：

using System.Web.Mvc;
using MyMVCKnockout.Models;

namespace MyMVCKnockout.Controllers
{
    public class ClickCounterController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetIntitial()
        {
            var model = new ClickCounterModel() {NumberOfClicks = 0};
            Session["c"] = model;
            return Json(model, JsonRequestBehavior.AllowGet);
        }

        //每点击一次
        public JsonResult RegisterClick()
        {
            var model = (ClickCounterModel) Session["c"];
            model.RegisterClick();
            return Json(model);
        }

        //重置
        public JsonResult ResetClick()
        {
            var model = new ClickCounterModel() { NumberOfClicks = 0 };
            Session["c"] = model;
            return Json(model);
        }
    }
}

以上，初始状态时，给ClickCounterModel的计次属性NumberOfClicks赋值为0次。通过Session维持ClickCounterModel上次的状态。当次数达到3次，点击前台视图的"重置"按钮，把ClickCounterModel的计次属性NumberOfClicks重新赋值为0次。

  View Model视图模型

View Model中包括：
1、提供一个比如叫numberOfClicks的属性，通过ko.observable()方法，让它变得"observable"
2、提供一个当点击button按钮的一个函数，向控制器方法发出一个异步请求，回调函数得到的数据重新赋值给numberOfClicks的属性
3、提供一个当点击"重置"按钮的一个函数，向控制器方法发出一个异步请求，回调函数得到的数据重新赋值给numberOfClicks的属性
4、提供一个计算属性hasClickedTooManyTimes，以numberOfClicks为判断依据，当次数达到3次，就返回false

当然，这个View Model需要通过ko.applyBindings(viewModel)方法，与视图UI绑定起来。

ClickCounter/Index.cshtml完整如下：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>You've clicked <span data-bind='text: numberOfClicks()'>&nbsp;</span> times</div>
 
<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>
 
<div data-bind='visible: hasClickedTooManyTimes'>
    That's too many clicks! Please stop before you wear out your fingers.
    <button data-bind='click: resetClicks'>Reset clicks</button>
</div>

@section scripts
{
    <script src="~/Scripts/knockout-3.1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var viewModel = new ClickCounterViewModel();
            ko.applyBindings(viewModel);
            
            $.getJSON('@Url.Action("GetIntitial","ClickCounter")', function (data) {
                viewModel.numberOfClicks(data.NumberOfClicks);
            });
        });

        var ClickCounterViewModel = function () {
            var self = this;
            self.numberOfClicks = ko.observable(0);

            self.registerClick = function () {
                $.ajax({
                    url: '@Url.Action("RegisterClick","ClickCounter")',
                    cache: false,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    //data: ko.toJSON(model),
                    data: {},
                    success: function(data) {
                        self.numberOfClicks(data.NumberOfClicks);
                    }
                });
            };

            self.resetClicks = function () {
                $.ajax({
                    url: '@Url.Action("ResetClick","ClickCounter")',
                    cache: false,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    //data: ko.toJSON(model),
                    data: {},
                    success: function (data) {
                        self.numberOfClicks(data.NumberOfClicks);
                    }
                });
            };

            self.hasClickedTooManyTimes = ko.computed(function () {
                return self.numberOfClicks() >= 3;
            });
        };
    </script>
}

“Knockout官网实例在MVC下的实现”系列包括：

Knockout官网实例在MVC下的实现-01,实现Hello world

Knockout官网实例在MVC下的实现-02,实现计次