How to send the Key value of the selected item in AutoComplete Textbox to controller instead of the Text value ?
By default, you can only access the Text value of AutoComplete in the Controller page on post action. In order to get the Key value of the selected item from AutoComplete in the Controller page, you have to pass the Key value through client-side events.
The Key value of the selected item is obtained from OnValueChange event using the event arguments. You can fetch the corresponding selected items Key value in the client-side script, using the event argument property _dataIdItem or the method get_DataId().
From the client-side, button-click event trigger, the AJAX post to pass the variable holds the Key value. Now the value stored in the OnValueChange event is passed to controller using AJAX post where you can get the Key Value of the selected AutoComplete item. Refer the following code example.
CSHTML
@Html.Syncfusion().AutocompleteTextBox("Autocomplete").RequestMapper("GetData").DropDown(true).DataTextField("text").DataValueField("value").DataIdField("value").Width(160).ClientSideValueChange("onValueChange")
<input type="button" value="Submit" name="button" onclick="BtnClick(this)" />
<script type="text/javascript">
var acvalue;
function onValueChange(sender, args) {
acvalue = args._dataIdItem;
//_dataIdItem - to get the selected item Key field
//_dataTextItem - to get the selected item Text field
//_dataValueItem - to get the selected item value field
}
//Ajax post that passes the key value to controller
function BtnClick(args) {
$.ajax({
type: 'POST',
url: '/Tools/ToolsFeatures',
data: { val: acvalue },
success: function (data) {
}
});
}
</script>
CS
//Post action on button click
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ToolsFeatures(string val)
{
var datavalue = val;
return View();
}
//Request mapper for Autocomplete
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetData(string QueryString)
{
List<string> data = new List<string>();
List<ACsugg> acdata = new List<ACsugg>();
acdata.Add(new ACsugg("List1", "JQuery Vs Java Script"));
acdata.Add(new ACsugg("List2", "JQuery"));
acdata.Add(new ACsugg("List3", "Pro Sync Framework"));
acdata.Add(new ACsugg("List4", "Asp.net MVC Tutorial"));
acdata.Add(new ACsugg("List5", "Professional ASP.NET MVC 4 "));
acdata.Add(new ACsugg("List6", "Windows 8 Apps with XAML "));
acdata.Add(new ACsugg("List7", "Syncfusion jQuery_Succinctly"));
acdata.Add(new ACsugg("List8", "Android Application Development"));
acdata.Add(new ACsugg("List9", "Basics in C and C++"));
acdata.Add(new ACsugg("List10", "Dot net Application development"));
acdata.Add(new ACsugg("List11", "Programming in C#"));
acdata.Add(new ACsugg("List12", "Advanced Java"));
var datasource = acdata.AsQueryable();
return datasource.AutocompleteActionResult();
}
//Class for adding list items
public class ACsugg
{
public string value { get; set; }
public string text { get; set; }
public ACsugg(string _val, string _txt)
{
this.value = _val;
this.text = _txt;
}
}
