ajax、jquery、jquery模板实现异步表单，局部刷新

最新推荐文章于 2024-04-08 14:57:40 发布

原创最新推荐文章于 2024-04-08 14:57:40 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net mvc #ajax jquery 异步表单局部刷

ASP.NET MVC 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Ajax和jQuery在ASP.NET MVC中实现异步表单局部刷新的功能，包括使用Ajax.BeginForm()方法、jQuery提交表单、局部更新页面元素等步骤，并提供了实例代码。

一.利用ajax表单实现异步表单局部刷新 Ajax.BeginForm()方法

布局文件中添加必要的库文件

    <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类

    public class Singer
    {
        public int SingerId { get; set; }

        public string SingerName { get; set; }
    }

播种数据库时添加几条数据

    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()方法

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

Index视图

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div>
    @*利用ajax表单实现异步表单局部刷新*@
    @using (Ajax.BeginForm("Search",                       
                          "Home",
                          new AjaxOptions
                          {
                              UpdateTargetId = "result" //要替换的元素id
                          }))
    {
        <input type="text" name="search"/>
        <input type="submit" value="搜索"/>
    }

</div>

<div id="result">
    显示搜索结果
</div>

HomeController中添加Search()方法

        public ActionResult Search(string search)
        {
            var singers = db.Singers.Where(a => a.SingerName.Contains(search));
            return View(singers);    
        }

为Search()方法添加一个分部视图

<div>
    @foreach (var item in Model)
    {
        <a href="#">@item.SingerName</a><br/>
    }
</div>

运行程序

二.用Jquery实现异步表单局部刷新

1.通过返回html局部视图的方式实现刷新

修改Index视图

@{
    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>

<div>
    <form id="form1" method="get" action="@Url.Action("Search", "Home")">
        <input type="text" name="search"/>
        <input type="submit" value="搜索"/>
    </form>
</div>

<div id="result">

</div>

运行程序

2.通过返回JSON数据实现异步表单，局部刷新,利用Jquery模板实现局部刷新，通过$.getJSON()方法得到传递的JSON数据

需要一个Jquery Template插件的支持，可以在Nuget中查找下载。安装插件后布局文件中添加需要的库文件

<script src="../../Scripts/jQuery.tmpl.js" type="text/javascript"></script>

修改HomeController中的Search()方法，使其返回JSON数据

        public ActionResult Search(string search)
        {
            var singers = db.Singers.Where(a => a.SingerName.Contains(search));
            return Json(singers,JsonRequestBehavior.AllowGet);
        }

修改Index视图

@{
    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>

<div>
    <form id="form1" method="get" action="@Url.Action("Search", "Home")">
        <input type="text" name="search"/>
        <input type="submit" value="搜索"/>
    </form>
</div>

<div id="result">

</div>

运行程序