MultiLevel Autosuggest

Nighil
Posted by in ASP.NET MVC category on for Beginner level | Points: 250 | Views : 2020 red flag

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.


 Download source code for MultiLevel Autosuggest

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




Page copy protected against web site content infringement by Copyscape

About the Author

Nighil
Full Name: NIGHIL DAS
Member Level: Starter
Member Status: Member
Member Since: 5/15/2013 5:47:09 AM
Country: India
Nighil Das M


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)