ASP.Net MVC4 Razor 2 C#.Net 4.5: How will I create metro style web application?

Posted on 2012-09-19
Last Modified: 2012-10-08

      My manager is asking me that I need to create a web application with metro style display using Visual Studio 2012, MVC4 C#.Net 4.5 Razor Page 2 and MS SQL 2008 R2.

     The project contains 10 pages and contents are NOT static. The contents need to load from database.

     All pages contains NEXT and PREVIOUS buttons only.

    The requirement given by my manager is,

            If the end user clicks on the NEXT button, the next new page need to come from RIGHT to LEFT with processing.... (loading ...) image. Simillarly if the end user clicks on the RIGHT button, the previous page need to come from LEFT to RIGHT with processing ... (loading ...) image.

            The end user need to view the processing .... images but at the same time some ajax calls need to fill the page contents. Once the page is ready, processing image need to hide.

            The end user never feels the page submission (i.e.) white screen (flickering). If the end user clicks on the buttons, the very next milliseconds, the processing ... image need to come from the corresponding direction. (Note:- This is a very big challenge to me).

            We need to give option to the end-user to select the THEME as per own wish. Theme in the sense of backgroud color only changes but page comming direction should not change.

Please give me some very simple code example. I will easily pickup from that...

Note:- User should not feel the page submission and page loading time should be covered by processing ... image.
    LVL 14

    Accepted Solution

    Sounds like you have quite a task ahead of you.  I think the technologies that you will be using MVC4 is right however, your going to need to use some other things aswell such as jquery.  With that being said, this sounds like you need a css / javascript guru to formulate the sytles for the tiles and screens.  The programming should be pretty straightforward if I understand the requirements correctly.  Ive provided some resources below ( and please dont get offended as I have no idea of your programming background ) that I hope help:

    Author Comment

    Hi binaryevo,

        Thanks for your response and I am liking the URL: . I am believing that this URL will resolve all of needs.

     Two small corrections made: Now I am using (1) Visual Studio 2010 & (2) .Net Framework 4 (MVC 4).

    I have one more question please:

    Please see the URL:

    Here please refer the tiles BBC World news and Weather Forecast only.

    These 2 tiles values are changing (refreshing) on a regular interval.

    My question is I can get the new value by using jQuery & Ajax. But how will I get that rolling style look and feel. Which jQuery file I need to inclue? Which function I need to use? Please
    LVL 26

    Expert Comment

    OK, from looking at the source code, it uses a combination of Backbone, Knockout and Underscore Javascript libraries as well as some of the Twitter Bootstrap Javascript library.
    It apparently binds the data to the element and uses a foreach to loop through them. It updates the data using the proxy.
    LVL 26

    Assisted Solution


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now