websites written using asp net mvc

Top 10 Websites Written Using ASP.NET MVC

With all of the millions of websites out there, how many were built with asp.net mvc in today's post, i show the most successful asp.net mvc commercial sites..

ASP.NET MVC is becoming more popular with each version released.

Personally, I've been extremely happy with MVC since inception. I was looking for a better way to build websites instead of using WebForms.

However, I can sit here and tell you all of the benefits of ASP.NET MVC , but until you see an example website, I'm just flapping my gums.

That's what developers are looking for: real-world examples of ASP.NET MVC websites in the wild. It's making it hard for developers to justify spending time learning ASP.NET MVC.

I've provided sample MVC projects , but it's not the same as a full-fledged production site.

BuiltWith.com is a site for Internet statistics. You can find out what sites are "built with" what technologies (get it?) ;-)

If we look at every framework on the Internet ( yes, on the entire Internet ), you'll see ASP.NET and PHP are the kings with ASP.NET MVC sites taking up a 1% of the share (Although, I do worry about the sites with Classic ASP).

So if 1% of the Internet is ASP.NET MVC and it's so popular, where are the websites built with this Microsoft technology?

Here are the most well-known sites I've found running ASP.NET MVC.

StackOverflow

We had to get this one out of the way.

For developers, this is the  site when a developer has a question about a certain technology. It's now becoming a developer's verb ("Why don't you StackOverflow it?")

With the entire site built on ASP.NET MVC, it doesn't just pertain to web development.

There are a ton of other topics like mathematics, game development, and grammar just to name a few.

Examine the site list when you get a chance.

For more details about the architecture of StackOverflow, check out StackOverflow on HighScalability.com .

This is another one to get out of the way.

It just makes sense Microsoft would eat their own dog food. Translation: The tools they built for developers are the same tools they used in-house to build their website.

I've been with GoDaddy.com for a while now (going on 15 years). I didn't realize the site was built on MVC.

Dell is one of the top PC makers and distributors in the world.

I've been using Dell laptops for as long as I can remember...until I recently found a replacement laptop when I was in a pinch.

With the site built using ASP.NET MVC, I have a continued appreciation for them.

Visual Studio

I know I mentioned Microsoft and this could be placed under the same umbrella, but I also have to mention visualstudio.com.

It's not considered a subdomain on Microsoft's site, but it's running entirely on ASP.NET MVC.

Wild Tangent

Wild Tangent is known for it's huge collection of online games you can try, buy, or even rent and play with your friends.

Move throughout the site and you'll see the familiar MVC route {controller}/{action}/{id} (or actually  {controller}/{id}) pointing to a specific action.

Ancestry.com

Ancestry.com is a site allowing you to d iscover your family history and start a family tree.

It's hard to detect by the URLs, but according to the BuiltWith.com, the entire site uses ASP.NET MVC.

According to the search engine results, diply.com is a "leading social entertainment publisher that creates captivating content for millennials."

Again, if you move around the site, you'll notice the familiar Category/Inspirational controller and actions of MVC.

The site is a bit heavy on the images and takes a bit of time to load.

Personally, I like the site.

TacoBell.com

Ok, this one was a shock to me. I didn't expect the entire Taco Bell site on MVC.

Like the Double Chalupa, it's definitely impressive.

Marketwatch.com

Marketwatch is another great example of what can be achieved with a great design and granular manipulation using ASP.NET MVC's Razor and HTML.

The site is compact, neat, and tight on design. It's also responsive which is definitely a feather in their cap.

The focus of this post was to make developers aware of the potential of what ASP.NET MVC websites can aspire to become when finished.

As you can imagine, these sites receive millions of hits in a month. I know StackOverflow easily receives that amount.

Of course, the framework doesn't architect itself. There are other technologies at work besides MVC which the BuiltWith Extension demonstrates when you visit a site.

Grab the free extension and see what framework your favorite website runs.

Did this spark any interest in learning C#? Check out our 5 best ways to learn C# . The best one is even free!

Do you know of another website running on ASP.NET MVC? Post your site below and let's discuss.

Did you like this content? Show your support by buying me a coffee.

Jonathan Danylko is a web architect and entrepreneur who's been programming for over 25 years. He's developed websites for small, medium, and Fortune 500 companies since 1996.

He currently works at Insight Enterprises as an Principal Software Engineer  Architect.

When asked what he likes to do in his spare time, he replies, "I like to write and I like to code. I also like to write about code."

Websites using ASP.NET MVC 

Download a list of all 594,993 current asp.net mvc customers.

List Updated 11th April 2024 1 day ago

Report Suggestions

The more relevant a list the more chances of converting leads.

• All sites that have ever used ASP.NET MVC Websites currently and historically using ASP.NET MVC.
• ASP.NET MVC websites with estimated Sales Revenue over $1m ASP.NET MVC websites with estimated Sales Revenue over $1m.
• ASP.NET MVC websites with estimated Sales Revenue over $100k ASP.NET MVC websites with estimated Sales Revenue over $100k.
• ASP.NET MVC websites with an estimated Sales Revenue ASP.NET MVC websites with an estimated Sales Revenue.
• ASP.NET MVC websites with a High Technology Spend ASP.NET MVC websites spending over $1000/month on Technologies.
• ASP.NET MVC websites with a Medium Technology Spend ASP.NET MVC websites spending over $100/month on Technologies.
• ASP.NET MVC websites with a Low Technology Spend ASP.NET MVC websites spending over $10/month on Technologies.
• ASP.NET MVC websites with up to 1000 social followers ASP.NET MVC websites with up to 1000 social brand followers.
• ASP.NET MVC websites with 1000 to 10,000 social followers ASP.NET MVC websites with between 1000 and 10,000 social brand followers.
• ASP.NET MVC websites with 10,000 to 100,000 social followers ASP.NET MVC websites with between 10,000 and 100,000 social brand followers.
• ASP.NET MVC websites with 100,000 to 1,000,000 social followers ASP.NET MVC websites with between 100,000 and 1,000,000 social brand followers.
• ASP.NET MVC websites with over 1,000,000 social followers ASP.NET MVC websites with 1,000,000 or more social brand followers.
• ASP.NET MVC websites that list between 10 and 50 Products ASP.NET MVC websites with between 10 and 50 SKU Products listed.
• ASP.NET MVC websites that list between 50 and 100 Products ASP.NET MVC websites with between 50 and 100 SKU Products listed.
• ASP.NET MVC websites that list between 100 and 1000 Products ASP.NET MVC websites with between 100 and 1000 SKU Products listed.
• ASP.NET MVC websites that list between 1000 and 10,000 Products ASP.NET MVC websites with between 1000 and 10,000 SKU Products listed.
• ASP.NET MVC websites with over 10,000 Products ASP.NET MVC websites with over 10,000 SKU Products listed.
• ASP.NET MVC websites with High Visitor Traffic Volume ASP.NET MVC sites that have a traffic rank in the top 100,000 sites on the Internet.
• ASP.NET MVC websites with Low Visitor Traffic Volume ASP.NET MVC sites that have a traffic rank outside the top 1 million sites on the Internet.
• ASP.NET MVC websites that were added recently ASP.NET MVC sites that we recently detected in the last few months.
• Websites that have used ASP.NET MVC long term Websites that have used ASP.NET MVC for at least a few months.
• ASP.NET MVC websites in Russia ASP.NET MVC customers that have an address in Russia or a related TLD.
• ASP.NET MVC websites in the United States ASP.NET MVC customers that have an address in the United States.
• ASP.NET MVC websites in China ASP.NET MVC customers that have an address in China.
• ASP.NET MVC websites in Brazil ASP.NET MVC customers that have an address in Brazil.
• ASP.NET MVC websites in the United Kingdom ASP.NET MVC customers that have an address in the United Kingdom.
• ASP.NET MVC websites in India ASP.NET MVC customers that have an address in India.
• ASP.NET MVC websites in Turkey ASP.NET MVC customers that have an address in Turkey.
• ASP.NET MVC websites in Canada ASP.NET MVC customers that have an address in Canada.

• ASP.NET MVC websites with up to 10 employees ASP.NET MVC websites with up to 10 estimated employees.
• ASP.NET MVC websites with up to 100 employees ASP.NET MVC websites with up to 100 estimated employees.
• ASP.NET MVC websites with up to 1000 employees ASP.NET MVC websites with up to 1000 estimated employees.
• ASP.NET MVC websites with up to 10,000 employees ASP.NET MVC websites with up to 10,000 estimated employees.
• ASP.NET MVC websites with up to 100,000 employees ASP.NET MVC websites with up to 100,000 estimated employees.
• ASP.NET MVC websites with up 1 million or more employees ASP.NET MVC

Contact Names & Titles

Location information, traffic ranking, market share, all fully exportable, social data, company names, verticals & keywords, technology history 24+ years, financial balance sheet.

Holly Cardew

We use BuiltWith to keep on eye on emerging technology trends and have been able to research new customer segments and leads.

Ross Kramer

BuiltWith has been an integral partner in identifying key market segment opportunities for us.

Deepak Shukla

Using BuiltWith's tools we've already won two clients who've spent close to $60,000 with us.

Thomas Holm Jensen

BuiltWith gives us the right amount of data mixed with intelligence to find prospects that matter. There's not a better tool to gain a competitive edge.

Scott Lacey

We're not exaggerating when we say it's changed the way we do business here.

Alex Fenkell

With the BuiltWith Retail reports we were able to quickly and easily identify which sites were good fits with our widget.

BuiltWith Pro Frequency Asked Questions

What if i decide to cancel.

You can cancel your account whenever you like via the interface no questions asked.

Is there a minimum contract term?

Yes, the minimum term is 1 month for monthly plans and 1 year for yearly plans.

If I cancel do I lose access straight away?

No. If you started a monthly plan today (12th of April) and canceled on the 19th of April, it will still be active until at least the 10th of May.

How do I get a one-off report?

Sign Up for the Basic Plan, get the report you want then cancel your account. Note the minimum term is 1 month still.

Can I upgrade or downgrade my plan?

Yes. We will pro-rate refund any plan changes. If you go back to Free we'll 'freeze' your reports for when you upgrade again.

Can I export the reports?

Yes the reports are exportable as CSVs and Excel Spreadsheets. No data is 'locked' into the tool.

How do you get this data?

We index the Internet in the same way that Google does to power their search engine. We don't get data from any third parties.

What payment methods can I use?

You can pay by credit card (Visa, Mastercard & American Express). You can also use PayPal or Bitcoin via Coinbase or BitPay.

For yearly contracts we accept wire payments to our Australian, UK, Hong Kong and US bank accounts.

How long does it take to enable my upgrade?

Instantly, providing your account and payment method passes fraud checks. Within 15 minutes in AEST timezone day light hours if it does not.

How do I get a cool BuiltWith Cap?

We will send you one if you use the tool for 3 months!

We have been recently reported numerous fraud incidents, in particular in India, using our name and brand attributes. It was identified that swindlers under our brand are running hiring campaigns in India, Bangalore, and then asking training fees from misled people. In the light of this, we want to outline a few important facts: ⚠️ WE HAVE NO OPERATIONS IN INDIA, including representatives or employees. ⚠️ WE DON’T HAVE any open positions in India, both on-site and remote, and don’t run any hiring campaigns. ⚠️ WE NEVER CHARGE any fees for training or other onboarding activities. Should you be contacted by anyone claiming to work for Artelogic from an email domain other than artelogic.net, as well as ask to pay any kind of fee for whatever reason, you’re likely being affected. Please ignore these attempts as fraudulent and warn anyone you know who may also have been targeted.

Top 7 Web Resources built using .NET

If it goes to building web applications, .NET development has become a competent and reliable approach. Today, it is difficult to find a better toolset for building powerful and feature-packed Windows apps than .NET. As a matter of fact, web apps, desktop, and mobile apps, gaming and IoT solutions, and .Net stack cover them all.

That is why there is no wonder why we can find a number of corporations, that by using .NET technology have turned their software products into well-established businesses.  But what about .NET for startup development? Are there any successful startups built using the NET framework? Let’s try to find startups that have been developed by means of this technology.

.NET Startup Pros And Cons

But before we jump into today’s post, let’s resume the major .NET startup pros and cons.

