پویا امینی پویا امینی
بارگزاری PartialView با استفاده از jQuery در زمان اجرا
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: یک دقیقه
مزیت استفاده از 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 پاس دهیم.
نتیجه اجرا به صورت زیر است:

‫۱۱ سال و ۲ ماه قبل، سه‌شنبه ۲۲ مرداد ۱۳۹۲، ساعت ۲۲:۵۰
۸۲۸۹
۱۶
MVCASP.Net MVCjQueryjQuery Ajax
مطالب مشابه
  • #
    مهمان مهمان
    ‫۱۱ سال و ۱ ماه قبل، پنجشنبه ۷ شهریور ۱۳۹۲، ساعت ۱۴:۳۶
    یک سوال. من یک پارشال ویو دارم که خودش نیاز داره به یه سری کد‌های جاوا اسکریپت و استایل . 
    من پارشال ویو هارو با اجکس لود میکنم . چطوری اون فایل‌های استایل و غیرشم لود کنم ؟.  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            چیه؟
  • #
    حامد رشنو حامد رشنو
    ‫۱۰ سال و ۷ ماه قبل، پنجشنبه ۱۵ اسفند ۱۳۹۲، ساعت ۱۴:۰۶
    با سلام و تشکر
    لیست محصولات رو چطور باید پاس داد؟