www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫بارگزاری PartialView با استفاده از jQuery در زمان اجرا


نویسنده: پویا امینی
تاریخ: ۱۳۹۲/۰۵/۲۲ ۱۸:۲۰
آدرس: www.dntips.ir
مزیت استفاده از PartialViewها، ماژولار کردن برنامه است. برای مثال اگر صفحه جاری شما قرار است از چهار قسمت اخبار، منوی پویا، سخن روز و آمار کاربران تشکیل شود، می‌توان هر کدام را توسط یک PartialView پیاده سازی کرد و سپس صفحه اصلی را از کنار هم قرار دادن این PartialViewها تهیه نمود.(منبع).
در این پست قصد دارم به نحوه بارگزاری یک PartialView  با استفاده از ASP.NET MVC بپردازم.
ابتدا یک پروژه جدید ایجاد کنید. حال می‌خواهیم زمانیکه صفحه اصلی سایت بارگزاری می‌شود، لیست تمام محصولات را نمایش دهد. برای نمایش محصولات یک PartialView جدید را ایجاد می‌کنیم؛ همانند شکل ذیل:

حال برای ساده کردن مثال، متن ثابتی را درون این PartialView می‌نویسیم:

product  List Partial
در ادامه قصد داریم که درIndex، این View را بارگزاری کنیم. برای این کار از متد ajax مربوط به کتابخانه jQuery به صورت زیر استفاده می‌کنیم:
 $(function () {
        $.ajax({
            //مشخص کردن  اکشنی که باید فراخوانی شود
            url: '/Home/Details',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            //نوع نتیجه بازگشتی
            dataType: 'html'
           
        })
.success(function (result) {
    //زمانی که کدهای سمت سرور بدون خطا اجرا شده اند
    //این قسمت فراخوانی می‌شود و نتیجه اکشن درون متغیر 
    //result 
    //قرار می‌گیرد
    $('#sectionContents').html(result);
})
.error(function (xhr, status) {
    alert(xhr.responseText);
});
    });
و پس از آن محلی را که قرار است PartialView در آن بارگزاری شود، ایجاد می‌کنیم:
<div id="sectionContents"></div>
حال فقط باید اکشن مورد نظر را در HomeController پیاده سازی کنیم: 
 public ActionResult Details()
        {
           return PartialView("partial/_ProductList");
        }
 با استفاده از این کد مشخص کردیم که این اکشن، یک PartialView را با نام ProductList_ برگشت می‌دهد. البته در یک مثال واقعی باید لیست محصولات را هم به این PartialView پاس دهیم.
نتیجه اجرا به صورت زیر است:

مطالب مشابه

