微软 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>
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);
}
}
}
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);
}
}
}
有了上面的代码相信大家也能理解了吧。
