微软 jQuery Templates插件的在ASP.NET MVC 3 RC2 中 AJAX 更新表格

今天在无事，就一在看有关ASP.NET MVC3的一文章，无意中发现了微软的 Jquery Templates 插件，感觉很好，因为之前项目是ASP.NET MVC 2，我们经常要做的是添加一条数据，然后动态的更新列表，可是当时ASP.NET MVC2不支持接收JSON，所以就有不方便了，现在ASP.NET MVC 3 RC2支持接收JSON，再加微软的Jquery Templates就可以很方便的来做动态更新数据表了。然后就找了一下相关的文章看一下。

参考文章如下：

微软 jQuery Templates插件的使用

ASP.NET MVC 3 中JavaScript and AJAX 改进

下面给下Jquery Templates插件。

插件下载/Files/stalwart/jquery.tmpl.rar

请先看上面的两篇文章，我就不重复了！

我自己也做了个例子，为了能牢记住。

View:

代码

@{
    ViewBag.Title = "测试";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tmpl.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function () {
                var users = { name: $("#Name").val(), website: $("#website").val() };
                $.ajax({
                    url: "/MoreForm/index",
                    type:"POST",
                    data: users,
                    dataType:"json",
                    success:function(data){
                        $("#userTemplate").render(data).appendTo("#Template");
                    },
                    Error:function(){
                        alert("错误");
                    }
                });

                return false;
            });
        });
    </script>
}
    <div>
        @using (Html.BeginForm())
        {
            <ul>
                <li>@Html.TextBox("Name")</li>
                <li>@Html.TextBox("website")</li>
                <li><input id="submit" type="submit" value="submit"/></li>
            </ul>
        }
    </div>
        <ul id="Template">
            <script id="userTemplate" type="text/html">
            <li><a href="http://${website}">${Name}</a></li>
        </script>
        </ul>

Controller:

代码

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

namespace MvcApplication2.Controllers
{
    public class MoreFormController : Controller
    {
        //
        // GET: /MoreForm/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult index(FormCollection Form)
        {
            var model =new{ Name=Form["Name"].ToString(),
                               website=Form["website"].ToString()
            };
            //这里将POST过的生成JOSN
            //同时也可以写入数据库，这里我就没作DOME
            return this.Json(model);
        }
    }
}

有了上面的代码相信大家也能理解了吧。