[.NET] Hướng dẫn sử dụng AJAX

AJAX là gì?

(Asynchronous Javascript and XML ) Là một công nghệ giúp chúng ta tạo ra những web động mà hoàn toàn không reload lại trang nên giúp website nhanh và rất mượt, đẹp. 

MỘT SỐ CÁCH SỬ DỤNG AJAX TRONG ASP.NET MVC

Cách 1: Dùng @Ajax.ActionLink

@Ajax.ActionLink("Tên Link","Ajax", new AjaxOptions { HttpMethod="GET",UpdateTargetId="KetQua", InsertionMode=InsertionMode.Replace,LoadingElementId="loading"})

<div id="KetQua"></div>

<div id="loading" style="display:none;">

    <img src="~/image/animatedEllicpse.dif" />

</div>

"Tên Link": Tên của link.

"Ajax": là action xử lý công việc cần làm.

Ajaxoption có các thông số bên trong

- GET: Phương thực xử lý, có thể Post hoặc GET.

- UpdateTargetId="KetQua": div id trả về kết quả sau khi xử lý.

- InsertionMode=InsertionMode.Replace,LoadingElementId="loading". 

+Trong đó Insertmode có 3 mode là After,Before, Replace. 

 + Trong đó LoadingElemenitID là id của div trong quá trình xử lý.

Cách 2: Dùng @Ajax.BeginForm

@using (Ajax.BeginForm("Ajax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "KetQua", InsertionMode = InsertionMode.Replace, LoadingElementId = "loading" }))

{

    @Html.TextBox("txtName")

    <input type="submit" />

}

<div id="KetQua">

</div>

<div id="loading" style="display:none">

    <img src="~/image/animatedEllipse.gif" />

</div>

 Cách 3: Dùng Ajax Jquery

<div id="KetQua">

</div>

<span id="button" style="cursor:pointer;">Click</span>

<div id="loading" style="display:none;">

    <img src="~/image/animatedEllipse.gif" />

</div>

<script>

    $('#button').click(function () {

        $('#loading').show();

        $.ajax({

            type: 'GET',

            data: { a: 1, b: 2 },

            url: '@Url.Content("LoadAjax")',

            success:function(ketqua)

            {

                    $('#loading').hide();

                    $('#KetQua').html(ketqua);

                    }

                })

    })

</script>

DEMO THỬ AJAX

Để sử dụng Ajax thì phải cài Microsoft.jQuery.Unobtrusive.Ajax

Sau đó chèn file jquery.Unobtrusive vào head của layout để sử dụng.

1. DEMO AJAX SỬ DỤNG ACTIONLINK

Tạo 1 controller DemoAjax. 

Trong đó tạo 2 Action là Index và LoadAjaxActionLink

public ActionResult Index()

        {

            return View();

        }

        public string LoadAjaxActionLink()

        {

            return "1111";

        }

Tạo View Index

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Layout/HomeLayout.cshtml";

}

<div class="container">

    @Ajax.ActionLink("Load Ajax MVC", "LoadAjaxActionLink", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "KetQua", InsertionMode = InsertionMode.Replace, LoadingElementId = "loading" })

    <div id="KetQua">Đây là kết quả trả về</div>

    <div id="loading" style="display:none;">

        <img src="~/image/animatedEllicpse.dif" />

    </div>

</div>