In this video, you’ll learn How to create a new MVC web application.

Let’s get Started by clicking "New Project".

Here you can see the DevExpress web project templates.

An empty project that contains everything you need to begin.

A standard project template that allows you to choose the layout and configure your web

application.

And The MVC Outlook Inspired Web application project template allows you to create a fully

functional Outlook-style mail web application in just two mouse clicks.

I'll choose this project template and create a new app.

I'll select the standard project template and create a new MVC web app.

The DevExpress Project Wizard is displayed.

From the "Choose Layout" tab I can select one of the predefined layouts.

The "Empty" and "Outlook" layouts are the same ones I mentioned before, the "Standard"

corresponds to the standard ASP.NET MVC Internet Application project template.

The "Custom" layout allows you to define your own layout.

For custom layout, I can specify which areas of a page should be displayed and see the

preview.

I can also specify if an extension should be inserted in a particular area.

The MVC Settings tab allows you to specify the View Engine used within a project, the

MVC version, and availability of a unit test project.

The "Choose Theme" tab allows you to select one of the predefined themes and see how it

looks.

Let’s select the "Metropolis" theme for my application.

The Site Configuration tab allows you to define configuration settings that apply to the entire

web project.

Here I can define that I don’t need the authentication functionality.

The "DX Control Settings" tab allows you to define settings that relate to the DevExpress

MVC extension functionality and apply them to DevExpress MVC extensions for the entire

site.

The Localization tab allows you to select languages that will be used to localize user

interface elements of DevExpress MVC extensions.

Now, I'll click "Create project" and the wizard generates a new project for me.

In the solution explorer you can see the generated project.

Let`s take a look at this project in the browser.

Here you can see the fully functional DevExpress gridview extension.

The navbar allows you to navigate through the group of items, and the splitter allows

you to resize the webpage's elements.

We now have a fully functional web application in just a few seconds.

I'll close the browser and return to Visual Studio.

Let's take a look at the solution explorer.

The newly created project already contains all the required references you need to start

working with DevExpress MVC Extensions.

So you don't need to add any references.

The "Content" folder contains the Site.css file, the project already contains the Home

Controller, NorthWind data model, the nesessary javascript files, and the View files.

Let`s take a look at the "Web.config" file.

It contains everything you need to start working with DevExpress MVC Extensions, so you can

use any of the DevExpress MVC extensions in this web project.

Let’s take a look at the "_rootLayout.cshtml" file.

This layout page already contains a reference to the Site.css file that is located in the

"Content" folder and the references to jQuery scripts that are located in the "Scripts"

folder.

The GetStyleSheets method is used to attach the necessary stylesheet files for the specified

DevExpress MVC Extensions.

The GetScripts method returns the necessary javascript files for the specified extensions.

The body content is rendered within the Splitter.

Let`s add a new page.

I'll open the Home controller and add a new action here.

Then I add a View for this action using the default options of the dialog.

I'll go to the position where I want to insert a DevExpress MVC extension.

Now I'll right-click here which invokes the Insert Extension Wizard.

Here I can select the required extension, define it`s key settings and click "Insert".

The wizard generates all the required code for me.

You can see the output window is displayed.

This window tells you about the changes that occurred in our project from the Insert Extension

Wizard.

I can double-click any entry and the focus will be moved to the changed item.

I see the View file has been changed, actions and helper methods have been added to the

controller, and a new partial view has been created too.

This is a big time saver as you don`t need to write all of this code by hand: the wizard

inserts all the necessary code for you.

You can also change the generated code, for example, I can change the HtmlEditor width

within its partial view.

Let's enable navigation within the application pages.

In the partial view for the left panel content you can see the NavBar settings.

This extension is bound to an XML file.

I'll open the XML file, delete the unnecessary items, change item captions, and define the

navigate urls.

Let's save our changes now and take a look at the result in the browser.

Here you can see that the navbar displays two items now, I can click them and navigate

to the required pages.

And we have a fully functional HtmlEditor.

To show you the power of this HTMLEditor, I'll return to the page with the grid, copy

several rows, and paste them to the HtmlEditor.

Now, you can see the HTML code of the pasted rows and the preview layout.

As you can see, the Metropolis theme is applied to all the DevExpress MVC Extensions, because

I specified this theme when I created this project.

But you can easily change this theme to another one.

I'll return to Visual Studio, invoke the DevExpress menu and run the wizard to update my project.

The only thing I need to do is to select another theme.

I'll select the "Office2010Black" theme and run my web application.

Now you can see that the application still looks stunning but uses the Office 2010 Black

theme colors.

The new theme has been applied to the whole application in just a few mouse clicks.

Thanks for watching and thank you for choosing DevExpress.