در این مقاله قصد داریم نحوه به روزرسانی خودکار Partial View ها به کمک JQuery را توضیح دهیم .شما یاد خواهید گرفت چطور بدون refresh کردن صفحه یک Partial view به روزرسانی خواهد شد.

من یک grid viewدارم که لیست اطلاعات موجود در دیتا بیس را نمایش می دهد.من نیاز دارم که این اطلاعات همواره به روز باشد بنابراین این grid view اطلاعات را هر دو دقیقه یک بار آپدیت می کند .
در شکل زیر grid view ایی که اطلاعات من از دیتابیس را نمایش می دهد نشان داده شده است .من قصد دارم که به روزرسانی این grid view را با کمک جی کوئری انجام دهم.

ابتدا یک پروژه empty از نوع MVC بسازید.سپس در بانک اطلاعاتی جدول Employee را که شامل Id,name,city,mobileno است می سازیم.برای اینکه برنامه ما با این دیتابیس ارتباط برقرار کند لازم است که یک مدل تعریف کنیم .روی مدل کلیک راست کرده و add ->new Item را می زنیم .در پنجره باز شده گزینه ADO.NET Entity Data Model را کلیک کرده و نامی به مدل خود می دهیم

بعد از این کار در پنجره ای که باز می شود EF Designer from Database را انتخاب می کنیم .با این کار به mvc اعلام می کنیم که قصد داریم مدل خود را از روی یک بانکی که قبلا ساخته ایم ایجاد کنیم .در مرحله بعد از شما نام دیتابیس و جدول مربوطه خواسته خواهد شد :مانند شکل زیر

در پشت صحنه اطلاعات connection string هم در web.config ساخته می شود .

نهایتا مدل ما ساخته می شود .لازم است که در این مرحله Partial View خود را که  نام _partial Employee است بسازیم .در این ویو فقط data grid قرار داده ایم .

بعد از این قصد داریم که کاری صورت دهیم تا این Partial view  در بازه زمانی دو دقیقه یکبار اطلاعات خود را دوباره به روز رسانی کند.برای این کار مراحل زیر را انجام می دهیم .
مرحله 1- Partial view را در یک div قرار دهید.

<div id="_recentfive">
  @Html.Partial("_PartialEmployee", Model) 
</div>

مرحله 2-رفرنس جی کوئری را در قسمت head صفحه قرار دهید.

<script src="~/jquery-1.10.2.min.js"></script>

و اسکریپت زیر را نیز در صفحه قرار دهید

<script type="text/javascript">

    setInterval("$('#_recentfive').load('Home/Index')",2000);
</script> 

تابع setinterval در واقع Id مربوط به div ایی که Partial view در آن قرار دارد را می گیرد. و در تابع لود ذکر کرده ایم که کدام کنترلر و کدام actionبه روزرسانی شود .2000 هم بر حسب میلی ثانیه است و زمان دوباره لود شدن این قسمت را نشان می دهد.

مرحله 3- action مورد نظر که باید این view  را نمایش دهد به این صورت باز نویسی میکنیم

    [OutputCache(NoStore=true,Location=System.Web.UI.OutputCacheLocation.Client,Duration=2)]
        public ActionResult Index()
        {
           return PartialView("_PartialEmployee",db.Employees.ToList());
           
        }