Folder Structure In Asp.NET MVC

By // No comments:
Folder Structure In Asp.NET MVC:

A MVC project contain a numbers of folder and subfolders and follow structure architecture . There are three folders that present in each project that are: View, Model and Controller folder. Folder structure of Asp.Net MVC project depend upon the project templates.  In this article we read about the folder structure of a project and also read the use of each folder.
First go to File-> New-> Project -> Asp.Net Web Application.

Now click on MVC Project.

After creation the project now go to “Solution Explorer” and view the folder structure of project.

We can see that out project contains multiple folders and each folder also contain some sub folders. Now we read about these folder structure and also read the purpose of each folder in project.

App_Data Folder:

App_Dode folder store classes related to the database. Usually SQL Server Express .mdf files are stored in App_Code folder. Files stored in App_Code folder are automatically accessible throughout the application.

App_Start Folder:

App_Start folder contain the files that are required during the launching of the application like routing table infor, start up files, and Filter configuration files.

Content Folder:

The content folder contain the files related to the style sheet.

Controller Folder:

This folder contain all the controller using in project. Each controller name contain “Controller” as postfix.  This is name convention for controllers which we need to follow in mvc.

Fonts Folder:

This folder contain various files that denotes the fonts for application like ttf, svg and woff.

Model Folder:

Model folder contain the class that represents the data for application. These classes used to access, stored the data from database.

Scripts Folder:

Script folder contain various files related to JavaScript, jQuery and other types of the scripting files.

Views Folder:

View folder contain all the files that will be show to the user. We can see that with respect to each controller a view subfolder is generated and this subfolder contain a views related to the controller.  View folder also contain a Shared folder that contain the views that will shared with other controllers.

Web.Config file:

We can see that two Web.Config(in View folder and main web.Config) files are present in project. Now a question is arise why we need two Web.Config files. First we understand the purpose of Web.Config file in View folder. The web.config in the views folder is there to block direct access to the view aspx pages which should only get served through controllers.
<add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/>

 Web.Config in the /Views folder is a great (if not thé) way to declare namespaces specifically for your views in.
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />

Templates in Asp.Net MVC

By // No comments:
Templates in Asp.Net MVC: 
When we create new project in MVC by selecting “ASP.NET MVC 4 Web Application" we will get different type of project template to select like Empty, Basic, Internet Application, Intranet Application, Mobile Application, Single Page Application and Web API. In this article we will learn what these template in MVC project are and which templates we select to create new project in mvc?
There are seven type of project template available for MVC 4 application in Visual Studio 2013 ultimate.

Empty: This template is useful when we want to build mvc application from scratch. It created the minimum references and resources required to run an MVC application. This template contain basic empty MVC folder structure with Global.asax file and App_Start folder at top and it will not contain Script folder and Content folder. You can see that  Models, Controllers, App_Data are completely empty folders and View folder only contains web.config and App_Start folder contains 3 configuration files ( FilterConfig.cs, RouteConfige.cs and WebApiConfig.cs ). The folder structure of Empty Template mvc application is shown bellow

Basic: It’s a new project type in MVC 4 and it was not available in MVC3. This template is much closer structurally to Empty project template. Moreover, the basic template will contain Script folder with default script files and Content folder will have themes and site.css style sheet inside it. Bundling and minimization facilities have been prepared in this template. BundleConfig.cs file has been added to App_Start folder. As we can see that View folder has a Shared Folder in which it contains Error.aspx web form. In case if we choose Basic Template for mvc project then the folder structure will look like

Internet Application: This template is ideal for internet applications and it has built-in membership management functionality which allows you to register, login, change password and so on. It automatically adds two controllers (Account controller and Home controller) to the Basic template with implemented actions and views which is required for registration. It is completely ready application for development. In case if we choose Internet Template for mvc project then folder structure will look like

Intranet Application: This template is ideal for intranet applications and it has windows authentication. This template is ideal for intranet applications and it has windows authentication. By using this Template you can develop application for intranet based systems. In case if we choose Intranet Template for mvc project then folder structure will look like

Mobile Application: Mobile website programming is one of most important feature in MVC 4 so this template has everything that Internet Application template has, however it is using to adjust application for mobile devices and does not use the built-in authentication mechanism.  Mobile application templates also come with login and registration mechanism. In case if we choose Mobile Template for mvc project then folder structure will look like