• Scalability. Scaling your startup project is really easy with .NET. Plus, the whole process of scaling is believed to be more efficient than that with Ruby, for example. In fact, if you expect your product to scale pretty fast, .NET is your best way to go.
• Ease of use, advanced functionality, and security. ASP.NET MVC ensures safe development and makes it easier to spot mistakes and solve common problems without hassle.
• Huge choice and space for creation. You can use multiple languages, different editors, and many libraries if you develop with .Net. As a result, many different types of applications can be built using .Net technologies.
• One consistent API. A base set of APIs – .NET Standard is common to all .NET implementations. By the way, adopting other APIs specific to the operating systems it runs on is also possible.
• Entity Framework . It drops the need for most data-access code developers must write regularly.
• The possibility to benefit from Microsoft’s developers’ tools and startup programs. You can take advantage of Bizspark program , which lets you launch your business without worrying about license fees and the likes for your first years. Visual Studio Team Services allows you to have up to 5 free members.
• No open standards. The lack of open standards significantly slows down the whole software development process.
• Costly licensing and no open-source resources. You need to pay for the licenses to develop with this technology.
• Platform lock-in . The developers of.Net make you too dependent on their platform.

It is of vital importance to stress that despite the mentioned above disadvantages, there are still technology companies that have chosen .NET for their startup development as they feel truly comfortable with this and other Microsoft technologies.

For example, Artelogic’s team developed an innovative multi-factor authentication platform for the startup that uses the power of 3D Facial authentification and machine learning to track down fraudulent behavior.

Still, it goes without saying that today you can hardly find anything written in one pure programming language as only in combination with the latest technologies can you stay competitive.

Famous Web Resources Built Using .NET  

So, the famous technology companies the solutions of which were built using .NET are as follows: 

• Microsoft . Without a shadow of a doubt, the world-famous company has used its best technologies and developer tools for building its website. Everything is clear and consistent there; the site is responsive and it runs smoothly and straightforwardly.
• Outlook . Similar to its predecessor, Outlook is also the creation of Microsoft Corporation, so we may count on best in-build technologies usage. This email app is powerful, feature-packed and secure.
• StackOverflow.  One of the best Q&A platforms for computer-related specialists who are trying to solve technical problems. Everything began with just a blog, but today, it has fast turned into a huge business. It’s for sure that it’s a truly useful learning platform for any software engineer, where one can pick up lots of handy tips and hints, and find the best suiting solution for the compiled code, python ruby and any other case. NET developers, Android app developers, and any other software engineer will find something handy to read or argue about. The service allows you to read what others think about any particular technology, comment, and find the right solution for your case. Still, the novel user can find it tough to get started as the newcomer is expected to gain a reputation to become a full-right member of the developers’ community.
• GoDaddy. A US-based, industry-leading, online domain registrar and hosting company, which runs a cloud platform dedicated to small, independent ventures. Today, the company boasts more than 17 million customers along with 6,000+ employees around the globe. There’s also a wide internet community where you can both stay updated with the latest news and pick up some latest technology-related useful ideas. This solution is robust, intuitive, and secure at the same time.
• Dell. A well-known portal of the famous PC provider. But we have to admit that these days, Dell has become more than just a PC manufacturer. Indeed, if we take a closer look at its site, we will see that the company boasts dozens of software solutions, including cloud computing. The site, which is written by means of .NET framework, comes with a variety of features. Don’t believe us? Come and check!
• Xero. One of the leading accounting software solutions to manage your business on the go. The company’s software solutions are tailored to small and medium-sized businesses. The product is powerful, consistent, and reliable.
• W3schools.com. A popular open-source programming platform , which hosts thousands of code examples. HTML, CSS, and JavaScript, SQL server and other common programmer issues, W3schools.com covers them all. Use it to learn, test and implement cool things in a simple and most efficient way. Avoid errors and code in a smart way,  Actually, many IT related people consider it to be one of the best web services to gain IT expertise.

To sum up, the solutions of all of the listed above companies using feature-rich and thoroughly battle-tested .NET technology,  have become a success, but we have to admit that they also used to be startups once. Thus, it can be said without exaggeration, the NET framework can become the right platform for a startup venture. By the way, if you want to build a product using .NET MVC, Artelogic is a great IT partner. Our engineering team has extensive expertise in NET application development and is always at your disposal.

P.S. Of course, there are dozens of others famous companies which use Microsoft technologies, in particular, .NET as it comes with a variety of options and leaves space for further development.  These are only a small part of them. Can you name any other .NET-powered product that is well worth mentioning here? Please share your thoughts below!

SHARE ARTICLE

Oleksandr Trofimov

What are eCommerce platforms?

Technology of the future: inevitable coercion or free choice?

Why Transformation Efforts Fail: 11 Reasons and How to Finally Triumph

Why Technical Due Diligence is Critical for Startup Exits

Risk Management in Software Engineering

Top 5 Web3 Applications

12 Essential Skills for Developers to Succeed in Web 3.0

Time and Materials vs. Fixed Fee

Custom Marketplace Development in 2023

The E-Commerce Trends 2023

IT Support 2023: What to do if a user wants an instant response?

Successful UX Audit: Tips and Best Practices

Modern software development: Coffee, laptop, and AI

What is CTO as a Service?

Developing web applications using ASP.NET Core MVC

Become a Software Engineer in Months, Not Years

From your first line of code, to your first day on the job — Educative has you covered. Join 2M+ developers learning in-demand programming skills.

In this blog, we’ll learn web development using one of the most popular technologies: the ASP. NET Core MVC. It’s an open-source and lightweight framework from Microsoft, initially released on June 7, 2016. This framework uses the Model View Controller (MVC) pattern to build dynamic web applications that are integral to today’s digital landscape. MVC helps developers write clean and maintainable code by separating the logic into three main parts. These parts are called the model, view, and controller. This blog teaches us to create web applications using this pattern with the ASP. NET Core. The next section will explain why the ASP. NET Core is important for web development.

Learn in-demand tech skills in half the time

Mock Interview

Skill Paths

Assessments

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

For Individuals

Try for Free

Gift a Subscription

Become an Author

Become an Affiliate

Earn Referral Credits

Cheatsheets

Frequently Asked Questions

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2024 Educative, Inc. All rights reserved.

• Manage Email Subscriptions
• How to Post to DZone
• Article Submission Guidelines
• Manage My Drafts

Open Source Migration Practices and Patterns : Explore key traits of migrating open-source software and its impact on software development.

Enterprise AI Trend Report: Gain insights on ethical AI, MLOps, generative AI, large language models, and much more.

MongoDB: Learn the fundamentals of working with the document-oriented NoSQL database; you'll find step-by-step guidance — even sample code!

2024 Cloud survey: Share your insights on microservices, containers, K8s, CI/CD, and DevOps (+ enter a $750 raffle!) for our Trend Reports.

• Alexa Skill With .NET Core
• Unit Testing Data Access in ASP.NET Core
• Build a Simple Chat Server With gRPC in .Net Core
• Deploy an ASP.NET Core Application in the IBM Cloud Code Engine
• 5 Reasons To Choose Django in 2024
• CAP Theorem for Distributed System
• Comprehensive Proxy Server Guide: Types, Applications, and Developer Examples
• Integrating Spring Boot Microservices With MySQL Container Using Docker Desktop

All Things ASP.NET Core and MVC: Tutorials and Articles

Everything you need to become a c# ace..

Join the DZone community and get the full member experience.

 ASP.NET Framework vs Core

.NET Core vs Framework: How to Pick a .NET Runtime for an Application by Angela Stringfellow — Take a look at the two frameworks and compare them to determine which is right for your next project.

ASP.NET vs the Competition

Top 10 Websites Written Using ASP.NET MVC by Jonathon Danylko — Take a look at ten popular sites written with ASP.NET MVC. Some of the entries might surprise you. 

A Direct Comparison of WCF and ASP.NET Core Functionalities by Vikas Arora — Looking to adopt ASP.NET Core for your next project? Check out this article to learn more about its features and how it compares to WCF. 

Getting Started

Getting Started With ASP.NET Core MVC Apps Using VS Code by Santhakumar Munuswamy — Get started with ASP.NET Core MVC with this quick and easy tutorial. 

Creating a Basic Website From an ASP.NET Core Empty Project by Paul Michaels — Take a look at how quickly a basic website can be made with ASP.NET Core. If you're new to ASP.NET Core or want a refresher, read on for more!

How to Write Your First .NET Core Application by Dhananjay Kumar — In this post, we offer a short tutorial that will introduce readers to the world of ASP.NET Core development by creating a simple C# application.

ASP.NET Core: CRUD With React.js and Entity Framework Core by Ankit Sharma — Get started with CRUD operations with ASP.NET Core with this database-first approach. 

How to Implement Pagination in an ASP.NET Core App by Joy Twain — learn how to create navigable pages in an ASP.NET Core web application in minutes with this tutorial. 

Middleware and Areas

Areas in ASP.NET MVC by Josh Anderson — Areas are some of the most important components in ASP.NET MVC projects, allowing users to physically partition a web project in separate units. See how to get started with them in this tutorial. 

An Absolute Beginner's Tutorial on Middleware in ASP.NET Core/MVC by Rahul Rajat Singh — See how middleware plays an important part in the request-response pipeline and how we can write and plug in custom middleware. 

Implementing Middleware Using Endpoint Routing in ASP.NET Core by Juergen Gutsch — ASP.NET Core introduced some new ways to work with middleware in your web application. Check out this article to learn more!

Customizing ASP.NET Core: Middleware by Juergen Gutsch — ASP.NET Core comes with built-in middleware that allows you to further customize your application. Code along with an ASP.NET Core expert and learn to wield this power. 

General CSS Path Transform for ASP.NET Bundling by Gunnar Peiplman — CSS path transofrm problems can arise with bundling and minification, especially when many are externally-based. Read on to find a workable solution. 

ASP.NET Web API (and Others)

How to Develop a RESTful Web Service in ASP.NET Web API by Abhijit Pritam Dutta — Learn how to build a RESTful web service in ASP.NET with a web API. 

Backend Web API With C#: Step-by-Step Tutorial by Andrey Prikaznov — See how to create a web server (Web API) using C# (ASP.NET). It is important to note that to host your server you will need to have Windows-based hosting. 

Running an ASP.NET Core Application as a Windows Service by Gunnar Peipman — We can now run ASP.NET Core applications as a Windows service with minimal effort. See how you can do this in this tutorial. 

CQRS by Example: Simple ASP.NET Core Implementation by Michele Ferracin — Explore a simple Core CQRS WebApi used to manage a blog. 

API Versioning in .NET Core by Neel Bhatt — See how to use different options for versioning in .NET Core API projects. Versioning APIs is very important and it should be implemented in any API project. Let's see how to achieve this in .NET Core.

ASP.NET MVC Routing

ASP.NET MVC 6 Routing Technique by Pramod Gawande — Explore two routing techniques introduced to ASP.NET by MVC 6 and see the benefits they can have for a long-term project.

Developing Microservices 

Quick Walk-Through to Develop Microservices Using .NET Core by Sachin Kulkarni — Microservices are getting increasingly popular for the development of new applications or modernizing existing legacy applications. See how to develop them with .NET Core 2.2. 

Microservices Using .NET Core With C# by Satyen Mishra — Follow along with this step-by-step tutorial on developing Microservices using .Net Core 2.2 framework with C# and Docker.

Streaming Data

How to Create a Real-Time Twitter Stream With SignalR by Jonathon Danylko — Use the skills you've gained in the previous tutorial and put them in practice with this tutorial to create a real-time Twitter stream with SignalR. 

Performance

System Memory Health Check for ASP.NET Core by Gunnar Peipman — Write a health check for system memory metrics of an ASP.NET Core application.

NCache: Scaling .NET Core Applications for Extreme Performance by Iqbal Khan — An expert developer shows how NCache provides scalability to .NET Core applications. 

ASP.NET Security 

Use OAuth 2.0 to Secure Your ASP.NET Core App by Lindsay Brunner — Security is too-often forgotten about in development. Make it a priority with this article, as you add authentication to your project. 

Learn How to Secure Your ASP.NET MVC App With SSO by Lindsay Runner — If you’re building custom applications owned by the same organization, there are many benefits of implementing single sign-on (SSO). Get started with this tutorial.

Real-World Project Using ASP.NET MVC5: Making a Simple Healthcare Portal by Ahmed Abdi — Create a project portal that allows patients to visit a clinic, register with any necessary information, and schedule an appointment with available doctors.

CRUD Operations in ASP.NET MVC Using AJAX and Bootstrap by Anoop Kumar Sharma — Learn how to perform CRUD operations in ASP.NET MVC, using AJAX and Bootstrap.

Further Reading

• MongoDB Tutorials and Articles: The Complete Collection .

Opinions expressed by DZone contributors are their own.

Partner Resources

• About DZone
• Send feedback
• Community research
• Advertise with DZone

CONTRIBUTE ON DZONE

• Become a Contributor
• Core Program
• Visit the Writers' Zone
• Terms of Service
• Privacy Policy
• 3343 Perimeter Hill Drive
• Nashville, TN 37211
• [email protected]

Let's be friends:

ASP.NET MVC Tutorial For Beginners and Professionals

