Tải partialview khi hover với bootstrap

Sau loạt bài về CSDL thì đợt này mình có đi học 1 lớp dạy về MVC  để tìm hiểu thêm về công nghệ chứ mình ngồi nhà có đọc qua nhưng chả chịu nào nên học hành cũng chả ra đâu :)) Đầu tư tí tiền cho có động lực để phấn đâú vậy :3

Ở bài này mình xin chia sẻ với các bạn cách để load partialview trong MVC sử dụng bằng Ajax cùng với tính năng popover trong Bootstrap để mọi người xem. Đợt mấy tuần trước mình làm tính năng này search trên Google thấy ít bài quá phải cóp tứ lung tung mới chạy được đầy đủ tính năng nên tổng hợp lại cho mọi người dễ nắm bắt.

Tính năng này thì tương tự như mấy cái ở Facebook khi bạn di chuột qua mấy cái avatar của người dùng thì nó hiển thị lên thông tin chi tiết của người dùng ấy. Các bạn nhìn hình bên dưới là hiểu

Untitled

Thực ra tính năng này cơ chế là khi mình hover qua cái ảnh thì sẽ thực hiện 1 lời gọi ajax đến server rồi server sẽ render 1 cái partialview với mã HTML rồi gửi trả về client. Client sử dụng jquery để hiển thị mã này lên.

Còn bây giờ thì mình nói chi tiết cách làm đối với Bootstrap

<a href=”#” title=”Popover” data-poload=”@Url.Action(“Popover”, “Home”)”>
<p class=”lead”>ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
</a>

Bạn sử dụng data attribute đối với thẻ a và sử dụng nó để gọi HomeController cùng với Action Popover thông qua Ajax

Trong controller thì đơn giản chỉ là trả lại 1 partialview thôi

public ActionResult Popover()
{
      return PartialView(“_Popover”);
}

Partialview này mình cũng đơn giản chỉ là để hiển thị 1 đoạn paragraph nho nhỏ

<p>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
</p>

Các bạn khi tùy biến lại có thể truyền thêm tham số vào cho Action như id người dùng, id bài viết gì đó.  Trong action thì lấy ra model rồi để truyền vào PartialView cho hiển thị thêm thông tin.

Khi server render partialview về cho client thì ở client cần có đoạn scripts sau để khi mình hover qua nó sẽ hiển thị partialview lên. Đoạn này sử dụng cái thuộc tính popover của bootstap.

$(‘*[data-poload]’).hover(function () {
         var e = $(this);
         e.off(‘hover’);
         $.get(e.data(‘poload’), function (d) {
                  e.popover({
                      content: d,
                      container: ‘body’
                }).popover(‘show’);
           });
});

Tuy nhiên nếu bạn sử dụng đoạn scripts này thì đoạn mã HTML trả về sẽ được encode và hiển thị ở trình duyệt nên các bạn nhớ thêm đoạn html: true nhé

e.popover({
    content: d,
    html: true,
     container: ‘body’
}).popover(‘show’);

Đến bây giờ bạn chạy chương trình lên là được.

Untitled

Tuy nhiên tưởng xong mà hóa ra lại chưa xong :)) đó là dù bạn có lăn chuột hay di đi chỗ khác cái popover nó lại không tắt đi =)) Cùi thế không biết. Chính vì vậy các bạn cần nhét thêm đoạn scripts sau

$(‘body’).on(‘click’, function (e) {
     if ($(e.target).data(‘toggle’) !== ‘popover’
           && $(e.target).parents(‘.popover.in’).length === 0) {
                $(‘*[data-poload]’).popover(‘hide’);
             }
});

Đoạn scripts này có ý là cứ ấn vào bất cứ chỗ nào trong trang (đoạn $(‘body’)) mà không phải thằng popover thì ẩn nó đi.

Sourcecode thì các bạn có thể tai ở github của mình nhé :3 Địa chỉ là https://github.com/hoangnl/Popover

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s