پیاده سازی Unobtrusive Ajax در ASP.NET Core 1.0
نویسنده: وحید نصیری
تاریخ: ۱۳۹۵/۰۷/۱۵ ۱۲:۱۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6",
"jquery-ajax-unobtrusive": "3.2.4"
}
} [
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"bower_components/bootstrap/dist/css/bootstrap.min.css",
"content/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"bower_components/jquery/dist/jquery.min.js",
"bower_components/jquery-validation/dist/jquery.validate.min.js",
"bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js",
"bower_components/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js",
"bower_components/bootstrap/dist/js/bootstrap.min.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/css/site.min.css" rel="stylesheet" />
</head>
<body>
<div>
<div>
@RenderBody()
</div>
</div>
<script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html> | HTML attribute | AjaxOptions |
| data-ajax-confirm | Confirm |
| data-ajax-method | HttpMethod |
| data-ajax-mode | InsertionMode |
| data-ajax-loading-duration | LoadingElementDuration |
| data-ajax-loading | LoadingElementId |
| data-ajax-begin | OnBegin |
| data-ajax-complete | OnComplete |
| data-ajax-failure | OnFailure |
| data-ajax-success | OnSuccess |
| data-ajax-update | UpdateTargetId |
| data-ajax-url | Url |
| parameters | Callback |
| xhr, status | data-ajax-complete |
| data, status, xhr | data-ajax-success |
| xhr, status, error | data-ajax-failure |
data-ajax-success = "myJsMethod"
function myJsMethod(data, status, xhr) {
} return Json(new { param1 = 1, param2 = 2, ... }); using System.ComponentModel.DataAnnotations;
namespace Core1RtmEmptyTest.ViewModels.Account
{
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
}
} @using Core1RtmEmptyTest.ViewModels.Account
@model RegisterViewModel
@{
}
<form method="post"
asp-controller="TestAjax"
asp-action="Index"
asp-route-returnurl="@ViewBag.ReturnUrl"
class="form-horizontal"
role="form"
data-ajax="true"
data-ajax-loading="#Progress"
data-ajax-success="myJsMethod">
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
<button type="submit">ارسال</button>
<div id="Progress" style="display: none">
<img src="images/loading.gif" alt="loading..." />
</div>
</form>
@section scripts{
<script type="text/javascript">
function myJsMethod(data, status, xhr) {
alert(data.param1);
}
</script>
} using Core1RtmEmptyTest.ViewModels.Account;
using Microsoft.AspNetCore.Mvc;
namespace Core1RtmEmptyTest.Controllers
{
public class TestAjaxController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index([FromForm]RegisterViewModel vm)
{
var ajax = isAjax();
if (ajax)
{
// it's an ajax post
}
if (ModelState.IsValid)
{
//todo: save data
return Json(new { param1 = 1, param2 = 2 });
}
return View();
}
private bool isAjax()
{
return Request?.Headers != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest";
}
}
} <div id="EmployeeInfo">
<a
asp-controller="MyController" asp-action="MyAction"
data-ajax="true"
data-ajax-loading="#Progress"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#EmployeeInfo">
Get Employee-1 info
</a>
<div id="Progress" style="display: none">
<img src="images/loading.gif" alt="loading..." />
</div>
</div> public IActionResult Index([FromBody] MyViewModel vm)
{
return View();
} using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.Abstractions;
using Microsoft.AspNetCore.Mvc.ActionConstraints;
using Microsoft.AspNetCore.Routing;
namespace WebToolkit
{
public static class AjaxExtensions
{
private const string RequestedWithHeader = "X-Requested-With";
private const string XmlHttpRequest = "XMLHttpRequest";
public static bool IsAjaxRequest(this HttpRequest request)
{
return request?.Headers != null && request.Headers[RequestedWithHeader] == XmlHttpRequest;
}
}
public class AjaxOnlyAttribute : ActionMethodSelectorAttribute
{
public override bool IsValidForRequest(RouteContext routeContext, ActionDescriptor action)
{
return routeContext.HttpContext.Request.IsAjaxRequest();
}
}
} return BadRequest(error: "کاربر مورد نظر یافت نشد");
<form ... ... data-ajax-failure="dataAjaxFailure">
function dataAjaxFailure(xhr, status, error) {
alert(xhr.responseText);
} <a data-ajax="true" data-ajax-begin="onBegin"
<script type=text/javascript>
function onBegin(xhr, settings) {
var token = $('input[name=__RequestVerificationToken]').val();
settings.data = settings.data + '&__RequestVerificationToken=' + token;
}
</script> public async Task<IActionResult> CreateFunction(MyViewModel vm, IFormFile attachFile)
<form asp-controller="Admin" asp-action="CreateBlog" enctype="multipart/form-data" data-ajax="true" data-ajax-method="post" data-ajax-loading="#Progress" data-ajax-complete="onComplete"
data-ajax-failure="onFailed" data-ajax-success="onSuccess"> public async Task<IActionResult> CreateBlog(MyViewModel vm, IFormFile attachFile)
{
"name": "dntcommon.web.core.testwebapp",
"version": "1.0.0",
"description": "",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-rtl": "^3.3.4",
"components-font-awesome": "5.0.6",
"jquery": "^3.3.1",
"jquery-ajax-unobtrusive": "^3.2.4",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.8",
"samim-font": "1.0.2"
}
} C:\Projects\ZagrosCore\src\Zagros>npm install npm WARN dntcommon.web.core.testwebapp@1.0.0 No description npm WARN dntcommon.web.core.testwebapp@1.0.0 No repository field. up to date in 0.181s
<form asp-controller="Home" asp-action="SaveForm"
asp-antiforgery="true" id="TagDetailForm"
data-ajax="true" data-ajax-begin="onBegin"
data-ajax-complete="onComplete" data-ajax-failure="onFailed"
data-ajax-success="onSuccess" data-ajax-method="POST"> function handleFormFailed(xhr, status, error, formId) {
};
data-ajax-failure="handleFormFailed(xhr, status, error, 'role-form')" function handleDeleteLinkBegin(xhr, id, settings)
{
var token = $('input[name=__RequestVerificationToken]').val();
settings.data =
settings.data + '&Id=' + id + '&__RequestVerificationToken=' + token;
}
<a href="#" data-ajax="true" data-ajax-method="POST"
data-ajax-begin="handleDeleteLinkBegin(xhr, '1', arguments[1])"
data-ajax-url="/Roles/Delete">
Delete
</a> this.ModelState.AddModelError("","کد ملی را درست وارد نمایید")
return View(model) @if (ViewData.ModelState.Any(keyValuePair => keyValuePair.Value.Errors.Any()))
{
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert">×</a>
<h4>خطاهای اعتبارسنجی</h4>
<div asp-validation-summary="ModelOnly"></div>
</div>
}