脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ajax、jquery、jquery模板实现异步表单，局部刷新，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一.利用ajax表单实现异步表单局部刷新 Ajax.BeginForm()方法
布局文件中添加必要的库文件
[htML]
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" tyPE="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unoBTrusive-ajax.min.js")" type="text/javascript"></script>
Model中添加一个Singer类
[csharp]
public class Singer
{
public int SingerId { get; set; }
public string SingerName { get; set; }
}
播种数据库时添加几条数据
[csharp]
public class InITData : DropCreateDatabaseifModelChanges<AutoDbEntities>
{
PRotected override void Seed(AutoDbEntities context)
{
context.Singers.Add(new Singer { SingerName = "周杰伦"});
context.Singers.Add(new Singer { SingerName = "周笔畅"});
context.Singers.Add(new Singer { SingerName = "周华健"});
context.Singers.Add(new Singer { SingerName = "12"});
context.Singers.Add(new Singer { SingerName = "123"});
context.Singers.Add(new Singer { SingerName = "1234"});
base.Seed(context);
}
}
添加一个控制器HomeController
HomeController中Index()方法
[csharp]
public ActionResult Index()
{
return View();
}
Index视图
[html]
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@*利用ajax表单实现异步表单局部刷新*@
@using (Ajax.BeginForm("SeArch",
"Home",
new AjaxOptions
{
UpdateTargetId = "result" //要替换的元素id
}))
{
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
}
</p>
<p id="result">
显示搜索结果
</p>
HomeController中添加Search()方法
[csharp]
public ActionResult Search(string search)
{
VAR singers = db.Singers.Where(a => a.SingerName.Contains(search));
return View(singers);
}
为Search()方法添加一个分部视图
[html]
<p>
@foreach (var item in Model)
{
<a href="#">@item.SingerName</a><br/>
}
</p>
运行程序
二.用Jquery实现 异步表单 局部刷新
1.通过返回html局部视图的方式实现刷新
修改Index视图
[html]
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript">
$(function () {
$("#form1").submit(function (event) {
event.preventDefault(); //阻止表单提交
//传递HTML方式
var form = $(this);
$("#result").load(form.attr("action"), form.serialize()); //替换页内元素
});
})
</script>
<p>
<form id="form1" method="get" action="@Url.Action("Search", "Home")">
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
</form>
</p>
<p id="result">
</p>
运行程序
2.通过返回JSON数据实现异步表单，局部刷新,利用Jquery模板实现局部刷新，通过$.getJSON()方法得到传递的JSON数据
需要一个Jquery Template插件的支持，可以在Nuget中查找下载。安装插件后布局文件中添加需要的库文件
[html]
<script src="../../Scripts/jQuery.tmpl.js" type="text/javascript"></script>
修改HomeController中的Search()方法，使其返回JSON数据
[csharp]
public ActionResult Search(string search)
{
var singers = db.Singers.Where(a => a.SingerName.Contains(search));
return Json(singers,JsonRequestBehavior.AllowGet);
}
修改Index视图
[html]
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@*Jquery模板*@
<script id=";myTemplate" type="text/x-jquery-tmpl">
<a href="#">${SingerName}</a><br/> //JSON数据中包含的属性
</script>
<script type="text/javascript">
$(function () {
$("#form1").submit(function (event) {
event.preventDefault(); //阻止表单提交
//传递JSON方式
var form = $(this);
$.getJSON(form.attr("action"), form.serialize(), function (data) { //getJSON()方法，利用表单得到JSON数据
$("#myTemplate").tmpl(data).appendTo("#result"); //tmpl方法，把模板添加到指定位置
});
});
})
</script>
<p>
<form id="form1" method="get" action="@Url.Action("Search", "Home")">
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
</form>
</p>
<p id="result">
</p>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-ajax、jquery、jquery模板实现异步表单，局部刷新全部内容，希望文章能够帮你解决javascript代码实例教程-ajax、jquery、jquery模板实现异步表单，局部刷新所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。