Login for your services
Digital Diary My Tasks Bookmarks My Q/As
AXARROW HIGHLIGHTS
This Article describes the simplest methods and techniques for Developing Responsive Applications using ASP.NET MVC Architecture. You may please refer to various aspects of development with respect to technical architecture, techno-commercial approach along with coding.
Recent Articles
VIEW ARTICLE

Developing Responsive Applications using ASP.NET MVC Architecture

Author: Arun Verma
Category: Microsoft
Submitted On: 5/10/2017
Published On: 5/18/2017
ABSTRACT: This Article describes the simplest methods and techniques for Developing Responsive Applications using ASP.NET MVC Architecture. You may please refer to various aspects of development with respect to technical architecture, techno-commercial approach along with coding.

Developing responsive applications when you are using ASP.NET and MVC framework, has become pretty easy with the availability of bootstrap framework within Visual Studio IDE.

Bootstrap is currently one of the most popular web frameworks for developing responsive web applications. It has multiple features and benefits through which developers can improve users' experience with the web site. Whether you're a novice at front-end design and development or an expert, you can work with bootstrap easily. When you start a new web project in the Visual Studio, select bootstrap theme of your choise and move forward with the steps mentioned in development wizard.

Bootstrap framework consists of a set of CSS and JavaScript files, and is designed to help your website or application scale efficiently from phones to tablets to desktops. Bootstrap, through bootstrap.js includes multiple custom jQuery plugins, providing features like transitions, modal dialogs, scroll detection, collapse behavior, carousels, and affixing menus to the window so that they do not scroll off the screen etc. Its basic typography and styles provide a pleasant look & feel that can easily be manipulated through custom theme support, which can be hand-crafted. Also, there are rich functionality themes available in the market that one can purchase, if required.
Using available programming techniques, css and javascript, a developer could further make UI more relevent and pleasurable for Users who are using different devices at different times.


By saying 'Responsive', we mean that the application user Interface adapts to the screen-size of the device on which application is invoked. Practically, many programs need to render different UI components /choices /menu items etc to the user, basis the device screen size.
Programaticlly speaking, we can easily identify in runtime whether the request is from a mobile device or a desktop. For instance we use
if (Request.Browser.IsMobileDevice){ }
to identify that the current request is from a mobile device, and accordingly render UI components/ functionalities to be made available to the mobile only. Otherwise, render UI components meant for bigger screen sizes.

Implementation
When you implement boostrap, and you are developing the program, use a local copy of boostrap so as to avoid going to the CDN again and again. For local copy of the Bootstrap, you'll need to reference it in any pages that will use it. The reference is made by using

 
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

 
The layout file has to be included in almost all View files, except the partial-view files. In the production environment, it is desirable that we use a CDN based boostrap reference.

While you supply the Layout to each desired page, ensure that you supply appropriate 'title' to the page. It helps search engines to locate and distinguish the pages beautifully. You may achieve the desired result as following: -

In the individual page just write the desired title, e.g.
@ViewBag.Title = "Invoice Bill"
just before the Layout line. And in the _Layout.cshtml file, you may write the code like
<title> MyProgram - @ViewBag.Title </title>.
This will ensure that every page is given its own title, along with the name of your program. There is an ocean of options that you can explore programatically to make your responsive program a pleasure to the users. You may like to visit bootstrap website for further study on the subject.
The biggest advantage that we get while developing using MVC and boostrap is that once layout(s) have been deviced, the developer could keep simply focused on the program functionality. He or she need not worry about the UI components layouts any more. Headers and footers are laid down once and the @RenderBody() section plays the magic.

Go to Top
Developing Responsive Applications using ASP.NET MVC Architecture

Related Questions...(0) Ask A Question

Ask a Question

Go to Top