All may be familiar with auto-suggest control in ASP.NET MVC. In this article we will look into creating an auto-suggest which selects the item-name when code is entered or item-name is entered. There may be occasions when item code is known sometimes or name may be known. By using this technique you can apply both.
Introduction
All may be familiar with auto-suggest control in ASP.NET MVC. In this article we will look into creating an auto-suggest which selects the item-name when code is entered or item-name is entered. There may be occasions when item code is known sometimes or name may be known. By using this technique you can apply both.
Objective
Develop an Auto suggest in MVC3 which suggests on entering code and name of an item
Using the code
We can use jquery to autosuggest items and there are two autosuggest controls, one for item and other for code
by entering code in code autosuggest itemname will be displayed in itemname textbox
Block of code should be set style as "Code" like below.
// Lay out Page
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>Multilevel Autosuggest </h1>
</div>
</div>
<div id="main">
@RenderBody()
<div id="footer">
</div>
</div>
</div>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
@RenderSection("JavaScript", false)
</body>
</html>
//-----
//Index Page
//---------------
@{ ViewBag.Title = "Using MultiAutoSuggest"; }
<table>
<tr>
<td>
@Html.TextBox("ItemCode", "", new { @style = "width:75px;outline: 2px solid #FBEC88" })
</td>
<td style="width:320px">
@Html.TextBox("ItemName", "", new { @style = "width:320px;outline: 2px solid #FBEC88" })
</td>
</tr>
</table>
@section JavaScript {
<script type="text/javascript">
function CheckBrowser(e) {
if (window.event)
key = window.event.keyCode; //IE
else
key = e.keyCode; //firefox
return key;
}
$(document).ready(function () {
$("#ItemName").autocomplete({
search: function (event, ui) {
var key = CheckBrowser(event);
if (key == 13)
if (key == 13) {
return true;
}
else
return false;
},
source: function (request, response) {
$.ajax({
url: '@Url.Action("ItemAutoSuggestByName")',
data: { autoSuggestText: request.term },
dataType: 'json',
type: 'POST',
success: function (data) {
response(data); // You may have to perform post-processing here depending on your data.
}
});
},
select: function (event, ui) {
$('#ItemCode').val(ui.item ? ui.item.code : 'Select');
$('#ItemName').val(ui.item ? ui.item.value : 'Select');
}
});
$("#ItemCode").autocomplete({
search: function (event, ui) {
var key = CheckBrowser(event);
if (key == 13)
if (key == 13) {
return true;
}
else
return false;
},
source: function (request, response) {
$.ajax({
url: '@Url.Action("ItemAutoSuggestByCode")',
data: { autoSuggestText: request.term },
dataType: 'json',
type: 'POST',
success: function (data) {
response(data); // You may have to perform post-processing here depending on your data.
}
});
},
select: function (event, ui) {
$('#ItemCode').val(ui.item ? ui.item.code : 'Select');
$('#ItemName').val(ui.item ? ui.item.code : 'Select');
}
});
});
</script>
}
//Controller
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public DataTable Items()
{
DataTable dtitems = new DataTable();
dtitems.Columns.Add("id", typeof(int));
dtitems.Columns.Add("label", typeof(string));
dtitems.Columns.Add("value", typeof(string));
dtitems.Columns.Add("code", typeof(string));
DataRow dr = dtitems.NewRow();
dr["id"] = 1;
dr["label"] = "2";
dr["value"] = "Apple";
dr["code"] = "APL";
dtitems.Rows.Add(dr);
dr = dtitems.NewRow();
dr["id"] = 2;
dr["label"] = "3";
dr["value"] = "Grape";
dr["code"] = "GRP";
dtitems.Rows.Add(dr);
return dtitems;
}
public ActionResult ItemAutoSuggestByName(string autoSuggestText)
{
autoSuggestText = (autoSuggestText == null) ? "" : autoSuggestText;
return Content(JsonForAutoSuggestforName(Items().Select("value LIKE '%" + autoSuggestText + "%'")), "application/json");
}
public ActionResult ItemAutoSuggestByCode(string autoSuggestText)
{
autoSuggestText = (autoSuggestText == null) ? "" : autoSuggestText;
return Content(JsonForAutoSuggestforCode(Items().Select("code LIKE '%" + autoSuggestText + "%'")), "application/json");
}
static string temp;
public static string JsonForAutoSuggestforName(DataRow[] dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
for (int i = 0; i < dt.Length; i++)
{
jsonBuilder.Append("{\"id\": \"");
jsonBuilder.Append(dt[i][0].ToString());
jsonBuilder.Append("\",");
jsonBuilder.Append("\"label\": \"");
temp = dt[i][2].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Append("\"value\": \"");
dt[i][2].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Append("\"code\": \"");
temp = dt[i][3].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
string jason = jsonBuilder.ToString();
return jsonBuilder.ToString();
}
public static string JsonForAutoSuggestforCode(DataRow[] dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
for (int i = 0; i < dt.Length; i++)
{
jsonBuilder.Append("{\"id\": \"");
jsonBuilder.Append(dt[i][0].ToString());
jsonBuilder.Append("\",");
jsonBuilder.Append("\"label\": \"");
temp = dt[i][3].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Append("\"value\": \"");
dt[i][3].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Append("\"code\": \"");
temp = dt[i][2].ToString().Replace("\\", "\\\\");
jsonBuilder.Append(temp.Replace("\"", "\\\""));
jsonBuilder.Append("\",");
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
string jason = jsonBuilder.ToString();
return jsonBuilder.ToString();
}
}
Use "var" button to wrap your
variable or
classnames.
Conclusion
Hope this will help some mvc developers