MVC KENDO GRID

File->New>Project

First Go to Master Page.

And add the following line of Code. Now when I click on Employee the Details should be displayed to me

Now I need to create an Employee Controller. Before That I would like to

1 Create a Folder with View Models.

 2 create a class with name “EmployeeViewModel” to add gets and sets properties.

Go to EmployeeViewModel.cs and write the following lines of Code.

public class EmployeeViewModel

    {

public int Employeeno { get; set; }

       public string EmployeeName { get; set; }

       public string EmployeeAddress { get; set; }       

public List<EmployeeViewModel> lstEmployees { get; set; }

     }

Add the Reference of Kendo

And then go to Web.Config  and add namespace for Kendo ( in both the web.config files)

1 which is inside View Folder

2 which is outside

<addnamespace="Kendo.Mvc.UI"/>

To Apply Styles

Go to Content Folder, all the styles related to Kendo need to be paste here.

All the scripts files related to Kendo need to be in Scripts Folder

Then go to master page (layout.cs.html) under View Folder and add the following styles and js files related to Kendo.

@Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

    <link href="@Url.Content("~/Content/Kendo/kendo.common.min.css")" rel="stylesheet"/>

    <link href="@Url.Content("~/Content/Kendo/kendo.default.min.css")" rel="stylesheet"/>

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/Kendo/jquery.min.js")" type="text/javascript"></script>

  

    <script src="@Url.Content("~/Scripts/Kendo/kendo.all.min.js")" type="text/javascript"></script>

    <scriptsrc="@Url.Content("~/Scripts/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript"></script>

Then go to Model and Create a model with a name Employee.cs

Add-> new item

And write  the following line of code in Employee.cs as below

Then go to controller folder , and select

And Click On Add button.

Write the following Method in Employee Controller as shown above.

So go to Controller and Right click on Selected Method Name i.e. (EmployeeGrid)

And select Add view

Output:

Model first approach with EFW

File->New>Project

And select the project template and click on ok 

Go to Model->

And click on Add

Click on Finish

Right Click on the Screen

Add NewàEntity

Click on Ok

To add columns to the table students (Right Click on Add Newà Scalar Property)

I have added three columns to the table

In Model first approach first create model

Go to Model and Right Click and Select Generate Database From Model.

And Select New Connection

And click on Change

And Click on Ok. 

Then Click on Ok Button.

Click on Next Button.

Click on Finish.

A script File will be generated with the name Model1.edmx.sql

Right click on it and select Execute 

Connect to the database.

In the solution Explorer you can find

Now build the solution.

And go to controllers folder in the solution Explorer.(Right Click on the controllers folder and Select AddàController

Click on Add Button.

Now Run the program.

http://localhost:16396/Demo

the output screen

MVC WITH ENTITY FRAME WORK

File->New->Project

select : ASP.NET MVC 4- Application

AND CLICK ON OK

And select the project template and click on ok

Now Go to Solution Explorer

And go to App Data

Add àExisting Item (and add any database)

I have added a database with name pubs.mdf

and go to solution explorer and u can see the database pubs.mdf  file is added

And again go to solution explorer and add new item
and add ado.net entity frame work

And click on add

Select  generate from database and click on Next

Click on next

Select your database and table (I have selected jobs table here) and click on finish

Now build the solution ( this is compulsory) before adding controller to the project

and now  add controller

And now  go to index.cs.html

And do the following changes

Id=item.job_id (here job id is the primary key)   do the following changes for edit, details, delete

And run the program and see the output

Output screen

http://localhost:39012/Demo

Demo is the controller name