[ ASP.NET ] ASP.NET AJAX / ASP.NET AJAX 사용법 / .NET AJAX

[ ASP.NET ] ASP.NET AJAX / ASP.NET AJAX 사용법 / .NET AJAX

ASP.NET 으로 작업을 하다가 보면 AJAX를 사용해야될 일이 아주 많다.

보통은 jQuery Ajax를 많이 사용하지만, 같은 서버에서 작업되어 있는 부분이라면 아래처럼 사용가능하다.

.NET 에서 제공하는 Ajax를 사용하려면 아래의 두 스크립트를 추가 해줘야 한다.

-> 스크립트 추가

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>

-> 사용

<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
 
<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "textEntered" }))
   { %>
    <%= Html.TextBox("textBox1","Enter text")%>
    <input type="submit" value="Submit" /><br />
    <span id="textEntered">Nothing Entered</span>
<% } %>

-> aspx 전체 페이지 소스

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    AjaxTest
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>
    <h2>
        <%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        Page Rendered:
        <%= DateTime.Now.ToLongTimeString() %>
    </p>
    <span id="status">No Status</span>
    <br />
    <%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
    <br />
    <br />
    <% using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "textEntered" }))
       { %>
    <%= Html.TextBox("textBox1","Enter text")%>
    <input type="submit" value="Submit" /><br />
    <span id="textEntered">Nothing Entered</span>
    <% } %>
</asp:Content>

-> cs 페이지

//페이지 호출
public ActionResult AjaxTest()
{
    return View();
}
 
//현재 시간을 리턴
public string GetStatus()
{
    return "Status OK at " + DateTime.Now.ToLongTimeString();
}
 
//현재시간을 textbox에 입력
public string UpdateForm(string textBox1)
{
    if (textBox1 != "Enter text")
    {
        return "You entered: \"" + textBox1.ToString() + "\" at " +
            DateTime.Now.ToLongTimeString();
    }
 
    return String.Empty;
}

-> 결과

아래 결과를 보면 페이지가 랜더링 된 시간과 서브밋한 시간 차이를 통해서.. 전체페이지가 새로고침 되지 않고 AJAX가 제대로 작동 되었다는 것을 알 수 있다.