MVC非唐突Ajax的使用

前端之家收集整理的这篇文章主要介绍了MVC非唐突Ajax的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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


使用方法:

1) 根目录配置文件设置

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

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

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

3)在视图中配置AjaxOptions对象
  1. @{
  2. AjaxOptions ajaxOpts = new AjaxOptions
  3. {
  4. UpdateTargetId = "tabledata"
  5. };
  6. }
  7.  
  8. <!DOCTYPE html>
  9. <html>


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

先看控制器:

  1. public class AppointmentController : Controller
  2. {
  3. //自己建的数据源
  4. IEnumerable<Appointment> data = new[] {
  5. new Appointment { ClientName = "Joe",Date = DateTime.Parse("1/1/2012")},new Appointment { ClientName = "Joe",Date = DateTime.Parse("2/1/2012")},Date = DateTime.Parse("3/1/2012")},new Appointment { ClientName = "Jane",Date = DateTime.Parse("1/20/2012")},Date = DateTime.Parse("1/22/2012")},new Appointment {ClientName = "Bob",Date = DateTime.Parse("2/25/2012")},Date = DateTime.Parse("2/25/2013")}
  6. };
  7. public ViewResult Test()
  8. {
  9. string str = "";
  10. var rs = data.Select(r=>r);
  11. foreach(Appointment a in rs)
  12. {
  13. str += "<li>"+a.ClientName+"</li>";
  14. }
  15. ViewBag.data = new HtmlString(str);
  16. return View();
  17. }
  18.  
  19. [HttpPost]
  20. public MvcHtmlString Test(string name)
  21. {
  22. string str = "";
  23. var rs = data.Select(r => r);
  24. if ( name!= "All")
  25. {
  26. rs = rs.Where(r => r.ClientName == name);
  27. }
  28. foreach (Appointment a in rs)
  29. {
  30. str += "<li>" + a.ClientName + "</li>";
  31. }
  32. return new MvcHtmlString(str);
  33. }
  34. }
  35.  
  36. public class Appointment
  37. {
  38. public string ClientName { get; set; }
  39. [DataType(DataType.Date)]
  40. public DateTime Date { get; set; }
  41. public bool TermsAccepted { get; set; }
  42. }

再看一下视图:
  1. @{
  2. AjaxOptions ajaxOpts = new AjaxOptions
  3. {
  4. UpdateTargetId = "tabledata"
  5. };
  6. }
  7.  
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <Meta name="viewport" content="width=device-width" />
  12. <title>Test</title>
  13. <script src="~/Scripts/jquery-1.8.2.js"></script>
  14. <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
  15. </head>
  16. <body>
  17. @using (Ajax.BeginForm("Test",ajaxOpts))
  18. {
  19. <div>
  20. <ul id="tabledata">
  21. @ViewBag.data
  22. </ul>
  23. </div>
  24. @Html.DropDownList("name",new SelectList(
  25. new[] { "All","Joe","Jane","Bob" },"All"))
  26. <input type="submit" value="Submit" />
  27. }
  28. </body>
  29. </html>

猜你在找的Ajax相关文章