Load Me ASP.NET MVC 5 AJAX
Load Me ASP.NET MVC 5 AJAX
السلام عليكم ,
في المثال التالي سوف نحاول استخدام AJAX مع ASP.NET MVC , واظهار موشر مشغولية المعالج , في اثناء تنفيذ اي عمليه.
public class EmployeeController : Controller { private readonly IEmployee _Employee; public EmployeeController(IEmployee employee) { _Employee = employee; } // GET: Employee public ActionResult Index() { return View(); } [HttpGet] public ActionResult GetEmployees() { return PartialView("_GetEmployees", _Employee.GetEmployee); } }
Index Pege :
@{ ViewBag.Title = "Index";}<link href="~/Content/loadme.css" rel="stylesheet" />@{ var options = new AjaxOptions() { UpdateTargetId = "DivContent", InsertionMode = InsertionMode.Replace, HttpMethod = "Get", OnBegin = "onLoadBegin", OnSuccess = "onLoadSuccess" };}<br/>@Ajax.ActionLink("Employees", "GetEmployees", "Employee", options,new { @class = "btn btn-primary" })<hr/><div id="DivContent"> Your PartialView Will be here. </div><div id="divLoading" style="display:none"> <div class="loadmeRect"> <div class="loadmeRectChild loadmeRect1"></div> <div class="loadmeRectChild loadmeRect2"></div> <div class="loadmeRectChild loadmeRect3"></div> <div class="loadmeRectChild loadmeRect4"></div> <div class="loadmeRectChild loadmeRect5"></div> </div> <div class="loadme-mask"></div></div>
partial View
@model IEnumerable<TestLoadMeAjax.Models.Employee><p> @Html.ActionLink("Create New", "Create")</p><table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Gender) </th> <th> @Html.DisplayNameFor(model => model.Salary) </th> <th></th> </tr>@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Gender) </td> <td> @Html.DisplayFor(modelItem => item.Salary) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-warning" })| @Html.ActionLink("Details", "Details", new { id=item.Id }, new { @class = "btn btn-warning" }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }, new { @class = "btn btn-warning" }) </td> </tr>}</table>
Code GitHub