Web API: The Web API Application is yet another version of Internet application template which comes with default Home and Value controller with default View for Home controller and Value controller inherits from ApiController. It is easy to use for developing restful web services and applications to feed a variety range of clients from desktop browser to tablet applications. It allows you to expose your data and service to the web directly over HTTP.  If you want to create quickly web based Service then Web API is best choice for it. In case if we choose Web API Template for mvc project then folder structure will look like

Single Page Application: Visual Studio 2012 Express or later version introduce a new template for building single page applications. For example, Mail site offers a rich user experience within single page. Navigation techniques and Ajax provide necessary functionality without a page reload.

Request Life Cycle in Asp.Net MVC

By // No comments:
Request Life Cycle in Asp.Net MVC:

In previous chapter we discussed the brief introduction of Asp.Net MVC application . Now we learn about the life cycle of request in Asp.Net MVC.  When a request in executed and response  is send to user b/w these many tasks are performed.  Below image show all the steps that are performed during execution. of request.

When a request is generated by the browser and result is send back to the browser, b/w these two stages following actions are performed.

·          Client browser send request to the MVC application.
·         URL Routing is take place. Generally pattern matching is a process  that matches the request’s URL against the registered URL patterns in the Route Table. If a pattern match occur then request is send to MVC handler, else 404 error is generated.
·         MVC handler initialize the real process and IHttpHandler interface is performed.
·         Now incoming request is directed to controller. MvcHandler uses the IControllerFactory instance and tries to get an IController instance. If instance is retrieved successfully then controller will executed.
·         After successfully initializingof  the IController instance required operations are performed and a result is generated and result pass to the view.
·         Now View render this result to the browser.

Introduction to Asp.Net MVC

By // No comments:
Asp.Net MVC Framework Introduction:

What is MVC?

The Model-view-controller (MVC) is an architectural pattern framework developed by Microsoft that is  an alternative to web forms for creating the web application.  The MVC Pattern separate the application in three main components   : Model, View and Controller. Each component perform the specific task. The MVC framework is a lightweight and testable framework that also support the existing features like authentication, master pages etc.

Components of MVC:

An Asp.Net MVC Project mainly contain three components.
·         Model
·         View
·         Controller


The model represent  the business logic and data of the application.  This can represent the data that is being transferred between the View and Controller components or data that is related to any other business logic .  Generally model is used to store and retrieve the data from database.


View is representation level of project. The View is responsible displaying data and transforming Model or Models to visual representation. Views are generally created from model data.


Controller is just like the heart of any application. Controllers act as an interface between Model and View components to process all the business logic and incoming requests. The controller takes input from views and interact with model and return the result to the view.

Features of using the Asp.Net MVC:

·         MVC pattern is ideal for developing the light weight and complex application.
·         MVC provide the isolation b/w codes because MVC components are divided in three parts(Model, View and Controller) that are always isolated to each other.
·         It doesn’t use the View State for controls that make it suitable for light weight application.
·         The MVC components are not directly depend on each other this make it easy to test components separately.
·         Supports all the existing concept of  ASP.NET functionalities such as Authorization, Authentication, Master Pages, Data Binding, User Controls, ASP.NET Routing, etc.
·         Asp.Net MVC use the HTML helpers, these HTML helpers are just like the server  controls of Asp.Net but doesn’t contain the View state that make them very light weight. We can also generate our custom helpers.
·         Generally developers spent  their time in writing the code for the same Create, Read, Update and Delete operations on data entities. Asp.Net MVC provide the scaffold templates that reduce the efforts of developers.
·         Asp.Net MVC also supports the template feature , that allows you to create a shared partial view and use the same on different other views.
·         Asp.Net MVC supports data annotation attributes which are used for data validation purpose.

When to use Asp.Net MVC:

Before the Asp.Net MVC, Webfoms are used to develop the application. We know that Webforms use the server controller and these server controllers use the view state to maintain the state of application that makes it very heavy process for development. But Asp.Net MVC doesn’t use any view state, that makes it light weight . If we want to develop application which should be lightweight and easy for testing and Maintenance and more Loose Coupling that time we can develop application in MVC.  

