MVC非唐突Ajax的使用

最新推荐文章于 2022-04-19 13:42:05 发布

Harper

最新推荐文章于 2022-04-19 13:42:05 发布

阅读量1.3k

点赞数

分类专栏： Asp.net

本文链接：https://blog.csdn.net/zhifeiya/article/details/25223583

版权

Asp.net 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

CSDN广告是越来越多了，所有博客笔记不再更新，新网址 DotNet笔记

MVC包含了对非唐突Ajax的支持,非唐突Ajax的作用可以让你不必再HTML代码里面嵌套javascript代码.非唐突Ajax也是需要JQUERY支持的.

先说一下 AjaxOptions对象(MSDN):表示用于在 MVC 应用程序中运行 AJAX 脚本的选项设置。我们主要是通过配置该类对象的属性值来代替写js代码,比如"回调函数"

AjaxOptions的属性都是可选的,如下图:

使用方法:

1) 根目录配置文件设置

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

2) 在视图中,对应的js的引入

    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

3)在视图中配置AjaxOptions对象

@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata"
    };
}

<!DOCTYPE html>
<html>

好了,看一个例子( 下载)吧,根据名称,筛选数据

先看控制器:

    public class AppointmentController : Controller
    {
        //自己建的数据源
        IEnumerable<Appointment> data = new[] {
                        new Appointment { ClientName = "Joe", Date = DateTime.Parse("1/1/2012")},
                        new Appointment { ClientName = "Joe", Date = DateTime.Parse("2/1/2012")},
                        new Appointment { ClientName = "Joe", Date = DateTime.Parse("3/1/2012")},
                        new Appointment { ClientName = "Jane", Date = DateTime.Parse("1/20/2012")},
                        new Appointment { ClientName = "Jane", Date = DateTime.Parse("1/22/2012")},
                        new Appointment {ClientName = "Bob", Date = DateTime.Parse("2/25/2012")},
                        new Appointment {ClientName = "Bob", Date = DateTime.Parse("2/25/2013")}
                        };
       
        public ViewResult Test()
        {
            string str = "";
            var rs = data.Select(r=>r);
            foreach(Appointment a in rs)
            {
                str += "<li>"+a.ClientName+"</li>";
            }
            ViewBag.data = new HtmlString(str);
            return View();
        }

        [HttpPost]
        public MvcHtmlString Test(string name)
        {
            string str = "";
            var rs = data.Select(r => r);
            if ( name!= "All")
            {
                rs = rs.Where(r => r.ClientName == name);
            }
            foreach (Appointment a in rs)
            {
                str += "<li>" + a.ClientName + "</li>";
            }
            return new MvcHtmlString(str);
        }
    }

    public class Appointment
    {
        public string ClientName { get; set; }
        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
        public bool TermsAccepted { get; set; }
    }

再看一下视图:

@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata"
    };
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
    @using (Ajax.BeginForm("Test", ajaxOpts))
    {
        <div>
            <ul id="tabledata">
                @ViewBag.data
            </ul>
        </div>
        @Html.DropDownList("name", new SelectList(
new[] { "All", "Joe", "Jane", "Bob" }, "All"))
        <input type="submit" value="Submit" />
    }
</body>
</html>