چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید.

آپدیت روزانه

بیش از 1000 پست آموزشی

نیازهای روز

تازه سازی بخشی از صفحه در ASP. Net MVC

گاهی در پروژه‌ها لازم است بخشی از صفحه بدون عمل بارگزاری کل پروژه به مدت زمان مشخص از سرور خوانده شود.

مقدمه:

در بعضی از پروژه‌ها لازم است بخشی از صفحه بدون عمل مجدد بارگذاری کل صفحه، از سرور خوانده شود برای مثال تعداد کاربران آنلاین در سایت و یا اطلاعات بازار سهام. در ادامه این مقاله به همراه یک مثال نحوه بارگزاری بخشی از صفحه با استفاده از PartialView در ASP.Net MVC و متد Load در کتابخانه jQuery خواهیم پرداخت.

در یک مثال خیلی ساده قصد دارم نام و نام خانوادگی کاربر به صورت Random بعد از سپری شدن مدت 30 ثانیه از دیتابیس خوانده شود.

فرض بر این است شما پروژه جدید ASP.Net MVC ایجاد نموده‌اید. اولین قدم لازم است مدل UserViewModel در پوشه Models به صورت زیر ایجاد شود:

using System;
namespace Auto_refresh_Partial_View_in_ASP.NETMVC.Models
{
    public class UsersViewModel
    {
        public int Id { get; set; }
        public string FullName { get; set; }
    }
}

حال در پوشه Models یک کلاس جدید با نام Database ایجاد نموده و متد RandomUser را پیاده سازی میکنیم، با استفاده از این کلاس قصد داریم به صورت یک بانک اطلاعاتی از آن استفاده شود:

using System;
namespace Auto_refresh_Partial_View_in_ASP.NETMVC.Models
{
    public class Databse
    {
        public UsersViewModel RandomUser()
        {
            // به ازای هر درخواست یک کاربر جدید ایجاد می‌شود
            return new UsersViewModel() { Id = 0, FullName = "Sadar"+ DateTime.Now.Second };
        }
    }
}

کدهای HTML  و اکشن متد Index در HomeController را پیاده سازی میکنیم:

/// <summary>
///
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
      var db = new Models.Databse();
      return View(db.RandomUser());
}

کدهای HTML:

@model Auto_refresh_Partial_View_in_ASP.NETMVC.Models.UsersViewModel
@{
    ViewBag.Title = "Index";
}
<div class="user-status">
    <h1>
        @Model.FullName
    </h1>
</div>
@section Scripts
{
    <script type="text/javascript">
        $(function () {
            setInterval(function () { $('.user-status').hide().load('/Home/GetRandomUser').fadeIn('slow'); }, 3000);
        });
    </script>
}

در دستور بالا از متد setInterval که یک متد استاندارد جاوااسکریپت است استفاده نموده‌ایم جهت فراخوانی یک متد بعد از سپری شدن مدت زمان سه ثانیه، توجه شود که فراخوانی تابع تا زمانی ادامه می‌یابد که متد  clearInterval فراخوانی شود. مدت زمان تعریف به میلی‌ثانیه حساب خواهد شد در این صورت 3000 برابر است با 3 ثانیه.

نکته: در صورتی لازم باشد بعد از مدت زمان مشخص به صورت میلی‌ثانیه فقط یک بار تابع فراخوانی شود از متد setTimeout استفاده می‌شود. کد زیر یک مثال ساده نحوه استفاده از متد setTimeout  می‌باشد:

setTimeout(function(){ alert("Hello"); }, 3000);

در بخش بعدی از متد load استفاده نموده‌ایم جهت ارسال یک درخواست به صورت HttpGet به سرور جهت آپدیت پنل مربوطه.

در پایان لازم است اکشن متد GetRandomUser و PartialViewUser رو ایجاد کنیم:

/// <summary>
///
/// </summary>
/// <returns></returns>
public PartialViewResult GetRandomUser()
{
     var db = new Models.Databse();
     return PartialView("/Views/Home/_User.cshtml", db.RandomUser());
}

PartialViewUser:

@model Auto_refresh_Partial_View_in_ASP.NETMVC.Models.UsersViewModel
<h1>
    @Model.FullName
</h1>

خروجی:

بعد از سپری شدن مدت زمان 3 ثانیه یک درخواست برای متد GetRandomUser در کنترلر Home به صورت HttpGet ارسال شده و خروجی نهایی در div که کلاس user-status را دارد HTML جدید خوانده شده از سمت سرور قرار خواهد گرفت.

مآخذ:

برای دانلود پروژه اینجا کلیک کنید.


...

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must ورود to comment.