Getting Started

Creating a Syncfusion MVC Application

Using VS Extensions

To begin, you need to create a new ASP.NET MVC project Razor Application.

To create a new MVC project:

1. In the File menu, click New Project. The New Project dialog box is displayed.

   

   New Project Dialog Box

2. In the upper-right corner, make sure that .NET Framework 4 is selected.
3. Under Project Types, expand Syncfusion, and then click either Mobile or Web.
4. Under Syncfusion Installed Templates, select either Syncfusion ASP.NET MVC 4 Application (Razor), C#, or VB.

5. In the Name box, enter a name for the project.

   The Syncfusion Product Selection dialog box is displayed.

   

   Syncfusion Product Selection Dialog Box

6. Select the Tools check box.

7. Click Next.

   

   Selecting an Option

   The Syncfusion Theming dialog box is displayed.

   

   Syncfusion Theming Dialog Box

8. Select a theme.

9. Click Done.

10.The newly generated MVC project is a complete application that you can compile and run without having to make changes. The following illustration shows what the application looks like when it runs in a browser.

MVC Syncfusion Application Output

Using Sample Creator

To begin, you need to create a new ASP.NET MVC project Razor Application.

To create a new MVC project:

1. Open Syncfusion Dashboard from the desktop shortcut or Start menu and click Project Wizard.

   

   Syncfusion Dashboard

2. Select Tools from Controls and Select the features required for Tools, and ensure other properties like MVC Version, Language, VS version, View Engine, and Name are filled out.

   

   Sample Creator

3. Click the top right combo box and select the required themes.

   

   Select a theme

4. Click Create.

5. Click Yes after project created dialog appears.

   

   Confirmation dialog

6. The newly generated MVC project is a complete application that you can compile and run without having to make changes. The following illustration shows what the application looks like when it runs in a browser.

   

   MVC Syncfusion Application Output

Examining the MVC Project

The following illustration shows the folder structure of the newly created MVC project.

Solution Explorer

The folder structure of an MVC project differs from that of an ASP.NET website project. The MVC project contains the following folders:

• Content - for content support files. This folder contains the cascading style sheet (.css file) for the application.

• Controllers - for controller files. This folder contains the application’s sample controllers, which are named AccountController and HomeController. The AccountController class contains login logic for the application. The HomeController class contains logic that is called by default when the application starts.

• Models - for data model files such as LINQ-to-SQL, .dbml, or data entity files.

• Scripts - for script files, such as those that support ASP.NET AJAX and jQuery.

• Views - for view page files. This folder contains three subfolders: Account, Home, and Shared. The Account folder contains views that are used as UI for logging in and changing passwords. The Home folder contains an index view (the default starting page for the application) and an about page view. The Shared folder contains the master page view for the application.

Adding Model to an Application

After the MVC application is created, a model has to be added. Model is a place from where the data can be fetched by the controller (Refer to Understanding ASP.NET MVC). This section guides you step-by-step on adding a model.

1. On the Solution Explorer, right-click the Models folder. A context menu will be displayed.

   

   Context Menu displayed on clicking the Models Folder

2. On the context menu, point to Add and click New Item.

   NOTE

   The Add New Item {Application Name} dialog box is displayed. The Categories window displays the components available under the Visual C# program. The Templates window displays the templates under the selected elements.

   

   Add New Item Dialog Box

3. Click Data under Visual C#. The Visual Studio installed templates are displayed in the Templates window.

   

   Connecting a Database to the Application

   NOTE

   This step is optional and should be performed only when you want to attach a database with the model. For details, see .

4. In the Name box, enter a name for the model.
5. Click LINQ to SQL Classes under Templates.

6. Finally, click Add.

   NOTE

   The data classes are added under the Model folder.

7. In the Name box, enter NorthwindDataClasses.dbml and click Add.
8. Now Northwind LINQ to SQL classes are created in your application and the Object Relational Designer appears.
9. Drag the tables from the Server Explorer window and drop it to the Object Relational Designer to create LINQ to SQL classes that represent particular database tables. All the northwind database tables should be added to the Object Relational Designer.
   1. You will get the following output once the above is done.

   

   NorthwindDataContext.dbml