ASP.NET MVC AutoComplete TextBox Menggunakan jQuery UI AutoComplete Dan Entity Framework

ASP.NET MVC AutoComplete TextBox Menggunakan jQuery UI AutoComplete Dan Entity Framework

Halo dan Selamat Malam!

Posting ini menunjukkan cara menerapkan AutoComplete TextBox di ASP.NET MVC menggunakan jQuery UI dan Entity Framework. Saya telah menerapkan konsep ini ke beberapa proyek saya dan telah membantu klien dan pengguna yang menggunakan aplikasi tersebut. Cukup basa-basi dan mari kita mulai hanya dengan mengikuti langkah-langkah di bawah ini.
1. Buat proyek ASP.NET MVC dan tambahkan paket NuGet untuk Bootstrap dan jQuery UI.
2. Tambahkan model Entity Framework ke proyek menggunakan salah satu database sampel Microsoft bernama AdventureWorks.
3. Di _Layout.cshtml Anda, pastikan untuk mereferensikan pustaka jQuery di dalam tag head sehingga jQuery UI akan berfungsi seperti yang diharapkan.

Bacaan Lainnya

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</body>
</html>

4. Di kelas HomeController Anda, buat tampilan untuk metode Index (). Kami akan menambahkan kode JavaScript dan membuat perubahan yang diperlukan pada UI nanti. Berikutnya adalah membuat dua metode yang mengembalikan data jSON ke UI. Metode pertama mengambil nama negara dari database yang akan diisi untuk dropdown di fitur AutoComplete. Metode kedua akan mengambil detail spesifik negara setelah pengguna selesai memilih negara yang dipicu oleh peristiwa blur.

using System;
using System.Linq;
using System.Web.Mvc;
using AutocompletejQueryUI.Models;

namespace AutocompletejQueryUI.Controllers
{
public class HomeController : Controller
{
private static AdventureWorksEntities _context;

//
// GET: /Home/
public ActionResult Index()
{
return View();
}

[HttpPost]
public JsonResult GetCountries(string prefixText)
{
_context = new AdventureWorksEntities();

var result = (from country in _context.CountryRegions.AsEnumerable()
where country.Name.ToLower().StartsWith(prefixText, StringComparison.OrdinalIgnoreCase)
select country.Name);

return Json(result.ToArray(), JsonRequestBehavior.AllowGet);
}

[HttpPost]
public JsonResult GetCountryInfo(string Country)
{
_context = new AdventureWorksEntities();

var result = (from country in _context.CountryRegions.AsEnumerable()
where country.Name.ToLower().Equals(Country.ToLower())
select new
{
country.Name,
country.CountryRegionCode
}).FirstOrDefault();

if (result != null)
return Json(result, JsonRequestBehavior.AllowGet);

return Json(new EmptyResult(), JsonRequestBehavior.AllowGet);
}
}
}

5. Di halaman Index.cshtml Anda, tambahkan referensi skrip ke jquery-ui.js dan referensi konten ke jquery-ui.css. Inisialisasi textbox dengan fungsi autocomplete () sehingga ketika pengguna mengetik beberapa karakter ke dalam textbox, ia akan mengirim permintaan POST ke pengontrol yang akan mengambil negara yang dimulai dengan karakter input dan mengembalikan catatan negara tersebut ke ditampilkan di bawah kotak teks sebagai kontrol daftar dropdown. Jika pengguna memutuskan untuk meninggalkan kotak teks, peristiwa blur dipicu yang kemudian mengirimkan POST ke pengontrol yang meneruskan input pengguna sebagai parameter. Setelah kriteria pencarian ditemukan, itu akan mengembalikan rincian spesifik sebagai hasil. Jika tidak, hasil kosong dikembalikan.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {

//autocomplete function
$('[id$=Countries]').autocomplete({
source: function (requst, response) {
var param = { prefixText: $('[id$=Countries]').val() };
$.ajax({
url: "Home/GetCountries",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data != null) {
response($.map(data, function (item) {
return {
label: item,
value: item
}
}));
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});

//capture selected country
$('[id$=Countries]').blur(function (event) {
var country = $(this).val();
$.ajax({
url: "Home/GetCountryInfo",
data: '{ Country: "' + country + '"}',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data != null) {
if (data.Name !== undefined && data.CountryRegionCode !== undefined) {
var c_name = data.Name;
var c_code = data.CountryRegionCode;
alert('Code: ' + c_code + ', Name: ' + c_name);
}
else {
alert('Search yield empty result.');
}
}
},
error: function (a, b, c) {
alert("Error in Retrieving Record!");
}
});
});
});
</script>
</head>
<body>
<h2>Index</h2>
@Html.TextBox("Countries")
</body>
</html>

Keluaran

Editor: NEXCloud Team

Pos terkait