نظرات

  • محسن خان در ۱۳۹۲/۰۵/۲۲ ۱۹:۵۹
  • محسن خان در ۱۳۹۲/۰۵/۲۳ ۰:۲۸
    یک سؤال: «بارگزاری» درست هست یا «بارگذاری»؟ البته مطابق مطلبی که در ویکی‌پدیا نوشته باید از «بارگیری» استفاده کرد!
  • مهمان در ۱۳۹۲/۰۶/۰۷ ۱۰:۶
    یک سوال. من یک پارشال ویو دارم که خودش نیاز داره به یه سری کد‌های جاوا اسکریپت و استایل . 
    من پارشال ویو هارو با اجکس لود میکنم . چطوری اون فایل‌های استایل و غیرشم لود کنم ؟.  RenderSection@ جواب نمیده. چون اصلا صفحه ریفرش نمیشه.

    • وحید نصیری در ۱۳۹۲/۰۶/۰۷ ۱۱:۸
      - راه اول: زمانیکه View اصلی در برگیرنده آن نمایش داده می‌شود، کلیه فایل‌های متناظر را هم الحاق کنید تا به صورت خودکار در جزئی از صفحه آن، که بعدا به روز خواهد شد، نیز اعمال شود.
      - راه دوم: اصلا از RenderSection در یک partial view که قرار است Ajax ایی بارگذاری شود، استفاده نکنید. معمولی این‌ها را الصاق یا تعریف کنید. مثل تعاریف یک HTML ساده. یک نفر هم اینجا براش HtmlHelper نوشته ولی نکته اصلی یکی است؛ الصاق و تعریف معمولی فایل‌های مورد نیاز.
      - همچنین خود jQuery امکان بارگذاری اسکریپت‌ها را به صورت پویا دارد. زمانیکه complete عملیات Ajax ایی رخ‌داد، متد getScript عنوان شده را فراخوانی کنید. برای CSS هم به صورت زیر عمل کنید:
       $("<style></style>").appendTo("head").html(data);
  • مهمان در ۱۳۹۲/۰۶/۱۳ ۸:۵۴

    سلام

    مشکلی که من دارم این است که در صفحه دوتا PartialView دارم که هر کدام با استفاده jquery همان طور که شما توضیح داده اید لود می‌شوند ، اما برای رفرش کردن اونها مشکل دارم و نمی‌تونم به هر کدام شماره Page و سایر اطلاعات WebGrid چطوری ارسال کنم؟

    ممنون

  • مجتبی شایان فر در ۱۳۹۲/۰۶/۲۸ ۱۳:۴
    باسلام و خسته نباشید. 
    من مثال فوق را خط به خط اجرا کردم ولی partial view  نمایش داده نمیشه. فکر کنم مکان  قطعه کد Ajax  را اشتباه جایگذاری کردم اگه ممکنه راهنمائی می‌کنید که قطعه:
     $( function () {
$.ajax({
//مشخص کردن  اکشنی که باید فراخوانی شود
url: '/Home/Details' ,
contentType: 'application/html; charset=utf-8' ,
type: 'GET' ,
//نوع نتیجه بازگشتی
dataType: 'html'
 
})
.success( function (result) {
  //زمانی که کدهای سمت سرور بدون خطا اجرا شده اند
  //این قسمت فراخوانی می‌شود و نتیجه اکشن درون متغیر
  //result
  //قرار می‌گیرد
  $( '#sectionContents' ).html(result);
})
.error( function (xhr, status) {
  alert(xhr.responseText);
});
  });
    دقیقا کجای Index باید قرارداده بشه؟ سورس پروژه را هم ارسال می‌کردید خیلی خوب می‌شد .
    ممنون. 
  • منیژه محمدی در ۱۳۹۲/۰۸/۱۶ ۱۰:۴۴
    سلام
    من این مثال را قدم به قدم انجام دادم ولی خطای 404 میده و localhost.../home/Details را پیدا نمی‌کند.
    با اینکه من پارشیال ویو را در این تابع تعریف کردم ....
    • وحید نصیری در ۱۳۹۲/۰۸/۱۶ ۱۰:۵۴
      - برنامه را با فایرباگ دیباگ کنید تا مسیرهای درخواستی و خطاها را بهتر مشاهده کنید.
      - نباید آدرس‌ها را مستقیما و به صورت رشته‌ای تعریف کنید. اطلاعات بیشتر
      - در مثال عنوان شده «partial/_ProductList» این مورد به معنای وجود یک پوشه partial در اینجا است (تصویر اول). البته غیر الزامی است ولی برای باز تولید این مثال باید به آن دقت داشته باشید.
      • منیژه محمدی در ۱۳۹۲/۰۸/۱۷ ۱۱:۳۶
        با سلام
        من همه موارد را خیلی چک کردم از اینکه مسیر یا نام را درست داده باشم
        علت این بود که من یک [httppost] بالای ان ActionResult که میگفت پیدا نمیکنم اضافه کرده بودم برای همین ان را پیدا نمی‌کرد
        حالا من میخام یک سری اطلاعات  به این اکشن پست کنم اینطوری مشکل پیدا میکنم چطور میتونم ان را حل کنم ؟
        • وحید نصیری در ۱۳۹۲/۰۸/۱۷ ۱۱:۴۸
           type در $.ajax مثال اصلی بحث جاری، مساوی Get است؛ تبدیلش کنید به Post. کامنت اول این مطلب سه مثال مشابه دیگر را عنوان کرده. اکثر این‌ها از حالت Post استفاده کرده‌اند.
  • آروین در ۱۳۹۲/۰۸/۲۱ ۱۱:۱۹
    با عرض سلام و خسته نباشید
    این روش فرقش باjquery.load('url')        a            چیه؟
    • وحید نصیری در ۱۳۹۲/۰۸/۲۱ ۱۴:۲۴
      load در پشت صحنه از همین متد ajax استفاده می‌کند. تمام متدهای کمکی از این دست فقط محصور کننده تابع ajax اصلی جی‌کوئری هستند.
  • حامد رشنو در ۱۳۹۲/۱۲/۱۵ ۱۰:۳۶
    با سلام و تشکر
    لیست محصولات رو چطور باید پاس داد؟