jQuery로 쉽게 Ajax 구현하기

저자：Eve Cole 업데이트 시간：2010-08-16 18:28:27

asp.net의 MVC 아키텍처에서 jQuery를 사용하는 것은 매우 쉽고, Ajax를 구현하기 위해 jQuery를 사용하는 것은 훨씬 더 간단합니다. Asp.Net MVC 프레임워크를 생성한 후 jQuery 스크립트가 포함되었습니다. 관련 환경 설정에 대해서는 내 다른 기사인 Asp.Net MVC 예제를 참조하세요. 여기서는 여전히 인스턴스의 환경에 의존합니다. jQuery 스크립트는 생성된 프레임워크의 Scripts 폴더에서 이미 볼 수 있습니다.

Json 데이터를 얻기 위해 TestModel.cs에 함수를 생성합니다. 이때 여전히 Id와 Name이라는 두 필드가 포함된 Tets 테이블을 사용합니다.

//JsonDataArray public static Array GetJsonArray(String name) { 배열 데이터 = null; try { data = (testDb.test의 c에서 c.name.Contains(name) 선택 새 { c.id, c.name }). ToArray(); }catch(ArgumentNullException ae) {} 데이터 반환 }

간단히 말하면 Json 데이터는 Key-Value 배열 형태의 데이터입니다. 그런 다음 기본 옵션에 따라 컨트롤러를 만듭니다. 생성된 컨트롤러에는 Index()라는 한 가지 메서드만 있습니다. jQuery가 호출할 또 다른 메서드를 만듭니다. 완성된 코드는 JQueryController.cs입니다. 참고: jQuery는 MVC2.0에서 기본적으로 서버 데이터 호출이 금지되어 있으므로 JsonRequestBehavior.AllowGet 코드에 액세스 권한을 추가해야 합니다.

System 사용;System.Collections.Generic 사용;System.Linq 사용;System.Web 사용;System.Web.Mvc 사용;MvcWeb.Models 사용; 네임스페이스 MvcWeb.Controllers{ public class JQueryController: Controller { // // GET: / JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName(문자열 이름) { return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet) } }

그런 다음 Index()를 마우스 오른쪽 버튼으로 클릭하고 기본 옵션을 사용하여 Views/JQuery: Index.aspx에서 생성된 코드를 볼 수 있습니다. 그런 다음 스크립트 코드를 삽입하고 다음과 같이 완료합니다. 다음과 같습니다:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID= "TitleContent" runat="server"> JQuery </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery -1.4.1.js" type="text/javascript"></script> <script 언어="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater ').hide(); $('#dataHead').hide(); $('#linkFind').click(function(event) { event.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { 이름: $('#textSearch')[0].value }, function(data) { $( '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. name + '</div>'); }); $('#updater').hide() }) </script> <h2>Ajax 인스턴스 구현</h2 > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">검색</a>    class ="update" id="updater"> 로드 중...   </span></div> <div id="dataHead" >ID 이름</div> <div id=" testList "></div> </asp:Content>

프로젝트를 실행하고 텍스트 상자에 "t"를 입력한 후 "검색"을 누르면 아래와 같이 페이지를 새로 고치지 않고 쿼리된 데이터가 표시됩니다.

또한 Ajax 개발 시 기본 Ajax 함수 $.ajax를 사용하여 오류가 발생하면 오류 정보를 인쇄할 수도 있습니다. 예를 들어 위 호출은 다음 코드를 사용하여 디버깅할 수 있습니다.