Step by step use ExtJSMVC and Asp. NetMVC3 to develop a simple CMS background management system to create a project

Open VS2012, select a file from the main menu, create a project, select the C # Web template under the installed template in the pop-up window shown in 1, and then select ASP. NETMVC3Web application, change the project name to SimpleCMS, and click OK. A window of 2 is displayed. Figure... SyntaxHighlighter. all ();

Open VS2012, select a file from the main menu, create a project, select the C # Web template under the installed template in the pop-up window shown in 1, and then select "ASP. net mvc 3 Web application ", change the project name to SimpleCMS, and click OK. A window of 2 is displayed.

New project window

Create an MVC 3 Project
In the window, make sure that the template is empty, the view engine is Razor, and click OK to create the project.
After creating a project, you must first delete all the files in the solution Content and Scripts directories in Solution Explorer, and then create an Images directory in the Content directory, create the app and ExtJS directories under the Scripts directory. In the app directory, create four directories, namely controller, model, store, and view, to Store the controllers, models, stores, and view files of Ext JS in the project. Create an ux directory under the ExtJS directory to store the extension components of Ext JS.
The management system will use the latest Ext JS version, that is, version 4.1.1. In the Ext JS 4.1.1 package, bootstrap will be used. js, ext-all.js, and ext-all-dev.js (now bootstrap. js loads the file instead of the ext-all-debug.js file during debugging) these three files and the resources Directory are copied to the ExtJS directory of the solution. Note that do not copy the files directly to the actual directory of the Project. Otherwise, these files will not be included in the release package without additional settings during packaging, therefore, the best way is to copy data in Solution Explorer.
Also copy the Chinese Language Pack ext-lang-zh_CN.js under the local directory to the ExtJS directory. If the project supports multiple languages, you can create a local directory under the ExtJS directory to store the Language Pack. This is not required because you can directly copy it to the ExtJS directory.
Finally, search for the s.gif file in the Ext jspackage directory and copy it to the Images directory under the Content directory.
The final result is shown in 3.

Build Ext JS development framework
The Ext JS framework has been set up. Now you need to test whether ExtJS can be used normally and create the homepage by the way. Create a HomeController controller in the Controllers directory and you will see the following code:
[Csharp]
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. Mvc;
 
Namespace SimpleCMS. Controllers
{
Public class HomeController: Controller
{
//
// GET:/Home/
 
Public ActionResult Index ()
{
Return View ();
}
 
}
}

 
Right-click the View in the Code and choose add View from the shortcut menu. The window shown in 4 is displayed.

Add view for Homepage
 
Remove the "use layout or master page" option in the figure, because the application on a single page does not need layout or master page, and click the Add button, the following code is displayed:
[Html]
@{
Layout = null;
}
 
 
 
 
 
Index 
 
 



 
 

 
Modify the Index in the title to "CMS background management system", and add the page encoding instructions and references of Ext JS styles and scripts under it. The Code is as follows:
[Html]
CMS Background Management System