Server-side operations for component in ASP.NET MVC AutoComplete.
The DataManager class helps binding the ASP.NET MVC Autocomplete queries passed to the server-side. Based on those queries, you can perform the server-side operation on the Autocomplete.
The where query parameters are used to return the filter collection from the server-side operations.
DataManager operations
The query parameters are serialized by the DataManager class and the server-side filtering operations are performed by the PerformWhereQuery methods.
C#
public ActionResult GetOutletsForAutocomplete(DataManager dm)
{
var models = GetTestData();
IEnumerable Data = GetTestData();
Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
if (dm.Where != null && dm.Where.Count > 0) // Filtering
Data = operation.PerformWhereFilter(models, dm.Where, dm.Where[0].Operator);
return Json(Data, JsonRequestBehavior.AllowGet);
}
private List<AutocompleteModel> GetTestData()
{
var list = new List<AutocompleteModel>();
list.Add(new AutocompleteModel(){ Id = "1", Name = "Audi S6"});
list.Add(new AutocompleteModel(){ Id = "2", Name = "BMW"});
list.Add(new AutocompleteModel(){ Id = "3", Name = "Jaguar XJS"});
list.Add(new AutocompleteModel() { Id = "4", Name = "Mercedes-Benz" });
list.Add(new AutocompleteModel() { Id = "5", Name = "Volvo" });
return list;
}
DataOperations method
You can also perform the server-side filtering operation by using the DataOperations execute method instead of using the individual methods. The following code example shows you how to use the Execute method in the DataManager.
public ActionResult GetOutletsForAutocomplete(DataManager dm)
{
var models = GetTestData();
Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
var data = operation.Execute(models, dm);
return Json(data, JsonRequestBehavior.AllowGet);
}
ASP.NET MVC
The following code example demonstrated the server-side operation using UrlAdaptor.
C#
[controller]
namespace SyncfusionMvcApplication1
{
public partial class AutocompleteController : Controller
{
public ActionResult GetOutletsForAutocomplete(DataManager value)
{
var models = GetTestData();
Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
var data = operation.Execute(models, value);
return Json(data, JsonRequestBehavior.AllowGet);
}
private List<AutocompleteModel> GetTestData()
{
var list = new List<AutocompleteModel>();
list.Add(new AutocompleteModel(){ Id = "1", Name = "Audi S6"});
list.Add(new AutocompleteModel(){ Id = "2", Name = "BMW"});
list.Add(new AutocompleteModel(){ Id = "3", Name = "Jaguar XJS"});
list.Add(new AutocompleteModel() { Id = "4", Name = "Mercedes-Benz" });
list.Add(new AutocompleteModel() { Id = "5", Name = "Volvo" });
return list;
}
}
}
namespace SyncfusionMvcApplication1.Models
{
public class AutocompleteModel
{
[Display(Name = "Id")]
public string Id { get; set; }
[Display(Name = "Name")]
public string Name { get; set; }
}
}
[view]
@Html.EJ().Autocomplete("selectCar").Datasource(dataSource => dataSource.URL(Url.Action("GetOutletsForAutocomplete","Autocomplete")).Adaptor(AdaptorType.UrlAdaptor)).AutocompleteFields(field => field.Text("Name").Key("Id"))
ASP.NET Web Form
In ASP.NET, the server-side operation is performed by using the WebMethodAdaptor and the DataManager parameter is set as the value.
C#
[Default.aspx]
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SyncfusionASPNETApplication1._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<ej:Autocomplete ID="selectCar" runat="server" DataTextField="Name" DataUniqueKeyField="Id" Query="ej.Query().requiresCount()">
<DataManager URL="Default.aspx/Data" Adaptor="WebMethodAdaptor"></DataManager>
</ej:Autocomplete>
</asp:Content>
[Default.aspx.cs]
namespace SyncfusionASPNETApplication1
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Data(Syncfusion.JavaScript.DataManager value)
{
var list = new List<AutocompleteModel>();
list.Add(new AutocompleteModel() { Id = "1", Name = "Audi S6" });
list.Add(new AutocompleteModel() { Id = "2", Name = "BMW" });
list.Add(new AutocompleteModel() { Id = "3", Name = "Jaguar XJS" });
list.Add(new AutocompleteModel() { Id = "4", Name = "Mercedes-Benz" });
list.Add(new AutocompleteModel() { Id = "5", Name = "Volvo" });
IEnumerable Data = list;
dynamic count = list.AsQueryable().Count();
Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
Data = operation.Execute(Data, value);
return new { result = Data, count = count };
}
}
}
[Models]
namespace SyncfusionASPNETApplication1.Models
{
public class AutocompleteModel
{
[Display(Name = "Id")]
public string Id { get; set; }
[Display(Name = "Name")]
public string Name { get; set; }
}
}
Conclusion
I hope you enjoyed learning about server-side operations for component in ASP.NET MVC AutoComplete.
You can refer to our ASP.NET MVC AutoComplete feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC AutoComplete example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
