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

پر کردن خودکار TextBox با استفاده از jQuery در ASP.NET MVC
0 0
پر کردن خودکار TextBox با استفاده از jQuery در ASP.NET MVC

در این مقاله نحوه پر کردن اتوماتیک TextBox  با استفاده از Jquery  در ASP.NET MVC را توضیح میدهیم.

با استفاده از Entity Framework به پایگاه داده متصل می شویم سپس داده ها را در TextBox  با استفاده از JQuery  نمایش می دهیم.

Database

توجه : شما می توانید جدول پایگاه داده SQL را با کلیک روی لینک دانلود زیر دانلود کنید.فایل SQL را دانلود کنید

اولین گام این است که یک برنامه ASP.NET MVC ایجاد کنید و آن را با پایگاه داده Northwind با استفاده از Entity Framework متصل کنید .

Controller

کنترلر شامل سه روش عمل است.

روش  GETدر داخل این روش داده یا داده ها، به View بازگردانده می شود.

روش دستکاری خودکار تکمیل jQuery

این روش یک پارامتر را  به عنوان پیشوند می پذیرد. و با استفاده از جستجو در پایگاه داده یک لیست از افرادی را که شامل این پیشوند می باشد را  با استفاده از JSON برمیگرداند.

روش POST

این روش ارسال فرم را مدیریت می کند و CustumerName و CustomerId را با استفاده از شی 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 + " کد مشتری: " + CustomerId;
            return View();
        }
    }

View

 View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.

 ActionName - نام اکشن در این مورد Index است.

 ControllerName - نام کنترل کننده در این مورد  Home است.

 FormMethod – روش  فرم را یعنی GET یا POST مشخص می کند. در این مورد POST تنظیم خواهد شد.

فرم شامل سه عنصر یعنی یک TextBox اجرا شده به عنوان AutoComplete، یک فیلد مخفی (برای صرفه جویی در قسمت Value of Item Autocomplete) و یک دکمه Submit.

افزونه AutoComplete جی کوئری بر روی TextBox اعمال شده است و آدرس افزونه بر روی روش Action AutoComplete تنظیم شده است.

@{
    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;
        }
    </style>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
          rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#txtCustomer").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#hfCustomer").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>
    @using (Html.BeginForm("Index""Home"FormMethod.Post))
    {
        <input type="text" id="txtCustomer" name="CustomerName" />
        <input type="hidden" id="hfCustomer" name="CustomerId" />
        <br /><br />
        <input type="submit" id="btnSubmit" value="Submit" />
        <br /><br />
        @ViewBag.Message
    }
</body>
</html>


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

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