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
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>
Không có nhận xét nào:
Đăng nhận xét