In this ASP.NET MVC   Tutorial For Beginners and Professionals series, we covered all the features of ASP.NET MVC. You will learn from the basic to advanced level features of ASP.NET MVC as we progress in this ASP.NET MVC tutorial. Many new developers and students are struggling to learn ASP.NET MVC quickly. And in ASP.NET MVC, many technologies are used, like JavaScript, jQuery, AngularJS, Typescript, Dapper, Entity framework, and much more, and because of this, developers and students get confused about how to start learning. Considering the above problem and helping students and developers who want to learn ASP.NET MVC quickly, I have decided to start ASP.NET MVC Tutorials.

This ASP.NET MVC Tutorial For whom?

This ASP.NET MVC Tutorial is designed for beginners and professional developers who want to learn ASP.NET MVC step by step. Here, in these ASP.NET MVC Tutorials , we provide a hands-on approach to the subject with step-by-step program examples that will assist you in learning and putting the acquired knowledge into practice.

What is ASP.NET MVC?

The ASP.NET MVC is an open-source framework built on top of the Microsoft .NET Framework to develop a web application that enables a clean code separation. ASP.NET MVC framework is the most customizable and extensible framework provided by Microsoft. In other words, we can say that the ASP.NET MVC is a web application development framework from Microsoft that is based on the MVC (Model-View-Controller) architectural design pattern. Here’s a breakdown of its core components and features:

Core Components of ASP.NET MVC

• Represents the data and business logic of the application.
• Consists of data transfer objects (DTOs), data access logic, and service layers.
• Responsible for accessing and storing data and the associated logic.
• Handles the presentation layer of the application.
• It uses the Razor view engine to embed .NET code within HTML.
• Responsible for displaying the application’s user interface.

Controller:

• Acts as an intermediary between the Model and View.
• Processes incoming requests manipulates data using the Model, and renders the final output to the View.
• Each controller action typically corresponds to a specific operation and view.

Key Features of ASP.NET MVC

• MVC Architecture: Understanding the Model-View-Controller pattern separates an application into three main logical components, each with distinct responsibilities.
• Controllers: How to write controllers to handle user input and interactions and to execute appropriate application logic.
• Views: Creating views using Razor syntax for dynamic rendering of HTML. Understanding how views display data provided by controllers.
• Models: Defining models representing the application’s data and the business logic to manipulate this data.
• Routing: Learning about ASP.NET MVC’s URL routing framework, which maps URLs to controllers and actions.
• Entity Framework: Integrating Entity Framework for data access simplifies the process of working with databases using .NET objects.
• Data Annotations and Validation: Utilizing data annotations for model validation and implementing custom validation rules.
• Dependency Injection: Understanding the role of dependency injection in ASP.NET MVC for creating loosely coupled applications.
• Unit Testing: Techniques for writing unit tests for ASP.NET MVC applications, ensuring stability and reliability.
• Security: Implementing authentication, authorization, and security best practices in ASP.NET MVC applications.
• AJAX and jQuery: Enhancing applications with AJAX for asynchronous operations and using jQuery for simplified HTML document traversing, event handling, and animation.
• Web API: Building RESTful services with ASP.NET Web API and integrating them with MVC applications.
• Deployment: Strategies for deploying ASP.NET MVC applications to various hosting environments, including IIS and cloud platforms like Azure.
• Advanced Topics: Exploring advanced topics like custom helpers, and filters and creating modular applications using areas.

When to Use ASP.NET MVC?

ASP.NET MVC is a framework used in Web application development, offering a range of benefits due to its Model-View-Controller architecture. Here are some of the primary uses and advantages of ASP.NET MVC:

• Web Application Development: Primarily used for building dynamic, robust, and scalable web applications. Its MVC architecture makes it an excellent choice for enterprise-level applications.
• Single Page Applications (SPAs): ASP.NET MVC can be used to develop SPAs by integrating with client-side frameworks like Angular, React, or Vue.js, providing a seamless and interactive user experience.
• E-commerce Websites: Its robustness and scalability make ASP.NET MVC a good choice for developing e-commerce websites, which often require handling high volumes of transactions and user data.
• CMS (Content Management Systems): ASP.NET MVC can be used to create content management systems that are customizable and scalable, offering a flexible platform for website content administration.
• Dynamic Websites with Custom Content: The framework allows for the dynamic generation of HTML content and can be used to build websites where content changes frequently, such as news portals or blog platforms.
• Enterprise-Level Applications: Due to its ability to handle complexity and its support for test-driven development (TDD), it is often used in large-scale applications in enterprise environments.
• Interactive and Data-Driven Applications: Applications that require extensive data interaction, such as dashboard reporting tools, data analysis platforms, and other business applications, can be efficiently built using ASP.NET MVC.
• Cloud-Based Applications: ASP.NET MVC is compatible with cloud services like Microsoft Azure, enabling the development of cloud-based applications that are scalable and reliable.
• Educational Platforms and Forums: Its security features and scalability make it suitable for developing educational platforms, online learning portals, and discussion forums.

Note: The ASP.NET MVC is not something that is built from ground zero. It is a complete alternative to t raditional ASP.NET WebForms. It is built on top of ASP.NET, so developers enjoy almost all the ASP.NET features while building the MVC application.

What will you learn from these ASP.NET MVC Tutorials?

You will learn everything from the basics to advanced-level concepts of the ASP.NET MVC Framework. Some of the concepts are as follows:

Basic – ASP.NET MVC Routing – ASP.NET MVC SQL Server and Entity Framework – ASP.NET MVC   HTML Helpers – ASP.NET MVC  Attributes – ASP.NET MVC Data Annotations – ASP.NET MVC Action Results – ASP.NET MVC Views – ASP.NET MVC Filters – ASP.NET MVC Security – ASP.NET MVC Identity – ASP.NET MVC   ASP.NET MVC – Interview Questions and Answers

Prerequisites to Learn ASP.NET MVC

To effectively learn ASP.NET MVC, certain prerequisites will help you grasp the concepts more easily and apply them effectively. Here’s a list of the key prerequisites:

• Basic Knowledge of C#: ASP.NET MVC is built on the .NET framework, and C# is the primary language for writing server-side code. Familiarity with C# syntax, basic programming constructs, and object-oriented programming concepts is crucial.
• Understanding of .NET Framework: A general understanding of the .NET Framework, its components, and how it works will be beneficial. This includes knowledge of .NET classes and the CLR (Common Language Runtime).
• HTML, CSS, and JavaScript: Since ASP.NET MVC is used for web development, a solid understanding of HTML (for structuring web content), CSS (for styling), and JavaScript (for client-side scripting) is essential.
• Basic Understanding of Web Development Concepts: Familiarity with how web applications work, understanding of client-server architecture, HTTP/HTTPS, request/response lifecycle, and the concept of state management in web applications.
• Database Knowledge: Understanding basic database concepts and experience with SQL (Structured Query Language) is important, as most web applications interact with a database. Knowledge of Entity Framework, a popular ORM (Object-Relational Mapping) tool in .NET, is also beneficial.
• Familiarity with MVC Architecture: While not strictly necessary, knowing what MVC (Model-View-Controller) is and how it separates an application into three main components will be a significant advantage.
• IDE (Integrated Development Environment): Familiarity with Visual Studio, the primary IDE for .NET development, will be helpful. It offers various tools and features that simplify coding, debugging, and deploying ASP.NET MVC applications.
• Basic Understanding of Client-Side Technologies: Knowledge of client-side technologies like jQuery, AJAX, and Bootstrap for front-end development can be advantageous.
• Willingness to Learn and Experiment: A proactive approach to learning and the willingness to experiment with code is essential in adapting to web development challenges with ASP.NET MVC.
• Version Control Systems: Basic knowledge of version control systems like Git can be beneficial, especially for collaborative development and source code management.

Note: If we missed any topics in this ASP.NET MVC Tutorial course, please let us know by commenting in the comment section, and we definitely cover those topics as soon as possible. 

Course Information

Course instructor.

Author: Pranaya Rout Pranaya Rout is a Senior Technical Architect with more than 11 Years of Experience, Microsoft MVP, Author, YouTuber, and Blogger eager to learn new technologies. Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Online Training Program

Asp.net core mvc and web api online training program, asp.net mvc – basic, introduction to asp.net mvc framework, creating first asp.net mvc application, asp.net mvc file and folder structure, controllers in asp.net mvc, asp.net mvc views, asp.net mvc models, viewdata in asp.net mvc, viewbag in asp.net mvc, strongly typed views in asp.net mvc, viewmodel in asp.net mvc, tempdata in asp.net mvc, asp.net mvc – routing, routing in asp.net mvc, creating custom routes in asp.net mvc, route constraints in asp.net mvc, attribute routing in asp.net mvc, asp.net mvc attribute routing with optional parameter, route prefix in asp.net mvc attribute routing, route constraints in asp.net mvc attribute routing, default route and route name in attribute routing, asp.net mvc – sql server, entity framework in asp.net mvc, actionlink html helper in asp.net mvc, working with multiple tables in asp.net mvc using entity framework, business objects as model in asp.net mvc, formcollection in asp.net mvc, model binding in asp.net mvc, updatemodel and tryupdatemodel in asp.net mvc, editing a model in asp.net mvc, unintended updates in asp.net mvc, bind attribute in asp.net mvc, model binding using interface, deleting database records in asp.net mvc, crud operations using entity framework, customizing auto generated index and create views, customizing auto generated edit view, asp.net mvc – html helpers , html helpers in asp.net mvc, textbox html helper in asp.net mvc, dropdownlist html helper in asp.net mvc, radiobutton html helper in mvc, checkbox html helper in asp.net mvc, listbox html helper in asp.net mvc, editor html helper in asp.net mvc, password field and hidden field html helper in asp.net mvc, templated helpers in asp.net mvc, customizing templated helpers in asp.net mvc, custom html helpers in asp.net mvc, asp.net mvc – attributes, attributes in asp.net mvc (part 1), attributes in mvc (part 2), action selectors in asp.net mvc, action verb selector in asp.net mvc, non-action selector in asp.net mvc, asp.net mvc – data annotations, data annotations in asp.net mvc, required and stringlength attribute in mvc, regular expression attribute in asp.net mvc, range attribute in asp.net mvc, custom validation attribute in mvc, datatype and compare attributes in asp.net mvc, validation message and validation summary in asp.net mvc, remote validations in asp.net mvc, remote validation in asp.net mvc when javascript is disabled, asp.net mvc – action results, action results in asp.net mvc, view result and partial view result in mvc, json result in asp.net mvc, javascript result in asp.net, file result in asp.net mvc, content result in asp.net mvc, empty result in asp.net mvc, redirect, redirecttoroute and redirecttoaction in asp.net mvc, status results in asp.net mvc, asp.net mvc – views, partial views in asp.net mvc, different ways to render partial view in asp.net mvc, razer view syntax in mvc, asp.net mvc – filters, filters in asp.net mvc, exception filter in asp.net mvc, custom exception filter in asp.net mvc, error pages based on status code in asp.net mvc, childactiononly attribute in asp.net mvc, outputcache attribute in mvc, varybyparam location and cacheprofiles in outputcache attribute in mvc, custom outputcache attribute in asp.net mvc, validateinput attribute in asp.net mvc, requirehttps attribute in asp.net mvc, custom action filters in asp.net mvc, filter overrides in asp.net mvc, authorization filter in asp.net mvc, custom authorization filter in mvc, custom authentication filter in mvc, asp.net mvc – security, authentication and authorization in asp.net mvc, forms authentication in asp.net mvc, role-based authentication in asp.net mvc, role-based menus in mvc, asp.net mvc – advanced, asp.net mvc request life cycle, asp.net identity – mvc, introduction to asp.net identity, asp.net identity architecture, getting started with asp.net identity, setting up asp.net identity with ef code-first, customizing asp.net identity tables, create a user account in asp.net identity, update and delete a user account in asp.net identity, update user password in asp.net identity, forget password in asp.net identity, custom password policy in asp.net identity, username and email policy in asp.net identity, login a user in asp.net identity, how to implement remember me feature in asp.net identity, how to get the current logged in user id in asp.net identity, how to logout a user in asp.net identity, how to lockout a user account in asp.net identity, authorization in asp.net identity, roles management in asp.net identity, how to add, update, and delete roles in asp.net identity, how to assign a user to a role in asp.net identity, how to get a user roles in asp.net identity, role-based authorization in asp.net identity, popular asp.net mvc books, most recommended asp.net mvc books, 19 thoughts on “asp.net mvc tutorial for beginners and professionals”.

