ASP.NET MVC 베타에서는 Ajax.BeginForm, Ajax.ActionLink를 사용하여 Ajax 호출을 수행할 수 있습니다. 마찬가지로 jQuery와 같은 일부 Ajax 지원 프레임워크를 사용하여 Ajax 호출을 단순화할 수도 있습니다.
1. System.Web.Mvc.Ajax
1.1 System.Web.Mvc.Ajax.BeginForm
1.2 System.Web.Mvc.Ajax.ActionLink
2. " 손으로 "JavaScript"
I. system.web.mvc.ajax
사용
1.1 system.web.mvc.ajax.beginform
@using (Ajax.BeginForm( new AjaxOptions() { HttpMethod = "post", Url = @Url.Action("Index","Reviews"), InsertionMode = InsertionMode.Replace, UpdateTargetId = "restaurantList", LoadingElementId = "loding", LoadingElementDuration = 2000 })) { <input type="search" name="searchItem"/> <input type="submit" value="按名称搜索"/> }
최종 생성된 양식은 다음과 같습니다.
<form id="form0" method="post" data-ajax-url="/Reviews" data-ajax-update="#restaurantList" data-ajax-mode="replace" data-ajax-method="post" data-ajax-loading-duration="2000" data-ajax-loading="#loding" data-ajax="true" action="/Reviews" novalidate="novalidate">
2단계: Ajax.BeginForm
new AjaxOptions() { ... Url = @Url.Action("Index","Reviews") ... } public ActionResult Index(string searchKey = null) { var model = _restaurantReviews.Where(r => searchKey == null || r.Name.ToLower().Contains(searchKey.ToLower().Trim())) .OrderByDescending(r => r.Rating) .Take(100) .Select(r=>new RestaurantReview() { City = r.City, Country = r.Country, Id = r.Id, Name = r.Name, Rating = r.Rating }).ToList(); if (Request.IsAjaxRequest()) { System.Threading.Thread.Sleep(1000 * 3);//模拟处理数据需要的时间 //return View(model)会返回整个页面,所以返回部分视图。 return PartialView("_RestaurantPatialView", model); } return View(model); }
의 새 AjaxOptions() 개체의 Url이 가리키는 작업을 만듭니다. 참고:
사용 설명 System.Web .Mvc.Ajax:
컨트롤러의 Action 메서드:
(1) [HttpPost]가 명시적으로 추가되면 System.Web.Mvc.Ajax의 AjaxOptions()에 전달되는 HttpMethod는 "post"만 가능합니다.
(2 ) [HttpGet]이 명시적으로 추가된 경우 System.Web.Mvc.Ajax의 AjaxOptions()에 전달된 HttpMethod는 "get"만 가능합니다.
(3) [HttpPost]가 명시적으로 추가되지 않은 경우 ] 및 [HttpGet], System.Web.Mvc.Ajax의 AjaxOptions()에 전달된 HttpMethod는 "get" 또는 "post"일 수 있습니다.
3단계: 업데이트된 페이지를 호스팅하기 위해 html 요소를 추가합니다.
즉, html 요소를 추가합니다. ID가 AjaxOptionsd 개체의 UpdateTargetId 매개 변수로 지정된 레스토랑 목록입니다.
여기에 페이지를 추가합니다.
<p id="restaurantList">... </p>
4단계: (선택 사항) 사용자 경험을 향상하려면 IDml 요소를 추가합니다. Loding의 IDML 요소에 Ajaxoption 개체의 loadingElementid 매개 변수로 지정:
new AjaxOptions() { .... LoadingElementId = "loding", LoadingElementDuration = 2000 }))
페이지에 추가: ID는 동적 동적을 추가하는 Loding의 요소입니다. 그림 새로 고침 & lt; :
CSHTML 파일 추가:
<p id="loding" hidden="hidden"> <img class="smallLoadingImg" src="@Url.Content("~/Content/images/loading.gif")" /> </p>
@*@Html.ActionLink(item.Name, "Details", "Reviews",new{id = item.Id},new {@class ="isStar"})*@ @*<a class="isStar" href="@Url.Action("Details","Reviews", new {id = item.Id})">@item.Name</a>*@ @*使用Ajax的超链接*@ @{ var ajaxOptions = new AjaxOptions() { HttpMethod = "post", //Url = @Url.Action(""), UpdateTargetId = "renderBody", InsertionMode = InsertionMode.Replace, LoadingElementId = "loding", LoadingElementDuration = 2000 }; @Ajax.ActionLink(item.Name, "Details", "Reviews", new { id = item.Id }, ajaxOptions, new {@class="isStar"}) }
<a class="isStar" href="/Reviews/Details/1" data-ajax-update="#renderBody" data-ajax-mode="replace" data-ajax-method="post" data-ajax-loading-duration="2000" data-ajax-loading="#loding" data-ajax="true">
4단계: (선택 사항) 사용자 경험을 향상하려면 AjaxOptionsd 개체의 LoadingElementId 매개 변수로 지정된 ID가 loding인 html 요소를 추가합니다.
1.1의 네 번째 단계와 동일합니다.
두 번째, 수동으로 "비침해적인" Javascript를 만듭니다.
1단계: 양식 추가:
/// <summary> ///关于使用System.Web.Mvc.Ajax的说明: /// Controller的Action方法: /// (1)当显式添加[HttpPost],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "post", /// (2)当显式添加[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "get", /// (3) 当都没有显式添加[HttpPost]和[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 "get"也可以为"post", /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult Details(int id=1) { var model = (from r in _restaurantReviews where r.Id == id select r).FirstOrDefault(); if (Request.IsAjaxRequest()) { return PartialView("_RestaurantDetails", model); } return View(model); }
<p id="renderBody"> .... </p>
@* --------------------------------------------------------- 需要手工为Form添加些属性标签,用于锚点 模仿MVC框架的构建自己的“非介入式Javascript”模式 -------------------------------------------------------*@ <form method="post" action="@Url.Action("Index")" data-otf-ajax="true" data-otf-ajax-updatetarget="#restaurantList"> <input type="search" name="searchItem" /> <input type="submit" value="按名称搜索" /> </form>
JSONP를 사용하여 JSON 데이터를 얻는 AJAX 도메인 간 요청
h5 ajax를 기반으로 휴대폰 위치 구현H5 기능 FormData를 사용하여 파일 업로드 새로 고침도 없이
위 내용은 Asp.net MVC에서 Ajax 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!