Introduction to jQueryUI

By // No comments:
What is jQuery UI?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. UI stands for user-interface and the jQuery UI library provides a lot of user interface enhancements for your web site.  Whether we are building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.  jQuery uses HTML, CSS and JavaScript. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
jQuery UI component and functionality  is divided into four main categories.

Interactions:  jQuery UI provides a set of mouse-based interactions as building blocks for rich interfaces and complex widgets.  jQuery UI provide following interactions Draggable , Droppable, Resizable, Selectable, Sortable.

Widgets: Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events.  jQuery UI supports various types of widgets ,some of useful widgets are Accordion, Autocomplete, Progressbar  , Slider , Spinner etc.

Effects: jQuery UI adds quite a bit of functionality on top of jQuery's built-in effects . jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings . jQuery UI provides rich effects that are  Color Animation ,  Toggle Class,  Drop ,  Fade, Flod , Highlight effects etc.

Utilities: These are a set of modular tools the JqueryUI library uses internally.  jQuery UI provides position  utilities to set an element's position relative to another element's position (alignment).

Features of jQuery UI:
Now we consider some reason why we should use jQuery UI .

Require Single Library:
 If you are already using the jQuery library then you should not have to bring another library.  We  can take advantage of all the widgets and interaction tools that jQuery UI supports without having to maintain and learn another library.

Efficient Documentation:
In jQuery each function and component have a full explanation and an example plus source code. jQuery library are always up to date and provide excellent documentation.

Open Source and Free to Use:
jQuery UI library are open sources and free to use. A user can make changes in sources code according his requirements.

Support Theming Mechanism:
jQuery supports theming mechanism which provide a great look to any website . jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs.

jQuery UI Environment Setup:
Now we discuss that how to setup an environment for the jQuery UI. We have two way to setup the environment .
1.       Downloading jQuery UI libraries from CDNs
2.       Download jQuery UI libraries from official website.
Now we consider both method to setup an environment.

Using libraries from CDNs :
A CDN(content delivery network) is setup of servers that provide files and data to a user. We can use a CDN link in our web page. This method have some advantages that responsibilities are moved from our server to CDNs server. If the user to our webpage has already downloaded a copy of Jquery UI from the same CDN, it won't have to be re-downloaded.
We can use any CDN as per our choice.
Google :
<link rel="stylesheet" href="">
<script src=""></script>

<link rel="Stylesheet" href="" />
    <script src=""></script>

Download jQuery UI libraries from official website:

We can download jQuery UI library from official website of jQuery. Follow the below steps to download the jQuery UI libraries.

Step 1:  Goto official website of jQuery . You can use this link

Here you can see three option( “Custom Download”, “Stable” ,”Legacy”). Stable download contain  latest version and legacy contain previous major release of JqueryUI library You can click on any button and download the libraries but I suggest you to download jQuery UI libraries from “Custom Download” option.

Step 2: Choose Which component you need
The download builder show the list of all component ,you can select the component that you required and  unchecked all further component.

Step 3: select the theme

After selection of component now select the theme that you required and after selecting the theme now click on “download” button.

After successful download of jQuery UI libraries now extract the folder and put this folder into your project. Now take an example to test the jQuery UI libraries that we downloaded.

So put the following content in head section.

    <link href="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
    <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <link href="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
     <link href="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />

Copy following code in body

    <form id="form1" >
        <div id="Div1" style="width: 600px; height: 300px; background-color: #57A58A; font-size: large">
            <h1>Test jQuery UI Libraries</h1>

            <input type="text" id="txtDatepicker" />

In head section add this code:
        $(document).ready(function () {

Complete html code is:

<!DOCTYPE html>

<html xmlns="">
<head >
    <title>Jquery UI</title>
    <link href="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
    <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <link href="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
    <link href="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
        $(document).ready(function () {
    <form id="form1" >
        <div id="Div1" style="width: 600px; height: 300px; background-color: #57A58A; font-size: large">
            <h1>Test jQuery UI Libraries</h1>

            <input type="text" id="txtDatepicker" />

When we open above page in browser and click on text box then we find following output.
Above output show that jQuery UI library has been successfully implemented.
This article describe basic introduction to jQueryUI from next article we will start to learn the jQueryUI.
Online Casino