توضیحات و دانلود

Bootstrap AutoComplete برای یک Textbox با استفاده از TypeAhead با jQuery در ASP.NET MVC
0 0
Bootstrap AutoComplete برای یک Textbox با استفاده از TypeAhead با jQuery در ASP.NET MVC

در این مقاله قصد داریم پیاده سازی یک Bootstrap AutoComplete برای یک Textbox را با استفاده از TypeAhead در jQuery انجام دهیم.

textbox به صورت خودکار با رکوردهایی از دیتابیس با استفاده از  jQuery AJAX  پر می شود. 

در اینجا از دیتابیس  Northwind  استفاده میکنیم.

یک پروژه  ASP.net MVC ساخته . در آن صفحه یک TextBox ، یک  HiddenField و یک Button قرار می دهیم. افزونه  Bootstrap jQuery TypeAhead AutoComplete در Textbox  بکار گرفته می شود. یک فراخوانی jQuery AJAX  ایجاد میکنیم که لیستی از مشتریان را به AutoComplete  بر میگرداند.

داده های دریافت شده از سرور درون jQuery AJAX پردازش می شوند. برای هر آیتم دریافت شده از لیست آیتم ها یک loop  اجرا می شود و یک شیء با نام و کد نمایش داده می شود. زمانی که یک آیتم از لیست AutoComplete انتخاب می شود رویداد Updater  باعث می شود کد آیتم انتخاب شده در HiddenField  ذخیره شود.

Controller
کنترلر شامل سه روش عمل است.
روش  GET
در داخل این روش اقدام، به سادگی View بازگردانده می شود.
روش  jQuery
این روش یک پارامتر به نام "پیشوند" را می پذیرد. هنگامی که این روش توسط افزونه TypeAhead جی کوئری قابل دسترسی است، سوابق جدول مشتریان پایگاه Northwind با استفاده از چارچوب Entity   استخراج می شود.
سوابق استخراج شده پس از آن فیلتر شده و به View در قالب JSON بازگشت داده میشوند.
روش  POST
این روش ارسال فرم را مدیریت می کند و نام مشتری و CustomerId از مورد انتخاب شده را در AutoComplete جی کوئری با استفاده از شی ViewBag نمایش می دهد.

public class HomeController : Controller
   {
       // GET: Home
       public ActionResult Index()
       {
           return View();
       }
 
       [HttpPost]
       public JsonResult AutoComplete(string prefix)
       {
           NorthwindEntities entities = new NorthwindEntities();
           var customers = (from customer in entities.Customers
                            where customer.ContactName.StartsWith(prefix)
                            select new
                            {
                                label = customer.ContactName,
                                val = customer.CustomerID
                            }).ToList();
 
           return Json(customers);
       }
 
       [HttpPost]
       public ActionResult Index(string CustomerName, string CustomerId)
       {
           ViewBag.Message = "CustomerName: " + CustomerName + " CustomerId: " + CustomerId;
           return View();
       }
   }

View
Viewشامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام اکشن در این مورد نام Index است.
ControllerName - نام کنترل کننده. در این مورد نام  Home است.
FormMethod - این روش فرم را یعنی GET یا POST مشخص می کند. در این مورد به POST تنظیم خواهد شد.
فرم شامل سه عنصر یعنی یک TextBox (اجرا شده به عنوان AutoComplete)، یک فیلد مخفی (برای صرفه جویی در مقدار ارزش از بخش تکمیل خودکار) و یک دکمه ارسال.
پلاگین AutoComplete jQuery TypeAhead بوت استرپ به TextBox اعمال شده است. یک  ارتباط جی کوئری AJAX به صورت خودکار به کنترلر انجام می شود و لیست مشتریان به عنوان منبع داده ها به AutoComplete جی کوئری TypeAhead بوت استرپ عمل می کند .
داده های دریافت شده از سرور در داخل رویداد AJAX جی کوئری پردازش می شود. یک حلقه برای هر مورد دریافت شده در لیست اجرا می شود و سپس یک شی با بخش متن در property name و part value در property id باز می شود.
هنگامی که یک مورد از فهرست  Bootstrap jQuery TypeAhead AutoComplete انتخاب شد ، رویداد updater فعال می شود که باعث می شود که شناسه مورد انتخاب شده در عنصر فیلد پنهان ذخیره شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-familyArial;
            font-size10pt;
            padding10pt;
        }
    </style>
</head>
<body>
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
          media="screen" />
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
    <link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
    <script type="text/javascript">
        $(function () {
            $("#txtCustomer").typeahead({
                hint: true,
                highlight: true,
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            items = [];
                            map = {};
                            $.each(data, function (i, item) {
                                var id = item.val;
                                var name = item.label;
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height""auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                updater: function (item) {
                    $('#hfCustomer').val(map[item].id);
                    return item;
                }
            });
        });
    </script>
    @using (Html.BeginForm("Index""Home", FormMethod.Post))
    {
        <input type="text" id="txtCustomer" name="CustomerName" class="form-control" autocomplete="off" style="width:300px" />
        <input type="hidden" id="hfCustomer" name="CustomerId" />
        <br />
        <input type="submit" id="btnSubmit" value="Submit" />
        <br />
        <br />
        @ViewBag.Message
    }
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :