ASP. NET MVC build Project Background UI Framework-1, background main frame

Catalogue

2. ASP. NET MVC build Project Background UI Framework-1, background main frame
4. ASP. NET MVC build Project Background UI Framework-2, menu effects
6. ASP. NET MVC build Project Background UI Framework-3, panel folding and unwinding
8. ASP. NET MVC build Project Background UI Framework-4, TAB multi-page support
10. ASP. NET MVC build Project Background UI Framework-5, demo demo Controller and view interaction
12. ASP. NET MVC build Project Background UI Framework-6, customer management (add, modify, query, paging)
14. ASP. NET MVC build Project Background UI Framework-7, statistical report
16. ASP. NET MVC build a project background UI framework-8. Pass some data from the selected data row in the view into the controller
18. ASP. NET MVC build Project Background UI Framework-9, server-side sort
20. ASP. NET MVC build Project UI Framework-10, export Excel (large data volume, very time-consuming, asynchronous export)
22. ASP. NET MVC build Project Background UI Framework-11, Auto load dropdown box query

Ready to do a new project, from the Web designer to get the HTML static page (no Line JS), but all a fragmented interface, I need to do is:

1. Connect these scattered HTML interfaces.

2, write your own JS or jquery to achieve the menu effect

3. Integrate HTML pages into our MVC razor view

I wanted to use a third-party UI framework such as jquery Easyui, ExtJS, MINIUI, and so on to build the framework, but the above requirements must be done in line with the art-given HTML page style, not with these more complex UI frameworks. As a non-front-end engineer, I had to bite the bullet. After almost 2 days of tossing, I built the UI framework. The main use of jquery and some jquery UI plug-ins. Even using a third-party UI plug-in is painful, because I need to modify the theme style of the UI plugin, and change the interface to look similar to my artwork. So why do I use the UI plugin, on the one hand, to improve the user experience, on the other hand, to reduce the coding, let the view and controller better combination, if I do not add jquery UI plug-in, you can directly in the view of the art to my HTML page, This looks much simpler, but in this case, the interface reusability is too poor and requires more coding, and what I need to do is to minimize the number of team members ' coding and improve development efficiency through the framework.

First look at the final effect:

Start from here

As soon as I see this background interface, I first associate it with an IFRAME or frameset, as this allows for page embedding. Project team colleagues say that you can use a partial view in MVC, similar to the master page in the previous ASPX view, but this is not what I want, I do not want to every click on a function menu to refresh the entire interface, and I want to control the menu item permissions. I don't add any JS first, step by step.

The difference between the IFRAME and frame can be found online, here I do not do too much explanation, and finally I used the frame. JS and css:cssjsimg source used in the framework

1, new ASP. MVC4 Project MSD.WL.Site, and then create a new controller HomeController, here I used 4 action method, respectively, corresponding to 4 interface, index represents the frame main interface

  public class Homecontroller:controller    {public        actionresult Index ()        {            viewbag.message = "Welcome to financial module";            return View ();        }        Public ActionResult Top ()        {            viewbag.username = "Super Administrator";            Viewbag.availablebalance = "8888.00";            return View ();        }        Public ActionResult Left ()        {            return View ();        }        Public ActionResult Right ()        {            return View ();        }    }

2. New Index View

@{viewbag.title = ""; Layout = null;} <! DOCTYPE html>
3. New Top view
@{Layout = null;} <! DOCTYPE html>
4. New Right View
View Code
5. Create a New Left view
View Code
6. New bootom.html
<! DOCTYPE html>
F5 run, this time, you see the interface should be like this:
ASP. NET MVC build Project Background UI Framework-1, background main frame