Server-side Operations for Autocomplete Component in ASP.NET MVC
The DataManager class helps binding the 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; }
}
}
