برای شروع کار یک پروژه از نوع epmty mvc ایجاد نمایید سپس یک Controller با نام Home ایجاد کنید وبرای ویوی Action index آن کدهای زیر را درج نمایید.
دقت نمایید jquery به برنامه اضافه شده باشد.
@{
ViewBag.Title = "Index";
}
<h2>load partial view with jquery --->>> fekre-bekr.ir</h2>
<input type="button" value="کلیک کنید" id="btnload" onclick="loadData()" />
<div id="result" style="background-image:url('~/images/loader.gif'"></div>
<script>
function loadData()
{
$("#btnload").val("لطفا منتظر بمانید");
$("#btnload").attr('disabled', 'disabled');
$.ajax({
url: '/Home/AddPartialView',
type: 'POST',
dataType: 'Html',
// data: ,
error: function (err) {
alert(err.status);
}
}).done(function (data) {
$('#result').html(data);
$("#btnload").val("کلیک کنید");
$("#btnload").removeAttr('disabled');
});
// Loading End
}
</script>
یک Action با نام AddPartialView در کنترلر Home بصورت زیر ایجاد نمایید
public ActionResult AddPartialView()
{
System.Threading.Thread.Sleep(2000);
return PartialView("_PartialView");
}
پارشیال ویوی خود را به نام _PartialView در پوشه Shared پروژه خود ایجاد نمایید و کدهای آن را بصورت زیر ویرایش نمایید.
<h1>this is partial view </h1>
<span> learning programming in <b> fekre-bekr.ir </b></span>
برنامه خود را اجرا نمایید و بر روی دکمه کلیک نمایید در این حالت پارشیال ویوی شما بدون refresh شدن صفحه نمایش داده خواهد شد.
فایلهای HomeController و _PartialView درقسمت فایلهای ضمیمه شده قرار دهده شد و میتوانید دانلود نمایید.