微软 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);

        }

    }

}

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