پر کردن خودکار TextBox با استفاده از jQuery در ASP.NET MVC
در این مقاله نحوه پر کردن اتوماتیک TextBox با استفاده از Jquery در ASP.NET MVC را توضیح میدهیم.
با استفاده از Entity Framework به پایگاه داده متصل می شویم سپس داده ها را در TextBox با استفاده از JQuery نمایش می دهیم.
Database
اولین گام این است که یک برنامه 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-family: Arial;
font-size: 10pt;
}
</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>