مدل و کنترلر برنامه
namespace jQueryMvcSample07.Models { public class BlogPost { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } } }
using System.Web.Mvc; using System.Web.UI; using jQueryMvcSample07.Models; using jQueryMvcSample07.Security; namespace jQueryMvcSample07.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); //نمایش یک منوی ساده در ابتدای کار } [HttpGet] public ActionResult ShowSynchronous() { var model = getModel(); return View(model); //نمایش همزمان } private static BlogPost getModel() { //شبیه سازی یک عملیات طولانی System.Threading.Thread.Sleep(3000); var model = new BlogPost { Title = "عنوان ... ", Body = "مطلب... " }; return model; } [HttpGet] public ActionResult ShowAsynchronous() { return View(); //نمایش ابتدایی صفحه } [HttpPost] [AjaxOnly] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult RenderAsynchronous() { //دریافت اطلاعات به صورت غیرهمزمان var model = getModel(); return PartialView(viewName: "_Post", model: model); } } }
در کنترلر Home، ابتدا اکشن متد Index آن فراخوانی شده و در این حالت دو لینک زیر نمایش داده میشوند:
@{ ViewBag.Title = "Index"; } <h2> نمایش اطلاعات به صورت همزمان و غیرهمزمان</h2> <ul> <li> @Html.ActionLink(linkText: "نمایش همزمان", actionName: "ShowSynchronous", controllerName: "Home") </li> <li> @Html.ActionLink(linkText: "نمایش غیر همزمان", actionName: "ShowAsynchronous", controllerName: "Home") </li> </ul>
در هر دو صفحه نهایتا از یک Partial View به نام _Post.cshtml برای نمایش اطلاعات استفاده خواهد شد:
@model jQueryMvcSample07.Models.BlogPost <fieldset> <legend>@Model.Title</legend> @Model.Body </fieldset>
@model jQueryMvcSample07.Models.BlogPost @{ ViewBag.Title = "ShowSynchronous"; } <h2>نمایش همزمان</h2> @{ Html.RenderPartial("_Post", Model); }
در حالتیکه کاربر بر روی لینک نمایش غیرهمزمان کلیک میکند، صفحه زیر را مشاهده خواهد کرد:
@{ ViewBag.Title = "ShowAsynchronous"; var loadInfoUrl = Url.Action(actionName: "RenderAsynchronous", controllerName: "Home"); } <h2> نمایش غیر همزمان</h2> <div id="info" align="center"> </div> <div id="progress" align="center" style="display: none"> <br /> <img src="@Url.Content("~/Content/images/loadingAnimation.gif")" alt="loading..." /> </div> @section JavaScript { <script type="text/javascript"> $(function () { $("#progress").css("display", "block"); $.ajax({ type: "POST", url: '@loadInfoUrl', complete: function (xhr, status) { var data = xhr.responseText; if (xhr.status == 403) { window.location = "/login"; } else if (status === 'error' || !data || data == "nok") { alert('خطایی رخ داده است'); } else { $("#progress").css("display", "none"); $("#info").html(data); } } }); }); </script> }
به این ترتیب میتوان حس سریع بودن سایت را زمانیکه قسمتی از صفحه نیاز به زمان بیشتری برای نمایش اطلاعات دارد، به کاربر منتقل کرد.
دریافت پروژه کامل این قسمت
jQueryMvcSample07.zip