فرض کنید بخواهیم نمایش رای دهنده‌های یک مطلب را با popover بوت استرپ 3 نمایش دهیم:
مرحله‌ی اول: اکشن متدی که یک partial view را باز می‌گرداند
فرض کنید اکشن متدی که لیست کاربران رای داده‌ی به یک مطلب را باز می‌گرداند، چنین شکلی را دارد:
در اینجا لیستی دریافت و سپس به partial view ارسال میشود. در ادامه این Partial view نیز به صورت ذیل اطلاعات را رندر میکند:
در اینجا از یک ویژگی سفارشی data-* به نام data-title نیز استفاده کرده‌ایم. متنی که در آن قرار می‌گیرد، به صورت عنوان popover ظاهر خواهد شد.
مرحله‌ی دوم: دریافت اطلاعات partial view با استفاده از jQuery Ajax و سپس درج آن در یک popover
می‌خواهیم با حرکت ماوس بر روی دکمه‌ی سفارشی ذیل، یک popover ظاهر شده و محتوای خودش را از اکشن متد فوق تامین کند.
در این مثال، چند ویژگی سفارشی data-* دیگر را نیز تعریف کرده‌ایم تا نیازی به تعریف سراسری متغیرهای جاوا اسکریپتی نباشد. برای مثال data-param1 یک پارامتر دلخواه است و data-popover-content-url به آدرس اکشن متدی اشاره میکند که قرار است partial view مدنظر را رندر کند.
در ادامه نحوه‌ی استفاده‌ی از این ویژگی‌ها را در jQuery Ajax مشاهده می‌کنید:
در این مثال تمام المان‌هایی که دارای data-popover-content-url هستند، تحت نظر قرار میگیرند. سپس اگر ماوس به محدوده‌ی آنها وارد شد، مقدار ("this).data("popover-content-url)$ مساوی آدرسی است که قرار است اطلاعات را از سرور دریافت کند. به همین جهت از آن برای استفاده‌ی در متد ajax کمک گرفته شده‌است.
خروجی partial view به صورت json نیست. بنابراین باید اطلاعات نهایی آن‌را در callback ویژه‌ی complete دریافت کرد. مقدار data دریافتی، معادل اطلاعات رندر شده‌ی partial view است. به همین جهت آن‌را به خاصیت content متد popver ارسال می‌کنیم. همچنین چون خروجی patrtial view به همراه html است، نیاز است خاصیت html متد popover نیز به true تنظیم شود. در خاصیت title، نحوه‌ی دسترسی به مقدار data-title تنظیم شده‌ی در partial view را مشاهده می‌کنید.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
RemotePopOver.zip
مرحله‌ی اول: اکشن متدی که یک partial view را باز می‌گرداند
فرض کنید اکشن متدی که لیست کاربران رای داده‌ی به یک مطلب را باز می‌گرداند، چنین شکلی را دارد:
public ActionResult RenderResults(string param1)
{
var users = new[]
{
new User{ Id = 1, Name = "Test 1", Rating = 3},
new User{ Id = 2, Name = "Test 2", Rating = 4},
new User{ Id = 3, Name = "Test 3", Rating = 5}
};
return PartialView("_RenderResults", model: users);
} @using RemotePopOver.Models
@model IList<User>
<ul id="ratings1" data-title="Ratings" class="list-unstyled">
@foreach (var user in Model)
{
<li>
@user.Name
<span class="badge pull-right">@user.Rating</span>
</li>
}
</ul> مرحله‌ی دوم: دریافت اطلاعات partial view با استفاده از jQuery Ajax و سپس درج آن در یک popover
می‌خواهیم با حرکت ماوس بر روی دکمه‌ی سفارشی ذیل، یک popover ظاهر شده و محتوای خودش را از اکشن متد فوق تامین کند.
<span id="remotePopover1"
aria-hidden="true"
data-param1="test"
data-popover-content-url="@Url.Action("RenderResults", "Home")"
class="glyphicon glyphicon-info-sign btn btn-info"></span> در ادامه نحوه‌ی استفاده‌ی از این ویژگی‌ها را در jQuery Ajax مشاهده می‌کنید:
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
$('body').on('mouseenter', 'span[data-popover-content-url]', function () {
var el = $(this);
$.ajax({
type: "POST",
url: $(this).data("popover-content-url"),
data: JSON.stringify({ param1: $(this).data("param1") }),
contentType: "application/json; charset=utf-8",
dataType: "json",
// controller is returning a simple text, not json
complete: function (xhr, status) {
var data = xhr.responseText;
if (status === 'error' || !data) {
el.popover({
content: 'Error connecting server!',
trigger: 'focus',
html: true,
container: 'body',
placement: 'auto',
title: 'Error!'
}).popover('show');
}
else {
el.popover({
content: data,
trigger: 'focus',
html: true,
container: 'body',
placement: 'auto',
title: $('<html />').html(data).find('#ratings1:first').data('title')
}).popover('show');
}
}
});
}).on('mouseleave', 'span[data-popover-content-url]', function () {
$(this).popover('hide');
});
});
</script>
} خروجی partial view به صورت json نیست. بنابراین باید اطلاعات نهایی آن‌را در callback ویژه‌ی complete دریافت کرد. مقدار data دریافتی، معادل اطلاعات رندر شده‌ی partial view است. به همین جهت آن‌را به خاصیت content متد popver ارسال می‌کنیم. همچنین چون خروجی patrtial view به همراه html است، نیاز است خاصیت html متد popover نیز به true تنظیم شود. در خاصیت title، نحوه‌ی دسترسی به مقدار data-title تنظیم شده‌ی در partial view را مشاهده می‌کنید.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
RemotePopOver.zip
