Using Kendo AutoComplete in ASP.Net MVC 4.0

In this post, we will see how we could work with Kendo AutoComplete in ASP.Net MVC. We will fetch data from SQL Server table in Kendo AutoComplete using LINQ to Sql class

Adding the Model

Follow Adding Model section of this post to create model.

Adding Controller

We have created the Model, now we need to fetch data using Model in the Controller. I am going to use default created HomeController and Action Index. Go ahead and in HomeController.cs file modify the Action Index.

image

Here we need to create instance of model and pass the data to view. That can be done as following

image

Adding Kendo AutoComplete on View

We are passing data from Index action, so we need to put Kendo AutoComplete in IndexView. Go to View and Home folder and open Index.cshtml

image

Very first you need to make View as strongly typed. You can make a View strongly typed as following

image

Next add Kendo UI AutoComplete. Make sure that you are providing the name attribute. In DataTextField pass the name of the column on which you want to filter the data.

image

For your reference code in view is as following


@model IEnumerable<mvcwrappersample1.Models.Person>

<h3>Kendo AutoComplete</h3>

@(Html.Kendo().AutoComplete()
.Name("name")
.DataTextField("FirstName")
.BindTo(Model)
.Filter("contains"))

Press F5 to run the application, you should able to get data from model in Kendo AutoComplete.

image

I hope you find this post useful. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s