با تعدادی از کامپوننت‌های Bootstrap در مطلب «نگاهی به اجزای تعاملی Twitter Bootstrap» آشنا شدید. یکی دیگر از این افزونه‌ها، Typeahead نام دارد که در حقیقت نوعی Autocomplete text box است. در ادامه قصد داریم نحوه استفاده از آن‌را در ASP.NET MVC بررسی کنیم.
استفاده‌ی استاتیک از افزونه Typeahead
منظور از استفاده‌ی استاتیک، مشخص بودن آرایه عناصر و هچنین درج آن به صورت html encoded در صفحه است. برای این منظور، کنترلر برنامه چنین شکلی را خواهد داشت:
در اینجا یک آرایه با تعداد عناصر مشخص، تبدیل به رشته JSON معادل آن شده و توسط ViewBag.JsonString به View ارسال میشود.
View متناظر با آن به نحو ذیل با مشخص سازی نوع data-provide (تا به کتابخانه‌ی جاوا اسکریپتی همراه bootstrap اعلام کند از چه افزونه‌ای در اینجا قرار است استفاده شود)، منبع داده data-source و حداکثر تعداد آیتم ظاهر شونده data-items، می‌تواند طراحی شود:
به این ترتیب، یک چنین خروجی در صفحه درج میشود:
همانطور که ملاحظه می‌کنید دقیقا data-source تهیه شده مطابق نیاز خاص این افزونه، html encoded است. به علاوه هر جایی در htmlAttributes صفحه از under line استفاده شده، در این سمت به صورت خودکار به - ترجمه گردیده است.
اگر هم بخواهیم برای آن یک Html Helper درست کنیم، میتوان به نحو ذیل عمل کرد:
استفاده پویا و Ajax ایی از افزونه Typeahead
اگر بخواهیم data-source را به صورت پویا، هربار از بانک اطلاعاتی دریافت و ارائه دهیم، نیاز به کمی اسکریپت نویسی خواهد بود:
در این حالت، کدهای اکشن متدی که یک عبارت، یا قسمتی از آن را از طریق پارامتر term دریافت و خروجی JSON مناسبی را ارائه می‌کند، همانند متد GetNames فوق خواهد بود.
سپس در تعاریف View، قسمت data-source مرتبط با TextBox حذف و از طریق فراخوانی مستقیم کدهای افزونه typeahead مقدار دهی می‌گردد:
در اینجا توسط متد getJSON کتابخانه jQuery، مقدار عبارت وارد شده در TextBox جستجو، به آدرس اکشن متد GetNames ارسال و سپس حاصل به source افزونه typeahead انتساب داده میشود.
استفاده‌ی استاتیک از افزونه Typeahead
منظور از استفاده‌ی استاتیک، مشخص بودن آرایه عناصر و هچنین درج آن به صورت html encoded در صفحه است. برای این منظور، کنترلر برنامه چنین شکلی را خواهد داشت:
using System.Web.Mvc;
using System.Web.Script.Serialization;
namespace Mvc4TwitterBootStrapTest.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
var array = new[]
{
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and/or Barbuda"
};
ViewBag.JsonString = new JavaScriptSerializer().Serialize(array);
return View();
}
}
}View متناظر با آن به نحو ذیل با مشخص سازی نوع data-provide (تا به کتابخانه‌ی جاوا اسکریپتی همراه bootstrap اعلام کند از چه افزونه‌ای در اینجا قرار است استفاده شود)، منبع داده data-source و حداکثر تعداد آیتم ظاهر شونده data-items، می‌تواند طراحی شود:
@{
ViewBag.Title = "Index";
}
<h2>
Typeahead</h2>
@Html.TextBox("search", null, htmlAttributes:
new
{
autocomplete = "off",
data_provide = "typeahead",
data_items = 8,
data_source = @ViewBag.JsonString
})
<input autocomplete="off" data-items="8" data-provide="typeahead" data-source="["Afghanistan","Albania","Algeria","American Samoa","Andorra","Angola","Anguilla","Antarctica","Antigua and/or Barbuda"]" id="search" name="search" type="text" value="" />
اگر هم بخواهیم برای آن یک Html Helper درست کنیم، میتوان به نحو ذیل عمل کرد:
public static MvcHtmlString TypeaheadFor<TModel, TValue>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TValue>> expression,
IEnumerable<string> source,
int items = 8)
{
var jsonString = new JavaScriptSerializer().Serialize(source);
return htmlHelper.TextBoxFor(
expression,
new
{
autocomplete = "off",
data_provide = "typeahead",
data_items = items,
data_source = jsonString
}
);
}استفاده پویا و Ajax ایی از افزونه Typeahead
اگر بخواهیم data-source را به صورت پویا، هربار از بانک اطلاعاتی دریافت و ارائه دهیم، نیاز به کمی اسکریپت نویسی خواهد بود:
using System;
using System.Linq;
using System.Web.Mvc;
using System.Web.Script.Serialization;
namespace Mvc4TwitterBootStrapTest.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public JsonResult GetNames(string term)
{
var array = new[]
{
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and/or Barbuda"
};
var results = array.Where(n =>
n.StartsWith(term, StringComparison.OrdinalIgnoreCase));
return Json(results.ToArray(), JsonRequestBehavior.AllowGet);
}
}
}سپس در تعاریف View، قسمت data-source مرتبط با TextBox حذف و از طریق فراخوانی مستقیم کدهای افزونه typeahead مقدار دهی می‌گردد:
@{
ViewBag.Title = "Index";
var url = Url.Action("GetNames", "Home");
}
<h2>
Typeahead</h2>
@Html.TextBox("search", null, htmlAttributes:
new
{
autocomplete = "off",
data_provide = "typeahead",
data_items = 8
})
@section JavaScript
{
<script type="text/javascript">
$(function () {
$('#search').typeahead({
source: function (term, process) {
return $.getJSON('@url', { term: term }, function (data) { return process(data); });
}
});
});
</script>
}
