فرض کنید بخواهیم نمایش رای دهنده‌های یک مطلب را با
popover بوت استرپ 3 نمایش دهیم:
Popover بوت استرپ برای کار با منابع remote طراحی نشده‌است و نیاز است توابع API آن‌را به همراه jQuery Ajax ترکیب کرد تا به تصویر فوق رسید.
مرحله‌ی اول: اکشن متدی که یک 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);
}
در اینجا لیستی دریافت و سپس به partial view ارسال می‌شود. در ادامه این Partial view نیز به صورت ذیل اطلاعات را رندر میکند:
@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>
در اینجا از یک ویژگی سفارشی data-* به نام data-title نیز استفاده کرده‌ایم. متنی که در آن قرار می‌گیرد، به صورت عنوان popover ظاهر خواهد شد.
مرحله‌ی دوم: دریافت اطلاعات 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>
در این مثال، چند ویژگی سفارشی data-* دیگر را نیز تعریف کرده‌ایم تا نیازی به تعریف سراسری متغیرهای جاوا اسکریپتی نباشد. برای مثال data-param1 یک پارامتر دلخواه است و data-popover-content-url به آدرس اکشن متدی اشاره میکند که قرار است partial view مدنظر را رندر کند.
در ادامه نحوه‌ی استفاده‌ی از این ویژگی‌ها را در 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>
}
در این مثال تمام المان‌هایی که دارای 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
