Tip:
Highlight text to annotate it
X
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.