MVC3.0+knockout.js+Ajax 实现简单的增删改查

自从到北京入职以来就再也没有接触MVC，很多都已经淡忘了，最近一直在看knockout.js 和webAPI，本来打算采用MVC+knockout.js+webAPI来实现这个小DEMO的，无奈公司用的开发环境是VS2010只安装了MVC3.0。那就先练习一下MVC和knockout吧。博客园里有很多这样的文章，但是觉得还是要自己亲自动手写一下。

本文不讲解knockout.js和webAPI ，不了解的同学可以百度一下。下一篇博文将采用webAPI和Redis缓存作为服务端重写该项目。

我们采用MVC和knockout.js实现一个简单的学生信息管理，实现学生信息的增删改查功能。通过knockout.js来进行数据的绑定，你会发现代码变得很优雅。在该项目中我们会用到razor视图以及Layout模板、RenderSection和Html.Partial等razor语法中的基本功能

项目需要添加knockout.js文件的引用，可以到官网上下载。

一、我们新建一个空的MVC项目

MVC3.0+knockout.js+Ajax 实现简单的增删改查

knockout.js在Script文件夹中，只用关注带黄色底纹的文件，其他没有用。

二、文件讲解

1、我们先来看看_Layout.cshtml文件

_Layout.cshtml作为模板页面，Home文件夹下的所有*.cshtml都会引用该模板页，在_Layout.cshtml我们定义了@RenderSection("Header",false)一个区块，那么我们就可以在引用的具体页面中在该区域内添加css和js脚本了。@Html.Partial("FootPartialPage")说明我们引用了FootPartialPage. Cshtml的视图。

下面我们来看一下具体的代码

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout-2.3.0.js")" type="text/javascript"></script>
    @RenderSection("Header",false)
</head>

<body>
    <div class="top">
    
    </div>

    <div class="content">
        @RenderBody()
    </div>

    <div class="foot">
        @Html.Partial("FootPartialPage")
    </div>
</body>
</html>

2、Models/Students.cs

Students为我们定义的一个学生类的实体，作为数据的传递。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication1.Models
{
    public class Students
    {
        public string Num { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Sex { get; set; }
        public string Class { get; set; }
    }
}

3、 HomeController.cs控制器

HomeController中我们定义了很多Action，实现增删改查功能，直接看代码吧，Action中的代码最好配合着View来看。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;

using System.Runtime.Serialization.Json;
using System.IO;


namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        private static List<Students> listStu = new List<Students>()
        {
            new Students(){Num="s0001",Name="张三",Age=19,Sex="man",Class="计算机1班"},
            new Students(){Num="s0002",Name="李四",Age=20,Sex="man",Class="计算机1班"},
            new Students(){Num="s0003",Name="王五",Age=18,Sex="man",Class="计算机1班"},
            new Students(){Num="s0004",Name="小红",Age=17,Sex="women",Class="计算机'\"1班"},
        };
        //首页
        public ActionResult Index()
        {
            //序列化为json数据
            DataContractJsonSerializer Serializer = new DataContractJsonSerializer(typeof(List<Students>));
            using (MemoryStream ms = new MemoryStream())
            {
                Serializer.WriteObject(ms,listStu);
                ms.Flush();
                ms.Seek(0, SeekOrigin.Begin);
                StreamReader sr = new StreamReader(ms);
                ViewBag.Data = sr.ReadToEnd();
            }
            return View(ViewBag);
        }
        //新增页面
        public ActionResult Add()
        {
            return View();
        }
        //新增事件
        [HttpPost]
        public JsonResult Add(FormCollection form)
        {
            listStu.Add(
            new Students() { Num = form["Num"], Name = form["Name"], Age = Convert.ToInt32(form["Age"]), Sex = form["Sex"], Class = form["Class"] }
            );
            return Json(new { type = "success" });
        }
        //编辑页面
        public ActionResult edit(string id)
        {
            var item = listStu.Find(it => it.Num == id);
            //序列化为json数据
            DataContractJsonSerializer Serializer = new DataContractJsonSerializer(typeof(Students));
            using (MemoryStream ms = new MemoryStream())
            {
                Serializer.WriteObject(ms, item);
                ms.Flush();
                ms.Seek(0, SeekOrigin.Begin);
                StreamReader sr = new StreamReader(ms);
                ViewBag.Data = sr.ReadToEnd();
            }
            return View("eidt");
        }
        //编辑事件
        [HttpPost]
        public JsonResult edit(FormCollection form)
        {
            string Num = form["Num"];
            var item = listStu.Find(it => it.Num == Num);
            item. Name = form["Name"];
            item. Age = Convert.ToInt32(form["Age"]);
            item. Sex = form["Sex"];
            item. Class = form["Class"];
            return Json(new { type = "success" });
        }
        //删除
        [HttpPost]
        public JsonResult Del(string id)
        {
            var item = listStu.Find(it => it.Num == id);
            listStu.Remove(item);
            return Json(new { type = "sucess" });
        }
       
    }
}

View Code