Hello Team. Good day!. I need Suggestion. I want to develop a strong Inventory web based application project with these technologies(C#, Asp.net mvc, WebApi, Restful webservices, Html, Css, Bootstrap, Javascript, Jquery, Entity framework, Ado.net, SQL Server, Razor, Ajax, Json, Visual Studio 2019). These technologies are fit to develop Asp.net mvc – webapi application. please need suggestion. thanks in advance😍😍

Please send the code after completion

Best Tutorials ever!!!!

Thanks, Being a developer also this helped me a lot.

Stumbled on this site yesterday. Just what I needed. Great Job !

Please provide dependency injection in mvc

Dear Sir, It is requested, Kindly do the tutorial for SiteCcore Tutorials.

Dear Sir, It is requested, Kindly do the tutorial for CRM Tutorials.

Best tutorial Brother

Thanks. very helpful

Dear team, It is requested, Kindly do the tutorial on ASP.NET.

Please join our Telegram Channel and Facebook Group to learn more and clear your doubts on DOT NET. Also, you can share your thoughts on DOT NET.

Telegram Channel: https://telegram.me/dotnettutorials Facebook Group: https://www.facebook.com/groups/501905403704561

Please Like and Subscribe to our YouTube Channel. Here, we are providing Dot Net, Dot Net Core Videos, Live Training Videos, Interview Preparation Videos, and Many More. YouTube Channel: https://www.youtube.com/c/DotNetTurorials

Great site for all developers and to crack any of the interview.

Please add bundling and minification topic in mvc

Here all content so useful and helpful for beginners and experienced. This site is so amazing, This site gives good knowledge of ASP .NET, This is very helpful for me.

Can you make new tutorial about MVVM pattern. It’s powerful. Thanks

please provides a cross site scripting concept in MVC

Please upload videos in You tube. it will help to us

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Getting started with ASP.NET MVC 5

• 12 contributors

by Rick Anderson

An updated version of this tutorial is available here using the latest version of Visual Studio . The new tutorial uses ASP.NET Core MVC , which provides many improvements over this tutorial.

This tutorial teaches ASP.NET Core MVC with controllers and views. Razor Pages is a new alternative in ASP.NET Core, a page-based programming model that makes building web UI easier and more productive. We recommend you try the Razor Pages tutorial before the MVC version. The Razor Pages tutorial:

• Is easier to follow.
• Covers more features.
• Is the preferred approach for new app development.

This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017 . The final source code for the tutorial is located on GitHub .

This tutorial was written by Scott Guthrie (twitter @scottgu ), Scott Hanselman (twitter: @shanselman ), and Rick Anderson ( @RickAndMSFT )

You need an Azure account to deploy this app to Azure:

• You can open an Azure account for free - You get credits you can use to try out paid Azure services, and even after they're used up you can keep the account and use free Azure services.
• You can activate MSDN subscriber benefits - Your MSDN subscription gives you credits every month that you can use for paid Azure services.

Get started

Start by installing Visual Studio 2017 . Then, open Visual Studio.

Visual Studio is an IDE, or integrated development environment. Just like you use Microsoft Word to write documents, you'll use an IDE to create applications. In Visual Studio, there's a list along the bottom showing various options available to you. There's also a menu that provides another way to perform tasks in the IDE. For example, instead of selecting New Project on the Start page , you can use the menu bar and select File > New Project .

Create your first app

On the Start page , select New Project . In the New project dialog box, select the Visual C# category on the left, then Web , and then select the ASP.NET Web Application (.NET Framework) project template. Name your project "MvcMovie" and then choose OK .

In the New ASP.NET Web Application dialog, choose MVC and then choose OK .

Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! This is a simple "Hello World!" project, and it's a good place to start your application.

Press F5 to start debugging. When you press F5 , Visual Studio starts IIS Express and runs your web app. Visual Studio then launches a browser and opens the application's home page. Notice that the address bar of the browser says localhost:port# and not something like example.com . That's because localhost always points to your own local computer, which in this case is running the application you just built. When Visual Studio runs a web project, a random port is used for the web server. In the image below, the port number is 1234. When you run the application, you'll see a different port number.

Right out of the box this default template gives you Home , Contact , and About pages. The image below doesn't show the Home , About , and Contact links. Depending on the size of your browser window, you might need to click the navigation icon to see these links.

The application also provides support to register and log in. The next step is to change how this application works and learn a little bit about ASP.NET MVC. Close the ASP.NET MVC application and let's change some code.

For a list of current tutorials, see MVC recommended articles .

Was this page helpful?

Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback .

Submit and view feedback for

Additional resources

• Latest Articles
• Top Articles
• Posting/Update Guidelines
• Article Help Forum

• View Unanswered Questions
• View All Questions
• View C# questions
• View C++ questions
• View Javascript questions
• View Visual Basic questions
• View Python questions
• CodeProject.AI Server
• All Message Boards...
• Running a Business
• Sales / Marketing
• Collaboration / Beta Testing
• Work Issues
• Design and Architecture
• Artificial Intelligence
• Internet of Things
• ATL / WTL / STL
• Managed C++/CLI
• Objective-C and Swift
• System Admin
• Hosting and Servers
• Linux Programming
• .NET (Core and Framework)
• Visual Basic
• Web Development
• Site Bugs / Suggestions
• Spam and Abuse Watch
• Competitions
• The Insider Newsletter
• The Daily Build Newsletter
• Newsletter archive
• CodeProject Stuff
• Most Valuable Professionals
• The Lounge  
• The CodeProject Blog
• Where I Am: Member Photos
• The Insider News
• The Weird & The Wonderful
• What is 'CodeProject'?
• General FAQ
• Ask a Question
• Bugs and Suggestions

Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap : Part - 1

• Download Application.zip

Another MVC Application: Introduction

All websites are growing faster these days, and once it grows, it is very hard to write, organize and maintain. As we add new functionality or developer to a project, any large web applications with poor design may be go out of control. So the idea behind this article is to design a website architecture that must be simple, easily understandable by any web designer (beginner to intermediate) and Search Engines. For this article I am trying to design a website for any individuals to maintain their contact details online. However, in future, the same application could be used by large community all over the world with added functionality and modules. So, the design should be easily adaptable in order to cope with the future growth of business.

In this article I will talk about creating and designing User Interface (UI) in such a manner so that UI will be separated from the business logic, and can be created independently by any designer/developer. For this part we will use ASP.Net MVC, Knockout Jquery and Bootstrap.

The Second part of this series is more about database design and implementing business logic using structured layers using SQl Server 2008, Entity Framework, and Castle Windsor for Dependency Injection.

Separation of Concern: Primary Objective

The key concept is stripping out most or all logic. Logic should not be bound to a page. What if we need to re-use the logic from one page in another? In that case we will be tempted to copy-and-paste. If we are doing this then our project will become maintainable. Another important concept is to separate data access layer from any business logic, as we are planning to use Entity Framework this is less of a problem as EF should already have this end separate. We should be able to easily move all our EF files to another project and simply add a reference to the projects that need it. Below is the high level design:

And, the final solution will look like below image in Visual Studio :

Seven Projects in One Solution : Is it required ?

It is all about your decision… The proposed designed will offer some rather relevant benefits, which include:

• Separation of Concern: Design should allow clear and defined layers; means segregate application into distinct areas whose functionality does not overlap. such that UI-designers can focus on their job without dealing with the business logic (Application.Web), and the core developer can only work on main business logics (Application.DTO or Application.Manager).
• Productivity: It is easier to add new features to existing software, since the structure is already in place, and the location for every new piece of code is known beforehand, so any issue can be easily identified and separated to cope with complexity, and to achieve the required engineering quality factors such as robustness, adaptability, maintainability, and reusability.
• Maintainability: It is easier to maintain application, due to clear and defined structure of the code is visible and known, so it’s easier to find bugs and anomalies, and modify them with minimal risk.
• Adaptability: New technical features, such a different front ends, or adding a business rule engine is easier to achieve, as your software architecture creates a clear separation of concerns.
• Reusability: Reusability is another concern on designing any application, because it is one of the main factors to decrease the total cost of ownership, and our design should consider to what extent we can reuse the created Web application and different layers.

In last section of this article, we will discuss the functionality of each individual layer’s in details.

Tools & Technology

To achieve the final solution, we need below tools/dll:

• Visual Studio 2012
• ASP.NET MVC 4 with Razor View Engine
• Entity Framework 5.0
• Castle Windsor for DI
• SQL Server 2008/2012
• Knockout.js & JQuery
• Bootstrap CSS

What we are trying to achieve: Requirement

Screen 1: Contact List - View all contacts

Initial sketch:

Screen 2: Create New Contact

This screen should display one blank screen to provide functionalities as.

Screen 3: Update Existing Contact

This screen should display screen with selected contact information details.

Initial Sketch:

Part 1: Create Web Application (Knockout.js, Asp.Net MVC and Bootstrap): For Designers

Before kick-off the UI part, let us see what benefits we are getting using Knockoutjs and Bootstrap along with ASP.NET MVC 4.

Why Knockoutjs: Knockout is an MVVM pattern that works with a javascript ViewModel. The reason this works well with MVC is that serialization to and from javascript models in JSON is very simple, and it is also included with MVC 4. It allows us to develop rich UI's with a lot less coding and whenever we modify our data, Immediate it reflect in the user interface.

Why Bootstrap: Twitter Bootstrap is a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. It comes with bundles of CSS styles, Components and Javascript plugins. It provides Cross platform support, which eliminates major layout inconsistencies. Everything just works! Good documentation and the Twitter Bootstrap's website itself is a very good reference for real life example. And, finally, it saves me plenty of times, as it cut the development time to half with very less testing and almost zero browser issues. Some other benefits we can get by using this framework are:

• 12-Column Grid, fixed layout, fluid or responsive layout.
• Base CSS for Typography, code (syntax highlighting with Google prettify), Tables, Forms, Buttons and uses Icons by Glpyhicons .
• Web UI Components like Buttons, Navigation menu, Labels, Thumbnails, Alerts, Progress bars and misc.
• Javascript plugins for Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typehead.

In below steps, we will work through the layout and design to build UI for above requirement by using dummy javascript data.

Step 1: Create a new project as Blank Solution; name it as “Application”

Step 2: Right Click on Solution folder and add new Project of type ASP.NET MVC 4 as an Internet Application Template with View engine as Razor.

After Step 2 - the project structure should look like the below image

Step 3: Right click on References and click on Manage NuGet Packages. Type Bootstrap on search bar then click on Install button.

Step 4: add below line of code into BundleConfig.cs file under App_Start folder to add Knockoutjs and Bootstrap for every page

Also in _Layout,cshtml file under Views/Shared folder add below line to register knockout files as :

Step 4: Add a new folder name as Contact inside Views, and then add Index.cshtml as new View page. Then add a new Controller name it ContactController.cs inside Controller folder, and add a new Contact.js file under Scripts folder. Refer to below image.

Step 5: Finally modify the default map route in Route.config to point to Contact controller as:

And also modify the _Layout.cshtml file inside View/Shared as per the BootStrap Syntax. Below is the modified code:

Step 6: Now we are done with initial setup to run the application. The output is as below:

We will use this page to display the requirement for Screen 1 i.e. Contact List - View all contacts

Step 7: First we will create a dummy profile data as array in Contact.js (later we will fetch it from database), and then we will use this data to populate Grid.

Next, we will create ProfilesViewModel, a viewmodel class which hold Profiles, an array holding an initial collection of DummyProfile data. Note that it's a ko.observableArray , and it is the observable equivalent of a regular array, which means it can automatically trigger UI updates whenever items are added or removed.

And finally we need to activate Knockout using ko.applyBindings().

Step 8: Next we will write code in Index.cshtml page, that's supposed to display the Profile List. We need to use the foreach binding on <tbody> element, so that it will render a copy of its child elements for each entry in the profiles array, and then populate that <tbody> element with some markup to say that you want a table row (<tr>) for each entry.

If you run the application now, you should see a simple table of profile information as:

Remember for table style we are using Bootstrap’s css class. In above example it is ;

Step 9: Now we need to add Edit and Remove functionality for each row, and one more button at top to create a new profile. So let us do:

• Add one more <th> and <td> in our table template and bind it’s click event with removeProfile function in js.
• Modify First Name row to add link for Edit Profile and then bind its click event with editProfile function.
• Add one button for Create new profile and bind it with click event using createProfile function.

So out final code for Index.cshtml is :

And output is:

None of the added button and link will work, because we have not written any code for that, so let's fix that in next step.

Step 10: Add events for createProfile, editProfile and removeProfile in Contact.js

Now when we run our application and click on Remove button, then it will remove that profile from current array. As we define this array as observable, the UI will be kept in sync with changes to that array. Try it by clicking on Remove button. Edit link and Create Profile button will simply display the alert. So, let us implemented this functionality in next steps:

Step 11: Next we will add:

• A new Razor View inside Views/Contact as CreateEdit.cshtml, and register it in ContactController.cs class.
• A new js file named as CreateEdit.js inside Scripts folder.
• Modify createProfile and editProfile method of Contact.js, so that it will point to the CreateEdit page.

Running the application will now work for all the events in Contact List (screen -1). And create and Edit should redirect to CreateEdit page with required parameters.

Step 12: First we will start with adding Profile Information to this CreateEdit page. For that we need to do:

• We need to get profileId from url so, add below two lines on top of the CreateEdit.js page
• Define a dummy Profile data as array in CreateEdit.js
• Profile, a simple JavaScript class constructor that stores a profile’s FirstName, LastName and Email selection.
• ProfileCollection, a viewmodel class that holds profile (a JavaScript object providing Profile data) along with binding for saveProfile and backToProfileList events.
• And finally, activate Knockout using ko.applyBindings().

Step 13: Next we will write code in CreateEdit.cshtml page, that's supposed to display the Profile information. We need to use the “with” binding for profile data, so that it will render a copy of its child elements for a particular profile, and then assign the appropriate values. He code for CreateEdit.cshtml is as below:

Running the application will display the below screens :

For create New:

For existing record with profile Id 1:

Update any existing record and click on save with give below output:

As per requirement for this screen, we already have done:

2.1 User should be able to Enter his/her First name, Last Name and Email Address 2.6 Click on save button should save Contact details in Database and user will return back in Contact List page. 2.7 Click on Back to Profile button should return back the user to Contact List page.

In next step we will try to achieve below requirement:

Step 14: To achieve requirement no. 2.2 and 2.3, we need to do:

• Define a dummy PhoneType and PhoneDTO data as an array in CreateEdit.js. phoneTypeData will be used to bind dropdown to define the Phone Type for a particular Phone number.
• Profile, a simple JavaScript class constructor that stores a PhoneLine information which include its Phone Type i.e. whether its “Work Phone” or “Home Phone” etc. along with phone number.
• Modify ProfileCollection viewmodel class to also holds phoneNumbers along with binding for addPhone and removePhone events.

Step 15: Next we will add one more section to add Phone Information in CreateEdit.cshtml page, that's supposed to display the Phone information. As one profile can have multiple phone of different types, So, we will use the “foreach” binding for Phone numbers data, so that it will render a copy of its child elements for a particular profile, and then assign the appropriate values. Add below section in CreateEdit.cshtml just after Profile Information and before Save button.

Now the output to add new contact is:

And to edit existing Contact is:

So now we left only with below requirement:

Step 16: The requirement no. 2.4 and 2.5 are similar to Phone Information, below is the final code for CreateEdit.js and CreateEdit.cshtml files:

For CreateEdit.js

and, for CreateEdit.cshtml

So finally, Application will display screens as per the requirement:

Screen 2: Create New Contact - This screen should display one blank screen to provide functionality as.

Screen 3: Update Existing Contact - This screen should display screen with selected contact information details.

Validation:

We are almost done with designing part of our application .The only thing left now, is to manage validation when the user clicks on “Save” button. Validation is the major requirement and now a day’s most ignorant part for any web application. By proper validation, user can know what data needs to be entered. Next in this article, I am going to discuss KnockoutJS Validation library which can be downloaded using NuGet. Let us check some of the most common validation scenarios, and how to achieve it using knockout validation.

Scenario 1: First Name is a required field in form

Scenario 2: Maximum number of character for First Name should not exceed 50 and should not be less than 3 character

Scenario 3: First Name is a required field in form and maximum number of character for First Name should not exceed 50 and should not be less than 3 character.

Scenario 5: Email is a required field and should be in proper email format

Scenario 6: Date of Birth is a required field and should be in proper date format

Scenario 7: Price is a required field and should be in proper number or decimal format

Scenario 8: Phone Number is a required field and should be in proper US format

Note: A valid US phone number has the following format: 1–xdd–xdd–dddd The "1–" at the beginning of the string is optional and so are the dashes. x is any digit between 2 and 9 while d can be any digit.

Scenario 9: ToDate field must be greater than FromDate field

Scenario 9: Phone number should accept only -+ () 0-9 from users

So, far we have seen different type of validation scenarios and their syntax; now let us implement it in our application. For that first download the library knockout.validation.js using NuGet. Right now our validation script is fully completed and should look like this :

After validation our final solution looks like below screen after click on “Save” button:

Conclusion:

We’ve done it. Well, you have done it! I hope you enjoyed this tutorial and learned something.

In this article, we talked about achieving our UI without knowing any actual implementation (databases interaction) i.e. UI is created independently by any designer/developer without knowing the actual business logic. !!!That’s great!!!

In next part of this article, I will talk about how to design database and how to implement business logic using structured layers.

If you have any questions feel free to ask; I will be glad to talk more in the comments. Thanks for your time!

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Comments and Discussions

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

How to Build a Web Application with ASP.NET MVC 5

Parag Mehta

Quick Overview: Web Application with ASP.NET MVC 5: ASP.NET MVC 5 is a top-notch framework for developing web applications. It leverages the MVC architecture and also has numerous benefits, such as scaffolding, filter overriding, and more. In this blog, you will discover the ASP.NET MVC 5 benefits and the steps to create an application using it.

Table of Contents

Introduction

A dynamic web application is what you need in this technological world to improve business operations and take an edge in the industry. In a market full of development technologies, ASP.NET MVC 5 is considered a reliable choice for web apps. 

ASP.NET MVC web applications are easy to develop, test, and maintain. Also, the services offered by an ASP.NET MVC development company are quite affordable. This technology is a boon for all, and you should know how exactly you can build an application with it. 

So, let’s get started to quickly understand the ASP.NET MVC application project development. 

What is ASP.NET MVC 5?

ASP.NET MVC 5 is a dynamic web application development framework from Microsoft, which is based on the Model, View, and Controller architecture. This architecture separates the business logic from the interface but also maintains communication between them for efficient working. In simple terms, you are free to modify the backend without impacting the frontend code and vice versa. Nowadays, most organizations prefer this approach, as it supports efficiently performing software development, deployment, and maintenance. Additionally, ASP.NET MVC 5 is used for building web applications of any size and type. It’s quite a robust, high-performing, TDD-friendly, and secure framework.

Why You Should Use ASP.NET MVC Web Development Framework?

There are numerous reasons that can attract you to use the ASP.NET MVC 5 framework. But, the following are the ones that are gonna clear your thoughts about choosing it for dynamic web applications development. 

1: Bootstrap Support

In the ASP.NET MVC 5, Bootstrap has replaced the default MVC template. It leverages you to take advantage of an intuitive grid system and component library to make the interface more responsive and elegant. Due to it, you also get the following benefits: 

• Interface development is completed within minimal time. 
• The user interface becomes more responsive, leading to captivating end-users and increasing retention and conversion. 
• It makes the application highly compatible with HTML and CSS templates. 
• You don’t need to download any additional files, as they’re available by default in the ASP.NET MVC 5 web framework. 

2: Built-in Authentication Filter

The authentication mechanism is one of the most crucial security features that must be embedded in every application. It helps to verify the user credentials and allows only legitimate ones to access the resources. 

In ASP.NET MVC 5, you can implement an authentication mechanism on a control basis. For instance, if you want only the administrator to modify basic user information, it’s possible with ASP.NET MVC 5 authentication. 

Moreover, this authentication can also be configured to custom logic and to all the application controls per your requirements. It will work before the authorization mechanism to let only authorized persons inside and halt unauthorized ones. 

3: Filter Overriding 

With the introduction of filter overriding, ASP.NET MVC 5 has been empowered, and its flexibility has also increased. It’s highly beneficial in controlling the application flow and maintaining global controls. Whether it’s an action or a controller, filter overriding supports customizing everything according to specific business, technical, and user needs. 

In addition, you can exclude some controllers from the global filters list. Only the required actions and controllers will work as per the filter, and your task of repeating the filter configuration will be eliminated. Thus, time and effort will be saved, making the development process faster. 

4: Scaffolding Code Generation 

For improving the code generation speed, consistency, and accuracy of logic, scaffolding is a high-end feature of the ASP.NET MVC 5 framework. It helps to automatically create the code, which works efficiently with all three components of MVC architecture – Model, View, and Controller. 

Also, it adds the required boilerplate code to the application along with the dependencies needed to run it. Once you enable this feature, you get a personal coding assistant and support to complete the project within a minimal time and with utmost accuracy. Furthermore, it’s also beneficial in terms of automated MVC generation per database schema. 

5: Razor SDK Support 

 You can impeccably use Razor SDK with ASP.NET MVC 5. It lets you create alluring user interfaces, providing data-driven views to end-users. Also, it seamlessly works with the business logic and ensures to provide a seamless experience across devices and platforms. 

In addition, due to the easy-to-understand syntax and implementation procedure, developers can effortlessly develop complex application features. It leads you to build a high-end application within minimal time, resources, effort, and cost. Also, its maintainability is quite affordable, and it can be managed single-handedly. 

6: ASP.NET Identity 

ASP.NET identity is the primary feature and benefits that you must know about. It’s one of the main reasons behind the usage of MVC 5 technology. Once you start utilizing the ASP.NET MVC 5, you can avail of the following identity benefits: 

• It lets you utilize all ASP.NET frameworks, such as Web API, Web Pages, Web Forms, SignalR, and more. 
• It helps you integrate third-party authentication and login mechanisms. For example, you can allow your users to log into the application using their Gmail, Facebook, Twitter, GitHub, or similar accounts. 
• It enables the application to store all the details and maintain persistence throughout the workflow. 
• It supports retaining the application security and data integrity, availability, and confidentiality. 

7: One ASP.NET 

One ASP.NET lets you use any of the compatible technologies and merge them together to build the features of your choice. For instance, if you want your ASP.NET MVC 5 app to offer real-time status or use similar data, then you can integrate SignalR with it. 

Similarly, it makes the usage of Web Forms, Web API, and all such technologies possible with ASP.NET. You get the advantage of choosing between the best of every tech and utilizing it in your software. Thus, it’s an easy way to develop a masterpiece. 

8: Attribute Routing 

With the help of attribute routing, you can gain better control over your Web APIs and the data being transmitted through them. Also, it eases the task of defining hierarchies and routes directly to the controllers and actions. 

Furthermore, it helps with the following tasks: 

• It eases the troubleshooting and debugging operations by providing accurate router details. 
• It performs the decoupling of actions and controllers from the defined route. 
• It helps in quickly aligning two or more routes to a single action. 
• The probability of an error is minimized with attribute routing.

The Process To Follow For ASP.NET MVC Application Project

Here are some of the general steps to consider while developing any of the ASP dot net MVC 5 projects.

Step 1: Fulfill all the requisites, such as downloading the required IDE, packages, and third-party applications needed for development, testing, and maintenance. In addition, tune the hardware and operating system according to the project.

Step 2: Utilize the right pre-built project structure in the Visual Studio IDE. In the next section, we have demonstrated all the required steps. You can follow them to understand the fundamentals.

Step 3: Firstly, focus on creating the user journey and interface. It will help you build the appropriate logic and algorithms to perform every task and make the application intuitive.

Step 4: According to the features and functionalities of your application, create the models inside the “Models” folder. Models will use all the data and entities associated with your software.

Step 5: Now, navigate to the “Controllers” folder to create the individual controllers for the defined models and views. In addition, configure the home controller according to the required set of actions you need.

Step 6: After model, view and controller, configure the routing for your application. In ASP.NET MVC 5, you get the benefit of attribute-based routing, helping to define the specific action and associated controller. It will help the app process different URLs and accurately respond to them.

Step 7: After all the development, test your application using manual and automated tools. Also, if any loophole is identified, patch it before deployment.

Step 8:  Lastly, configure your hosting server and deploy the application. And that’s how you can design, develop, test, and deploy any application based on the ASP.NET MVC 5 framework.

A Quick Demo: Dynamic Web Application Development with ASP.NET MVC 5

In this demo project, we’ll be using the Visual Studio IDE version 2019. You should also download the same or the newer version and perform the practical simultaneously to understand every step. We’ll be creating a dynamic web application, providing the requested employee details.

Step 1: Open the Visual Studio on your desktop and click on the “Create a new project” option.

Step 2: Use the search bar and input “ASP.NET Web”. You will see a number of pre-built projects and templates. Among them all, choose “ASP.NET Web Application (.NET Framework), as highlighted in the snippet below.

Following it, hit on the “Next.”

Step 3: Input the details of your project. For this demo, we have defined the name as “MVCFirstProject.” Further, choose the location where you want Visual Studio to save your project, then select a solution name, and lastly, select the version of the .NET framework that you want to utilize.

After you input all the details, click “Create.”

Step 4: Now, the MVC project has been created, and you can see the file structure in the Solutions Explorer tab. The structure will be similar to the following snippet.

By analyzing the file structure, you can see that the folders for Model, View, and Controller are different, meaning that you can individualize their development. In addition, there are a lot more folders for content, controllers, fonts, scripts, app data, views, app start, and more.

Step 5: Undergo the files that you want to edit and modify them per requirements.

For instance, under the “App_Start” folder, three files are available, namely “BundleConfig.cs”, “FilterConfig.cs,” and “RouteConfig.cs.”

Click on the “RouteConfig.cs” file to open and view its content. You will see a similar code structure as below. But we have modified it according to our requirements. In the last statement, Home is defined as the controller, and Index is defined as the action.

The URL in this route file uses the {Controller}/{action}/{id} syntax. Whenever the ASP.NET MVC 5 application receives a request in a similar format, it will send a reply to the end user. Further, in case the request doesn’t align with the defined syntax, an error will be triggered and showcased.

Additionally, among all three components (controller, action, and id), it’s compulsory for the URL to contain “id” information. If details of the other two are not available, the application will use the default value.

Step 6: After saving the content of the “RouteConfig.cs” file, go to the “Models” folder.

Inside the “Models” folder, add a model in which we’ll be defining some properties. These properties will help you to fetch employee details when requested by the end user. To do so, select the “Models” folder, right-click on it, and select “Add.” Further, choose “class” and name it “Employee. cs” and click on “Add” again.

Open the “Employee.cs” file and add the below-provided code to it.

Save the file and move further.

Step 7: Now, add a controller for the employee model. For this, navigate to the “Controllers” folder and right-click on it. Further, select “Add” -> “Controller” -> “MVC 5 Controller” -> “Add.” In addition, name it as “EmployeeController” for this project.

Once the controller is created, go to the “Views” folder and expand it. You will see that a new file is created with the same name as the controller you created.

Following it, open the new controller that you created and add the below code to it.

Step 8: Go to the “Views” folder -> right-click on the “Employee” folder -> “Add,” -> “Add View.” After this, set the view name as “EmployeeInfo” and choose the “Add” option. As a result, a file will be generated with the name “EmployeeInfo.cshtml.”

Now, open the file (EmployeeInfo.cshtml) and add the code below.

Step 9: We have completed all the configurations. So, you should build, compile, and run the application. To do so, open your web browser and navigate to the local host address, which is “https://localhost:44332/Employee/EmployeeInfo”.

As you can see, the URL has all three components that we defined. Once you open this URL, the following output will be displayed.

Similarly, you can create any dynamic web application with ASP.NET MVC 5 web development framework.

Looking to Effortlessly Boost Your .NET Project?

Equip your team with exceptional .NET expertise. Bring our skilled .NET Developer on board for your projects now!

Concluding Up

ASP.NET MVC 5 is a new-age development framework that works on the principle of model-view-controller architecture. To utilize it, you need Visual Studio IDE and the packages according to your project requirements. It helps to speed up development, minimize resource utilization, and establish seamless communication between all the components.

Thus, for dynamic web app development , ASP dot net MVC 5 is a web framework that is all you need.

Verified Expert in Software & Web App Engineering

Parag Mehta, the CEO and Founder of Positiwise Software Pvt Ltd has extensive knowledge of the development niche. He is implementing custom strategies to craft highly-appealing and robust applications for its clients and supporting employees to grow and ace the tasks. He is a consistent learner and always provides the best-in-quality solutions, accelerating productivity.

Let’s discuss your project

Positiwise is an elite software development service company.

Partner with Top-Notch Web Application Development Company!

Discuss your Custom Application Requirements on [email protected] or call us on +1 512 782 9820.

Creating ASP.NET Web API with MVC 6

ASP.NET Web API uses the power of HTTP. As developers, we all know that the HTTP protocol is not just limited to delivering web pages, but is being used to build APIs on top of it that expose services and data. The advantages of HTTP is it is simple and easy to use and all platform supports HTTP. This advantage is exploited by web developers to create HTTP services that are available to a broad range of clients varying from desktop to web to devices. While subscribing for data over HTTP services, the client does not need to use any robust server-side language e.g. C#, Java, etc. Instead a simple JavaScript framework or library can call the HTTP service and perform data Read/Write operations.

In this article, we will build an ASP.NET Web API using MVC 6. In earlier versions of ASP.NET, Web API was provided as a separate Web API framework, but going forward in the ASP.NET 5 release, Web API is merged with MVC, termed as MVC 6. This provides an advantage of creating Web UI using HTML and API services using a single framework.

The following diagram explains Web API in application development

The above diagram provides conceptual use of Web API. It is the Controller class which accepts HTTP request messages of type GET, POST, PUT and DELETE. Once the request message is received, the controller class performs server side processing e.g. using Data Access Repository, Data Access Layer and performs the Read/Write operations to the database. The Read/Write operations uses Model objects (or entities). Once the required processing is over on the server-side, the HTTP response is sent back to the client by the controller class. The client can be any type of an application ranging from Desktop to Web to Mobile application.

Implementing the ASP.NET Web API application

To implement the Web API application, we will use Visual Studio 2015 and ASP.NET 5 RC1.

Editorial Note: The ASP.NET 5 RC tools are not installed when you install the Visual Studio 2015 Update 1. In order to make the RC tools available, start a new Web Project > ‘New ASP.NET Project’ window > choose a web application template called ‘Get ASP.NET 5 RC’ template. When you choose that template, the RC version of ASP.NET 5 tools and frameworks get installed.

Step 1: Open Visual Studio 2015 and create a new ASP.NET application as shown in the following image:

Click on the OK button. The following window will be displayed from where we can select the Web API application from ASP.NET 5 Templates as shown in the following image

Step 2: In the project, add a Models folder and add a new class file in it containing the following code

The above class file contains following classes

· PersonInfo - This is the entity class representing schema for the Person information.

· PersonData - This class is derived from List<PersonInfo> class. This class contains constructor with some initialization data.

· DataAccess - This class performs CRUD operations using PersonInfo class.

Step 3: In the project, add a new folder of the name Repository. This will encapsulate the data access layer and contains logic for accessing the DataAccess class. The repository isolates the data access layer from the controller.

The above code is the most important part of the application.

This code contains the IPersonRepository<T,TPk> interface. This is a generic interface where T is class and TPk is the input parameter which is the going to be the id. The class PersonRepository implements IPersonRepository interface and implements its methods. These methods call methods from the DataAccess class which we have created in the Models folder.

Step 4: In the previous step, we have implemented the Repository which this decouples the DataAccess from the Controller. To use this Repository, we need to register it in the ASP.NET 5 dependency Injection container. In the project, we have the Startup.cs class containing the ConfigureServices method . In this method we will register the Repository using the following code:

Using the AddSingleton() method, we register the Repository in the Dependency Injection. This method will create a singleton instance for the PersonRepository object.

Step 5: In the Controllers folder, add a new Web API Controller class as shown in the following image:

This will add a controller with CRUD action methods. Remove the already available code from the class and add the following code in it:

In the above code, we have the Route attribute applied on the Controller class. Set the value of the attribute as Route [“api/Person”]

The above code declares the Repository object using the following code:

The attribute FromServices tell MVC to inject the IPersonRepository in the current controller. The controller class contains methods for HTTP actions for performing CRUD operations.

Step 6: To launch the Person API, we need to make changes in the launchSettings.json file in the Properties folder of the project. Change the profiles , launchUrl property as shown in the following code:

Testing Web API in Fiddler

We will test our Web API using Fiddler. Fiddler is an HTTP debugging proxy server application written by Eric Lawrence. This tool can be downloaded from this link .

Launch Web API using F5. Open the Fiddler tool.

Testing GET Operation

In the Composer tab of the fiddler tool, add the following URL,

http://localhost:1135/api/Person

Set the method as GET and click on the Execute button as shown in the following image:

The result will be displayed as shown here:

Testing the POST operation

In the Composer Tab, set the Method as POST, add the following JSON object in the Request body and Content Type as shown in the following image

Click on the Execute Button, the new record will be added and will be shown as per the following image

Likewise PUT and Delete functionality can be tested.

The ASP.NET Web API Framework is merged in MVC 6 and provides an easy mechanism to create API services which can be consumed by various client applications. The dependency injection helps to isolate the data access from the controllers.

Download the entire source code of this article (Github)

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET . This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too . Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

• Please Share this article if you think it was worth reading. Thanks!

• Click here to post your Comments

.NET Framework, Visual Studio and C#

Patterns & practices, cloud and mobile, .net desktop, interview questions & product reviews, join our community, popular articles, jquery cookbook.

Create ASP.NET MVC Application

In this section, we will create a new MVC web application using Visual Studio and understand the basic building blocks of the ASP.NET MVC Application.

We are going to use ASP.NET MVC v5.2, and Visual Studio 2017 community edition, and .NET Framework 4.6 to create our first MVC application.

Download the latest version of Visual Studio from visualstudio.microsoft.com/downloads .

Open Visual Studio 2017 and select File menu -> New -> Project , as shown below.

From the New Project dialog as shown below, expand Visual C# node and select Web in the left pane, and then select ASP.NET Web Application (.NET Framework) in the middle pane. Enter the name of your project MyMVCApplication . (You can give an appropriate name for your application). Also, you can change the location of the MVC application by clicking on Browse.. button. Finally, click OK.

From the New ASP.NET Web Application dialog, select MVC (if not selected already) as shown below.

You can also change the authentication by clicking on Change Authentication button. You can select appropriate authentication mode for your application, as shown below.

Here, we are keeping the default authentication for our application which is No Authentication. Click OK to continue.

Wait for some time till Visual Studio creates a simple MVC project using the default template, as shown below.

Now, press F5 to run the project in debug mode or Ctrl + F5 to run the project without debugging. It will open the home page in the browser, as shown below.

MVC 5 project includes JavaScript and CSS files of bootstrap 3.0 by default. So you can create responsive web pages. This responsive UI will change its look and feel based on the screen size of the different devices. For example, the top menu bar will be changed in the mobile devices, as shown below.

In this way, you can create your ASP.NET MVC 5 application using Visual Studio 2017.

Learn about ASP.NET MVC project's folder structure in the next section.

.NET Tutorials

Database tutorials, javascript tutorials, programming tutorials.

• Press Releases
• Privacy Policy
• Magazine Home
• CODE Focus Magazine
• My (Digital) Magazines
• Where is my Magazine?
• My Subscriber Account
• Consulting Home
• Services & Technologies
• Artificial Intelligence (AI)
• Cloud Computing
• Custom Application Development
• Executive Briefing (AI)
• Low-Code/No-Code
• Cyber Security
• Copilots in Your Apps!
• Project Rescue
• Business Document Copilot
• Legacy Conversion and Maintenance
• Free Hour of Consulting
• VFP Conversion
• Energy Software
• Staffing Home
• Our Services
• Training Home
• State of AI
• CODE Presents
• State of .NET
• Lunch with CODE
• Framework Home
• Get Started & Documentation
• Support & Services
• VFP Conversion Home
• Fox End of Life

10 Good Practices for ASP.NET MVC Apps

Published in:

Filed under:

• DevNet - Web
• ASP.NET MVC
• Design Patterns
• Development Process
• Web Development (general)

When you open up Visual Studio 2013 with the intent of building a new ASP.NET MVC 5 project, you find only one option: an ASP.NET Web Application. This is great, as it represents a moment of clarity in a whirlpool of similar-looking and confusing options. So you click and are presented with various options as to the type of project to create. You want ASP.NET MVC, right? So you pick up the MVC option. What you obtain is a no-op demo application that was probably meant to give you an idea of what it means to code for ASP.NET MVC. Even though the result does nothing, the resulting project is fairly overloaded.

You'll also find several Nuget packages and assemblies referenced that are not required by the sample application, yet are already there to save time for when you need them in action. This is not a bad idea in theory, as nearly any ASP.NET website ends up using jQuery, Bootstrap, Modernizr, Web Optimization, and others. And if you don't like it, you still have the option of starting with an empty project and adding MVC scaffolding. This is better, as it delivers a more nimble project even though there are many references that are useless at first. The truth is that any expert developer has his own favorite initial layout of the startup project, including must-have packages and scripts.

Although I may be tempted, I don't want to push my own ideal project layout on you. My purpose, instead, is applying the Occam's Razor to the ASP.NET MVC project templates that you get in Visual Studio 2013. I'll start with the organization of project folders and proceed through startup code, bundling, HTML layout, controllers, layers, HTTP endpoints, and multi-device views. Overall, here are ten good practices for sane ASP.NET MVC 5 development.

#1: Project Folders and Namespaces

Let's say you used the Visual Studio 2013 project template to create a new project. It works, but it's rather bloated. Figure 1 shows the list of unnecessary references detected by ReSharper.

It's even more interesting to look at the remaining references. Figure 2 shows what you really need to have referenced in order to run a nearly dummy ASP.NET MVC application.

Here's the minimal collection of Nuget packages you need in ASP.NET MVC.

The project contains the folders listed in Table 1 .

When you start adding Nuget packages, some other conventions start appearing such as the Scripts folder for Modernizr and for jQuery and its plugins. You may also find a Content folder for Bootstrap style sheets and a separate Fonts folder for Bootstrap's glyph icons.

I find such a project structure rather confusing and usually manage to clean it up a little bit. For example, I like to place all content (images, style sheets, scripts, fonts) under the same folder. I also don't much like the name Models. (I don't like the name App_Start either but I'll return to that in a moment.) I sometimes rename Models to ViewModels and give it a structure similar to Views: one subfolder per controller. In really complex sites, I also do something even more sophisticated. The Models folder remains as is, except that two subfolders are added; Input and View, as shown in Figure 3 .

Generally speaking, there are quite a few flavors of models. One is the collection of classes through which controllers receive data. Populated from the model binding layer, these classes are used as input parameters of controller methods. I collectively call them the input model and define them in the Input subfolder. Similarly, classes used to carry data into the Razor views collectively form the view model and are placed under the Models/View folder. Both input and view models are then split on a per-controller basis.

One more thing to note is the matching between project folders and namespaces. In ASP.NET it's a choice rather than an enforced rule. So you can freely decide to ignore it and still be happy, as I did for years. At some point - but it was several years ago - I realized that maintaining the same structure between namespaces and physical folders was making a lot of things easier. And when I figured out that code assistant tools were making renaming and moving classes as easy as click-and-confirm, well, I turned it into enforcement for any of my successive projects.

#2 Initial Configuration

A lot of Web applications need some initialization code that runs upon startup. This code is usually invoked explicitly from the Application_Start event handler. An interesting convention introduced with ASP.NET MVC 4 is the use of xxxConfig classes. Here's an example that configures MVC routes:

The code in global_asax looks like this:

For consistency, you can use the same pattern to add your own classes that take care of application-specific initialization tasks. More often than not, initialization tasks populate some ASP.NET MVC internal dictionaries, such as the RouteTable.Routes dictionary of the last snippet (just after the heading for #2). For testability purposes, I highly recommend that xxxConfig methods are publicly callable methods that get system collections injected. As an example, here's how you can arrange unit tests on MVC routes.

Note that the code snippet doesn't include the full details of the code for custom GetRouteDataFor method. Anyway, the method uses a mocking framework to mock HttpContextBase and then invokes method GetRouteData on RouteCollection passing the mocked context.

Many developers just don't like the underscore convention in the name of some ASP.NET folders, particularly the App_Start folder. Is it safe to rename this folder to something like Config? The answer is: it's generally safe but it actually depends on what you do in the project.

The possible sore point is the use of the WebActivator Nuget package in the project, either direct or through packages that have dependencies on it. WebActivator is a package specifically created to let other Nuget packages easily add startup and shutdown code to a Web application without making any direct changes to global.asax. WebActivator was created only for the purposes of making Nuget packages seamlessly extend existing Web applications. As WebActivator relies on an App_Start folder, renaming it may cause you some headaches if you extensively add/refresh Nuget packages that depend on WebActivator. Except for this, there are no problems in renaming App_Start to whatever you like most.

#3 Bundling and Minifying CSS Files

Too many requests from a single HTML page may cause significant delays and affect the overall time-to-last-byte metrics for a site. Bundling is therefore the process of grouping distinct resources such as CSS files into a single downloadable resource. In this way, multiple and logically distinct CSS files can be downloaded through a single HTTP request.

Minification, on the other hand, is the process that removes all unnecessary characters from a text-based resource without altering the expected functionality. Minification involves shortening identifiers, renaming functions, removing comments and white-space characters. In general, minification refers to removing everything that's been added mostly for readability purposes, including long descriptive member names.

Although bundling and minification can be applied together, they remain independent processes. On a production site, there's usually no reason not to bundle minified CSS and script files. The only exception is for large and very common resources that might be served through a Content Delivery Network (CDN). The jQuery library is a great example.

Bundling requires the Microsoft ASP.NET Web Optimization Framework available as a Nuget package. Downloading the Optimization Framework also adds a few more references to the project. In particular, they are WebGrease and Microsoft Infrastructure. These, in turn, bring their own dependencies for the final graph, shown in Figure 4 .

Bundles are created programmatically during the application startup in global.asax. Also in this case, you can use the xxxConfig pattern and add some BundlesConfig class to the App_Startup folder. The BundleConfig class contains at least one method with code very close to the following snippet.

The code creates a new bundle object for CSS content and populates it with distinct CSS files defined within the project. Note that the Include method refers to physical paths within the project where the source code to bundle is located. The argument passed to the StyleBundle class constructor instead is the public name of the bundle and the URL through which it will be retrieved from pages. There are quite a few ways to indicate the CSS files to bundle. In addition to listing them explicitly, you can use a wildcard expression:

Once CSS bundles are defined invoking them is as easy as using the Styles object:

As you can figure from the last two snippets, ASP.NET optimization extensions come with two flavors of bundle classes: the Bundle class and the StyleBundle class. The former only does bundling; the latter does both bundling and minification. Minification occurs through the services of an additional class. The default CSS minifier class is CssMinify and it is based on some logic packaged in WebGrease. Switching to a different minifier is easy too. All you do is using a different constructor on the StyleBundle class. You use the constructor with two arguments, the second of which is your own implementation of IBundleTransform .

#4 Bundling and Minifying Script Files

Bundling and minification apply to script files in much the same way as bundling and minifying CSS files. The only minor difference is that for frequently used script files (such as jQuery) you might want to use a CDN for even better performance. In operational terms, bundling and minifying script files requires the same process and logic as CSS files. You use the Bundle class if you're only concerned about packing multiple files together so that they are captured in a single download and cached on the client. Otherwise, if you also want minifying, you use the ScriptBundle class.

Like StyleBundle , ScriptBundle also features a constructor that accepts an IBundleTransform object as its second argument. This object is expected to bring in some custom logic for minifying script files. The default minifier comes from WebGrease and corresponds to the JsMinify class.

It's very common today to arrange very complex and graphically rich Web templates that are responsive to changes in the browser's window size and that update content on the client side through direct access to the local DOM. All this can happen if you have a lot of script files. It's not, for the most part, JavaScript code that you write yourself. It's general-purpose JavaScript that forms a framework or a library. In a nutshell, you often end up composing your client-side logic by sewing together multiple pieces, each of which represents a distinct download.

Considering the general recommendation of using as few script endpoints as possible - and bundling does help a lot in that regard - the optimal position of the <script> tags in the body of the HTML page is an open debate. For quite some time, the common practice was to put <script> elements at the end of the document body. This practice was promoted by Yahoo and aimed at avoiding roadblocks during the rendering of the page. By design, in fact, every time the browser encounters a <script> tag, it stops until the script has been downloaded (or recovered from the local cache) and processed.

It's not mandatory that all script files belong at the bottom. It's advisable that you distinguish the JavaScript that's needed for the page to render from the JavaScript that serves other purposes. The second flavor of JavaScript can safely load at the bottom. Well, mostly at the bottom. Consider that as the page renders the user interface in the browser, users may start interacting with it. In doing so, users may trigger events that need some of the other JavaScript placed at the bottom of the page and possibly not yet downloaded and evaluated. If this is your situation, consider keeping input elements that the user can interact with disabled until it's safe to use them. The ready event of jQuery is an excellent tool to synchronize user interfaces with downloaded scripts. Finally, consider some techniques to load scripts in parallel so that the overall download time becomes the longest of all instead of the sum of all downloads. The simplest way you can do this is through a programmatically created <script> element. You do this using code, as shown below.

Script elements are appended to the HEAD element so that parallel download begins as soon as possible. Note that this is the approach that most social Web sites and Google Analytics use internally. The net effect is that all dynamically created elements are processed on different JavaScript threads. This approach is also employed by some popular JavaScript loader frameworks these days.

#5 The Structure of the _Layout File

In ASP.NET MVC, a layout file is what a master page was in classic Web Forms: the blueprint for multiple pages that are ultimately built out of the provided template. What should you have in a master view? And in which order?

With the exceptions and variations mentioned a moment ago for parallelizing the download of multiple scripts, there are two general rules that hold true for the vast majority of websites. The first rule says: Place all of your CSS in the HEAD element. The second rule says: Place all of your script elements right before the closing tag of the <body> element.

There are a few other little things you want to be careful about in the construction of the layout file(s) for your ASP.NET MVC application. First off, you might want to declare explicitly that the document contains HTML5 markup. You achieve this by having the following markup at the very beginning of the layout and subsequently at the beginning of each derived page.

The DOCTYPE instructs older browsers that don't support specific parts of HTML5 to behave well and correctly interpret the common parts of HTML while ignoring the newest parts. Also, you might want to declare the character set in the HEAD block.

The charset attribute is case-insensitive, meaning that you can indicate the character set name as UTF-8, utf-8 or otherwise. In general, you don't use other character sets than UTF-8, as it's the default encoding for Web documents since HTML4, which came out back in 1999. As far as IIS and ASP.NET are concerned, you have other ways to set the character set. For example, you can type it in the <globalization> section of the web.config file. Having it right in each page just adds clarity. An interesting consequence of clarifying the character set being used is that you can avoid using HTML entities and type special characters directly in the source. Canonical examples are the copyright &copy; , trademark &reg; , euro &euro , dashes -- , and more. The only HTML entities you should use are those that provide the text version of reserved markup characters, such as less-than, greater-than, and ampersand.

Another rather important meta-tag you'll want to have is the viewport meta-tag whose usage dates back to the early days of smartphones. Most mobile browsers can be assumed to have a rendering area that's much larger than the physical width of the device. This virtual rendering area is just called the “viewport.” The real size of the internal viewport is browser-specific. However, for most smart phones, it's around 900 pixels. Having such a large viewport allows browsers to host nearly any Web page, leaving users free to pan and zoom to view content, as illustrated in Figure 5 .

The viewport meta-tag is a way for you to instruct the browser about the expected size of the viewport.

In this example, you tell the browser to define a viewport that is the same width as the actual device. Furthermore, you specify that the page isn't initially zoomed and worse, users can't zoom in. Setting the width property to the device's width is fairly common, but you can also indicate an explicit number of pixels.

In ASP.NET MVC, pay a lot of attention to keeping the layout file as thin as possible. This means that you should avoid referencing from the layout file CSS and script files that are referenced by all pages based on the layout. As developers, we certainly find it easier and quicker to reference resources used by most pages right from the layout file. But that only produces extra traffic and extra latency. Taken individually, these extra delays aren't significant, except that they sum up and may add one or two extra seconds for the page to show and be usable.

In ASP.NET MVC, a layout page consists of sections. A section is an area that derived pages can override. You might want to use this feature to let each page specify CSS and script (and of course markup) that needs be specific. Each layout must contain at least the section for the body.

The markup above indicates that the entire body of the page replaces @RenderBody . You can define custom sections in a layout file using the following line:

The name of the section is unique but arbitrary and you can have as many sections as you need with no significant impact on the rendering performance. You just place a @RenderSection call where you want the derived page to inject ad hoc content. The example above indicates a section where you expect the page to insert custom script blocks. However, there's nothing that enforces a specific type of content in a section. A section may contain any valid HTML markup. If you want to force users to add, say, script blocks, you can proceed as follows:

In this case, overridden sections are expected to contain data that fits in the surrounding markup; otherwise, a parsing error will be raised. In a derived page, you override a section like this:

#6 (Don't) Use Twitter Bootstrap

Twitter Bootstrap is quickly becoming the de-facto standard in modern Web development, especially now that Visual Studio 2013 incorporates it in the default template for ASP.NET MVC applications. Bootstrap essentially consists of a large collection of CSS classes that are applicable directly to HTML elements and in some cases to special chunks of HTML markup. Bootstrap also brings down a few KBs of script code that extends CSS classes to make changes to the current DOM.

As a matter of fact, with Bootstrap, you can easily arrange the user interface of Web pages to be responsive and provide advanced navigation and graphical features.

The use of Bootstrap is becoming common and, as popularity grows, also controversial. There are reasons to go for it and reasons for staying away from it. My gut feeling is that Bootstrap is just perfect for quick projects where aesthetics are important but not fundamental, and where you need to provide pages that can be decently viewed from different devices with the lowest possible costs. Key arguments in favor of Twitter Bootstrap are its native support for responsive Web design (RWD), deep customizability, and the not-secondary fact that it's extremely fast to learn and use.

Bootstrap was created as an internal project at Twitter and then open-sourced and shared with the community. When things go this way, there are obvious pros and cons. For Web developers, it's mostly about good things. Bootstrap offers a taxonomy of elements that you want to have in Web pages today: fluid blocks, navigation bars, breadcrumbs, tabs, accordions, rich buttons, composed input fields, badges and bubbles, lists, glyphs, and more advanced things, such as responsive images and media, auto-completion, and modal dialogs. It's all there and definable through contracted pieces of HTML and CSS classes. Put another way, when you choose Bootstrap, you choose a higher level markup language than HTML. It's much the same as when you use jQuery and call it JavaScript. The jQuery library is made of JavaScript but extensively using it raises the abstraction level of JavaScript.

By the same token, using Bootstrap extensively raises the abstraction level of the resulting HTML and makes it look like you're writing Bootstrap pages instead of HTML pages. This is just great for developer-centric Web solutions. It's not good for Web designers and for more sophisticated projects where Web designers are deeply involved.

When you choose Bootstrap, you choose a higher-level markup language than HTML. It's much the same as when you use jQuery and call it JavaScript.

From a Web designer's perspective, Twitter Bootstrap is just a Twitter solution and even theming it differently is perceived like work that takes little creativity. From a pure Web design perspective, Bootstrap violates accepted (best) practices. In particular, Bootstrap overrides the HTML semantic and subsequently, presentation is no longer separate from the content. Not surprisingly, when you change perspective, the same feature may turn from being a major strength to being a major weakness. Just because Bootstrap overrides the HTML semantic, it tends to favor an all-or-nothing approach. This may be problematic for a Web design team that joins an ongoing project where Bootstrap is being used. In a nutshell, Bootstrap is an architectural decision - and one that's hard to change on the go. So, yes, it makes presentation tightly bound to content. Whether this is really an issue for you can't be determined from the outside of the project.

Last but not least, the size of Twitter Bootstrap is an issue. Minified, it counts for about 100K of CSS, 29K of JavaScript plus fonts. You can cut this short by picking exactly the items you need. The size is not an issue for sites aimed at powerful devices such as a PC, but Bootstrap for sites aimed at mobile devices may be a bit too much. If you're going to treat desktop devices differently from mobile devices, you might want to look into the mobile-only version of Bootstrap that you find at http://goratchet.com/ .

#7 Keep Controllers Thin

ASP.NET MVC is often demonstrated in the context of CRUD applications. CRUD is a very common typology for applications and it's a very simple typology indeed. For CRUD applications, a fat controller that serves any request directly is sometimes acceptable. When you combine the controller with a repository class for each specific resource you handle, you get good layering and achieve nifty separation of concerns.

It's essential to note that the Model-View-Controller pattern alone is not a guarantee of clean code and neatly separated layers. The controller simply ensures that any requests are routed to a specific method that's responsible for creating the conditions for the response to be generated and returned. In itself, an action method on a controller class is the same as a postback event handler in old-fashioned Web Forms applications. It's more than OK to keep the controller action method tightly coupled to the surrounding HTTP context and access it from within the controller method intrinsic objects such as Session , Server , and Request . A critical design goal is keeping the controller methods as thin as possible. In this way, the controller action methods implement nearly no logic or very simple workflows (hardly more than one IF or two) and there's no need to test them.

As each controller method is usually invoked in return to a user's gesture, there's some action to be performed. Which part of your code is responsible for that? In general, a user action triggers a possibly complex workflow. It's only in a basic CRUD, like the very basic Music Store tutorial, that workflow subsequent to user actions consists of one database access that the resource repository carries out. You should consider having an intermediate layer between controllers and repositories. (See Figure 6 .)

The extra layer is the application layer and it consists of classes that typically map to controllers. For example, if you have HomeController , you might also want to have some HomeService class. Each action in HomeController ends up calling one specific method in HomeService . Listing 1 shows some minimalistic code to illustrate the pattern.

Listing 1: A layered controller class

The Index method invokes the associated worker service to execute any logic. The service returns a view model object that is passed down to the view engine for the actual rendering of the selected Razor view. Figure 7 shows instead a modified project structure that reflects worker services and the application layer of the ASP.NET MVC application.

#8 Membership and Identity

To authenticate a user, you need some sort of a membership system that supplies methods to manage the account of a user. Building a membership system means writing the software and the related user interface to create a new account and update or delete existing accounts. It also means writing the software for editing any information associated with an account. Over the years, ASP.NET has offered a few different membership systems.

Historically, the first and still largely used membership system is centered on the Membership static class. The class doesn't directly contain any logic for any of the methods it exposes. The actual logic for creating and editing accounts is supplied by a provider component that manages an internal data store. You select the membership in the configuration file. ASP.NET comes with a couple of predefined providers that use SQL Server or Active Directory as the persistence layer. Using predefined providers is fine, as it binds you to a predefined storage schema and doesn't allow any reuse of existing membership tables. For this reason, it's not unusual that you end up creating your own membership provider.

Defining a custom membership provider is not difficult at all. All you do is derive a new class from MembershipProvider and override all abstract methods. At a minimum, you override a few methods such as ValidateUser , GetUser , CreateUser , and ChangePassword . This is where things usually get a bit annoying.

The original interface of the Membership API is way too complicated with too many methods and too many quirks. People demanded a far simpler membership system. Microsoft first provided the SimpleMembership provider and with Visual Studio 2013, what appears to be the definitive solution: ASP.NET Identity.

In the ASP.NET Identity framework, all of the work is coordinated by the authentication manager. It takes the form of the UserManager<T> class, which basically provides a fa�ade for signing users in and out.

The type T identifies the account class to be managed. The IUser interface contains a very minimal definition of the user, limited to ID and name. The ASP.NET Identity API provides the predefined IdentityUser type that implements the IUser interface and adds a few extra properties such as PasswordHash and Roles . In custom applications, you typically derive your own user type inheriting from IdentityUser . It's important to notice that getting a new class is not required; you can happily work with native IdentityUser if you find its structure appropriate.

User data storage happens via the UserStore<T> class. The user store class implements the IUserStore interface that summarizes the actions allowed on the user store:

As you can see, the user store interface looks a lot like a canonical repository interface, much like those you might build around a data access layer. The entire infrastructure is glued together in the account controller class. The skeleton of an ASP.NET MVC account controller class that is fully based on the ASP.NET Identity API is shown in Listing 2.

Listing 2: Sample account controller class

The controller holds a reference to the authentication identity manager. An instance of the authentication identity manager is injected in the controller. The link between the user store and the data store is established in the ApplicationDbContext class. You'll find this class defined by the ASP.NET MVC 5 wizard if you enable authentication in the Visual Studio 2013 project template.

The base IdentityDbContext class inherits from DbContext and is dependent on Entity Framework. The class refers to an entry in the web.config file, where the actual connection string is read. The use of Entity Framework Code First makes the structure of the database a secondary point. You still need a well-known database structure, but you can have the code to create one based on existing classes instead of manual creation in SQL Server Management Studio. In addition, you can use Entity Framework Code First Migration tools to modify a previously created database as you make changes to the classes behind it.

Currently, ASP.NET Identity covers only the basic features of membership but its evolution is not bound to the core ASP.NET Framework. Features that the official interfaces don't cover yet (such as enumerating users) must be coded manually, which brings you back to the handcrafted implementation of membership.

#9 Expose HTTP Endpoints

An architecture for Web applications that's becoming increasingly popular is having a single set of HTTP endpoints - collectively known as Web services - consumed by all possible clients. Especially if you have multiple clients (like mobile applications and various Web frontends) a layer of HTTP endpoints is quite helpful to have. Even if you only have a single client frontend, a layer of HTTP endpoints is helpful as it allows you to have a bunch of Ajax-based functionalities integrated in HTML pages. The question is: How would you define such endpoints?

If you need an API - or even a simple set of HTTP endpoints - exposed out of anything but ASP.NET MVC (such as Web Forms or Windows services) using Web API is a no-brainer. But if all you have is an ASP.NET MVC application, and are tied to IIS anyway, you can simply use a separate ASP.NET MVC controller and make it return JSON.

There are many posts out there calling for a logical difference between Web API controllers and ASP.NET MVC controllers. There's no doubt that a difference exists because overall Web API and ASP.NET MVC have different purposes. Anyway, the difference becomes quite thin and transparent when you consider it from the perspective of an ASP.NET MVC application.

With plain ASP.NET MVC, you can easily build an HTTP fa�ade without learning new things. In ASP.NET MVC, the same controller class can serve JSON data or an HTML view. However, you can easily keep controllers that return HTML separate from controllers that only return data. A common practice consists in having an ApiController class in the project that exposes all endpoints expected to return data. In Web API, you have a system-provided ApiController class at the top of the hierarchy for controllers. From a practical perspective, the difference between ASP.NET MVC controllers and Web API controllers hosted within the same ASP.NET MVC is nearly non-existent. At the same time, as a developer, it's essential that you reason about having some HTTP endpoints exposed in some way.

Web API and ASP.NET MVC have different purposes.

#10 Use Display Modes

One of the best-selling points of CSS is that it enables designers and developers to keep presentation and content neatly separated. Once the HTML skeleton is provided, the application of different CSS style sheets can produce even radically different results and views. With CSS, you can only hide, resize, and reflow elements. You can't create new elements and you can add any new logic for new use-cases.

In ASP.NET MVC, a display mode is logically the same as a style sheet except that it deals with HTML views instead of CSS styles. A display mode is a query expression that selects a specific view for a given controller action. In much the same way, the Web browser on the client processes CSS media query expressions and applies the appropriate style sheet; a display mode in server-side ASP.NET MVC processes a context condition and selects the appropriate HTML view for a given controller action.

Display modes are extremely useful in any scenario where multiple views for the same action can be selected based on run-time conditions. The most compelling scenario, however, is associated with server-side device detection and view routing. By default, starting with ASP.NET MVC 4, any Razor view can be associated with a mobile-specific view. The default controller action invoker automatically picks up the mobile-specific view if the user agent of the current request is recognized as the user agent of a mobile device. This means that if you have a pair of Razor views such as index.cshtml and index.mobile.cshtml , the latter will be automatically selected and displayed in lieu of the former if the requesting device is a mobile device. This behavior occurs out of the box and leverages display modes. Display modes can be customized to a large extent. Here's an example:

The preceding code goes in the Application_Start event of global.asax and clears default existing display modes and then adds a couple of user-defined modes. A display mode is associated with a suffix and a context condition. Display modes are evaluated in the order in which they're added until a match is found. If a match is found - that is, if the context condition holds true - then the suffix is used to complete the name of the view selected. For example, if the user agent identifies a tablet, then index.cshtml becomes index.tablet.cshtml . If no such Razor file exists, the view engine falls back to index.cshtml .

Display modes are an extremely powerful rendering mechanism but all this power fades without a strong mechanism to do good device detection on the server side. ASP.NET lacks such a mechanism. ASP.NET barely contains a method in the folds of the HttpRequest object to detect whether a given device is mobile or not. The method is not known to be reliable and work with just any old device out there. It lacks the ability to distinguish between smartphones, tablets, Google glasses, smart TVs, and legacy cell phones. Whether it works in your case is up to you.

If you're looking for a really reliable device detection mechanism, I recommend WURFL, which comes through a handy Nuget package. For more information on WURFL, you can check out my article that appeared in the July 2013 issue of CODE Magazine, available at the following URL: Multi-view Pages for Web Sites: Client, Server, or Both? .

Display modes are extremely useful in any scenario where multiple views for the same action can be selected based on run time conditions.

ASP.NET MVC 5 is the latest version of Microsoft's popular flavor of the ASP.NET platform. It doesn't come with a full bag of new goodies for developers but it remains a powerful platform for Web applications. ASP.NET is continuously catching up with trends and developments in the Web space and writing a successful ASP.NET MVC application is a moving target. This article presented ten common practices to build ASP.NET MVC applications with comfort and ease.

Table 1: Typical project folders.

This article was filed under:, this article was published in:.

Have additional technical questions?

Get help from the experts at CODE Magazine - sign up for our free hour of consulting!

Contact CODE Consulting at [email protected] .

Join our Live Session: Adapt Any Work Experience to Fit Any Role! 💼 Register here!

🤖 Level up your chatbot knowledge with our latest AI course.

Join our free community Discord server here !

Learn React with us !

Get job-ready with our Career Toolbox Track's career advice, resume tips, and more 💼

Creating Your First ASP.NET MVC Website

44-minute c# workshop, about this workshop.

In this workshop, you'll learn how to create an ASP.NET MVC website using Visual Studio.

James Churchill

Before joining the Treehouse team, James worked as a consultant for over 10 years doing web development using .NET and variety of open source technologies. James enjoys participating in the developer community, presenting at and attending meetups, code camps, and conferences. When not working, James enjoys learning, skiing, playing music, and watching movies.

Download videos

You need to sign up for Treehouse in order to download course videos.