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

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

آپدیت روزانه

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

نیازهای روز

بارگزاری PartialView با استفاده از Ajax در ASP.Net MVC

مزیت استفاده از PartialView ماژولار کردن پروژه است. مثلا در صفحه تعداد خبرها محدود به چند خبر است که برای نمایش بقیه خبرها می‌توان از PartialView و بارگزاری با استفاده از Ajax پرداخت یا اینکه بخشی از صفحه بدون عمل بارگزاری مجدد کل صفحه، آن بخش را دوباره از سرور خواند.

در این پست قصد دارم به نحوه بارگذاری یک PartialView در ASP.Net MVC با استفاده از Ajax بپردازم.

مقدمه:

در این پست با استفاده از دو روش زیر به نحوه بارگزاری PartialView با استفاده از Ajax خواهیم پرداخت:

  1. بارگزاری با استفاده از  Ajax.BeginForm Helper.
  2. بارگزاری با استفاده از متد Ajax.

برای شروع نیاز است یک پروژه خالی ASP.Net MVC ایجاد و اکشن Index در HomeController ساخته شود و در نهایت کتابخانه jQuery پیوست گردد.

بارگزاری با استفاده از Ajax.BeginForm Helper:

Ajax.BeginForm در ASP.Net MVC از jQuery Ajax برای ارسال مقادیر به سرور استفاده می‌کند که در زیر یک مثال آورده شده است:

در صفحه Layout می‌بایست کتابخانه‌های زیر لینک داده شود:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-migrate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

در فایل web.config لازم است دستور زیر در بخش appsettings اضافه گردد:

<appSettings>
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

 کدهای زیر مربوط به ایجاد یک فرم است که با استفاده از Helper در ASP.Net MVC پیاده سازی شده است. پارامتر اول نام اکشن، پارامتر دوم نام کنترلر، پارامتر سوم پیاده سازی Ajax option و پارامتر آخر Styleهای مربوط به فرم در تشکیل می‌دهد:

@using (Ajax.BeginForm("LoadData", "Home", new AjaxOptions() { OnSuccess = "Result"}, new { }))
{
    <input type="submit" value="Load From Server" />
}

 اکشن LoadData در HomeController:

/// <summary>
///
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult LoadData()
 {
   // your code.
   return PartialView("_Page/_Alert");
 }

 متد LoadData :

function Result(data) {
    $('#result').html(data);
}

PartialView:

<h1>Hi</h1>
<p>@DateTime.Now</p>

vs-solution explorer

 

 

پروژه را اجرا کنید:

 

vs-run project

 

در صورتی که کاربر، بر روی دکمه کلیک نماید یک درخواست به سرور ارسال شده و نتیجه درخواست با استفاده از متد جاوااسکریپت Result نمایش داده میشود:

vs result

 

بارگزاری با استفاده از متد Ajax:

 کد HTML:

<div class="form-group">
    <input class="btn btn-success" data="{}" type="button" load-partial="/Home/LoadData" value="Load From Server with Ajax method" />
</div>

 اکشن متد:

/// <summary>
///
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult LoadData()
 {
   // your code.
   return PartialView("_Page/_Alert");
 }

 کد جاوااسکریپت:

<script>
        // Custom
        function Result(data) {
            $('#result').html(data);
        }
        //---------------------------------------------------
        function Sendobj(model, data, success, error, dataType, contentType) {
            if (dataType == null) {
                dataType = "json";
            }
            $.ajax({
                type: "POST",
                url: model,
                data: data,
                contentType: "application/html; charset=utf-8",
                dataType: "html",
                success: function (data) {
                    success(data);
                },
                error: function (data) {
                    error(data);
                }
            });
}
$('[load-partial]').on("click", function () {
    Sendobj($(this).attr('load-partial'), $(this).attr('data'), function (data) { $('#result').html(data); }, function (data) { return; });
});

 

ajax- load partialview

 

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

...

امید نصری

0 نظر:

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


You must log on to comment.