Create MVC Project Step By Step From Scratch- Part One

Debendra Dash
7y
29.8k
0
10

Article

Prerequisites

General knowledge on Web Applications.
HTML, CSS, Bootstrap, JavaScripts.
DataBase configuration and connection.

Introduction

We often think creating MVC projects is very hard, as we have to work on each and every part. It's true, as we have to work on each and every part i.e. starting from creating controls to Business layers.

Believe me, if we start understanding the architecture once, it's so easy to implement. Here, we will explain how to create a small MVC demo project from scratch.

Remember, when you work with ASP.NET project or MVC project, we must require the things, mentioned below.

Mvc

Thus, these are the common things that all the projects contain, so I will explain how we can create these things very easily.

Project Goals

This is a simple Web Application, which will track the records of the mobile and its price in India. We have a mobile store. This project will maintain the records of all the mobiles in the store, keep track on the mobile sales, purchases etc. We can also have a facility to check the profit earned by this store monthly and yearly.

Technology Used

ASP.NET MVC
SQL Server
Crystal Report
ADO.NET

In this article, we will mainly focus on the areas, mentioned below.

Working with different layers in the project.
Creating DAL logic.
WorkFlow of the project.
Creating different layout for the different users.
Working with Home Page (showing data with the mobile images on Home page)

Let's just start our project. Create a new MVC project, as shown below.

Mvc

Now, choose ASP.NET Web Application.

Mvc

Change the name of the project and add another class library and MobileDAL. Here, we have attached Solution Explorer, as shown below.

Mvc

Now, let's start configuring the database with the project.

Go to web.config and write the connection string, as shown below.

<connectionStrings>
<add name="Connect" connectionString="Data Source=*****; User id=****;password=****;Database=Demo" providerName="System.Data.SqlClie nt" /> </connectionStrings>

From here, let's see the project flow. Here is the complete project flow, which we have given below.

Mvc

Here, the data will pass from View to controller (so all the business logic will be written here) and from the controller, the data will pass to the DAL layer (which is MobileDAL.cs in our case).

Here, Data access layer (DAL) contains all the logic to retrieve the data from the database.

Thus, in our DAL layer, we will have to define the connection string to the database and the core logic to perform DDL and DML operation from the database, as per our requirements.

Now, add a new class as "MobiledetailDAL.cs" in MobileDAL layer and write the functions, mentioned below for establishing the connection with the database and perform DML and DDL operation.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
namespace MobileDAL.cs {
public class MobiledetailDAL {
SqlCommand cmd;
SqlDataAdapter da;
DataSet ds;
public static SqlConnection connect() {
string connection = ConfigurationManager.ConnectionStrings["Connect"].ConnectionString;
SqlConnection con = new SqlConnection(connection);
if (con.State == ConnectionState.Open) {
con.Close();
} else con.Open();
}
return con;
}
public bool DMLOpperation(string query) {
cmd = new SqlCommand(query, MobiledetailDAL.connect());
int x = cmd.ExecuteNonQuery();
if (x == 1) {
return true;
} else {
return false;
}.
}
public DataTable SelactAll(string query) {
da = new SqlDataAdapter(query, MobiledetailDAL.connect());
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
}
}

Let's discuss about each and every method, which is present in this class.

The first method is to read the connection string from Web.config.

public static SqlConnection connect() {
string connection = ConfigurationManager.ConnectionStrings["Connect"].ConnectionString;
SqlConnection con = new SqlConnection(connection);
if (con.State == ConnectionState.Open) {
con.Close();
} else {
con.Open();
}
return con;
}

First, we have created a static method as "Connect()".

This method is static because we do not want to create an object of the class for calling this method. The first line will read the connection string, which is defined in the web.config in the name of "Connect".

After reading the connection string, it will save the connection string details in a string called "Connection".

Afterwards, we are passing this string to SQL connection to establish the connection.
Subsequently, we are checking the connection state, if the state is open and we are closing the connection, else we are opening the connection.

Now, let's come to the second method.

public bool DMLOpperation(string query) {
cmd = new SqlCommand(query, MobiledetailDAL.connect());
int x = cmd.ExecuteNonQuery();
if (x == 1) {
return true;
} else {
return false;
}
}

As we have seen the architecture, we will pass the query from controller, which will execute in DAL Layer, this method is written to perform DML opperation(CREAT,UPDATE,etc). So whatever query will be passed from controller, it will come to the methods and be stored in the string query.

Now, we have created a command object. Normally, a command object will take two parameters, as shown below.

Mvc

For the first parameter, we will pass as the string received and for the second parameter, we have call the connection earlier, which we have made in connect method.

Here, I am calling "MobiledetailDAL.connect()" for the connection string. Afterwards, we are executing the command to do our work.

Whenever we will declare, it will work like this.

Now, DAL part is over. Let us start working on some views or screens, so let's design the Layouts.

Layouts are used in MVC to provide consistent look and feel on all the pages of our Application. It is same as the master pages that we have in ASP.NET. We should always create Layout in the shared folder.

To check how to create layout step by step, please follow the link.

The layout view allows you to define a common site template, which can be inherited in multiple views to provide a consistent look and feel in multiple pages of an Application. The layout view eliminates duplicate coding and enhances the development speed and easy maintenance.

The layout view for the sample UI, mentioned above would contain a header, left menu, right bar and footer sections. It contains a placeholder for the center section, which changes dynamically, as shown below.

Mvc

Thus, let's create a common layout for all the users. I want a left side menu in which my menu items are there, so the code is given below to create the layout.

<script src="~/Scripts/vertical.js"></script>
<link href="~/Content/VerticalMenu.css" rel="stylesheet" /> @*---Vertical Menu---*@
<div class="row">
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="brand-wrapper">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand-name-wrapper"> <a class="navbar-brand" href="#">
Brand
</a> </div>
<a data-toggle="collapse" href="#search" class="btn btn-default" id="search-trigger"> <span class="glyphicon glyphicon-search"></span> </a>
<div id="search" class="panel-collapse collapse">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-ok"></span></button> </form>
</div>
</div>
</div>
</div>
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>User Profile</a></li>
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Message Center</a></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> Mobiles</a></li>
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1"> <span class="glyphicon glyphicon-cog"></span> Setting <span class="caret"></span> </a>
<div id="dropdown-lvl1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl2"> <span class="glyphicon glyphicon-off"></span> Sub Level <span class="caret"></span> </a>
<div id="dropdown-lvl2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="side-body"> @RenderBody() </div>
</div>
</div>

RenderBody method in the layout page helps to render child page/view. It is just like the ContentPlaceHolder in master page. A layout page can have only one RenderBody method.

To create menu item, I have taken Bootstrap Glyphions.

Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation. If you want to learn more about Glyphicons, please check the link.

A Glyphicon will be used by span tag, as shown below.

<span class="glyphicon glyphicon-name"></span>

The name part in the syntax, mentioned above must be replaced with the proper name of the Glyphicon.

Here are some of Glyphicons

Mvc

NOTE

Please don't worry, as .CSS and .JS are used here. I will upload all these with the project.

Now, let's attach this layout in a view and run the project. Create a view as About and attach it, as shown below.

Mvc

Now, check the view. We will find the layout, which will be attached, as shown below.

@ {
ViewBag.Title = "AboutUs";
Layout = "~/Views/Shared/_Layout.cshtml";
} < h2 > About < /h2>

Now, run the Application.

Mvc

As you see how we can create a layout page in MVC, so I can have a multiple number of layout pages in my project (eg: For registered user, for anonymous user etc).
Lets create one more layout page for the anonymous user.This is HTML code to create simple layout, as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="#">MoBBi99</a> </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
</div>
</nav>
<div class="container"> @RenderBody(); </div>

Lets use this page in the Index page, which is our Home page.

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

In my Home page, I have to show some mobile products. These products are required to be fetched from the database table with the image. Here is my table script.

USE[Demo]
GO
/****** Object: Table [dbo].[Mobiles] Script Date: 26-11-2016 22:01:47 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE[dbo].[Mobiles](
[slNo][int] IDENTITY(1, 1) NOT NULL, [MobileName][nvarchar](100) NULL, [Price][money] NULL, [url][nvarchar](350) NULL, [Description][text] NULL, CONSTRAINT[PK_Mobiles] PRIMARY KEY CLUSTERED(
[slNo] ASC) WITH(PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON[PRIMARY]) ON[PRIMARY] TEXTIMAGE_ON[PRIMARY]
GO

Now, let's add an Image folder in the Project and add some mobile images, as shown below.

Mvc

Here is my data in the Demo table.

Mvc

Let's create a model as Mobile model, as shown below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DapperProject.Models {
public class Mobiles {
public int slno {
get;
set;
}
public string MobileName {
get;
set;
}
public double Price {
get;
set;
}
public string Url {
get;
set;
}
public string Description {
get;
set;
}
}
}

Now, we have the Home Controller with Index method.

public class HomeController: Controller {
MobiledetailDAL _mdal = new MobiledetailDAL();
DataTable dt;
public ActionResult Index() {
string mycmd = "select * from Mobiles";
dt = new DataTable();
dt = _mdal.SelactAll(mycmd);
List < Mobiles > list = new List < Mobiles > ();
for (int i = 0; i < dt.Rows.Count; i++) {
Mobiles mob = new Mobiles();
mob.slno = Convert.ToInt32(dt.Rows[i]["slNo"]);
mob.MobileName = dt.Rows[i]["MobileName"].ToString();
mob.Price = Convert.ToDouble(dt.Rows[i]["Price"]);
mob.Url = dt.Rows[i]["Url"].ToString();
list.Add(mob);
}
return View(list);
}

Now, lets design the view to populate the data with the images. Our Index view is shown below.

@model IEnumerable < DapperProject.Models.Mobiles > @ {
ViewBag.Title = "Microsoft Mobiles";
Layout = "~/Views/Shared/_HomepageLayout.cshtml";
} < link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" > < /script> < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> < div class = "row" > @foreach(var m in Model) { < div class = "col-md-4" > < div class = "row" > < h4 > < span id = "mobilename"
style = "color:darkred" > @m.MobileName < /span></h
4 > < p > < span class = "glyphicon glyphicon-heart"
style = "color:red;pointer-events:fill"
contextmenu = "Added To WishList" > < /span></p > < /div> < p > < img src = "~/Images/@m.Url"
style = "overflow: hidden; position: relative; width:200px; height:200px;" / > < /p> < p > < a class = "btn btn-default"
href = "" > View More» < /a><p><span class="glyphicon glyphicon-shopping-cart" style="color:green"></span > < /p> < /p> < /div>
} < /div>

Now, just run the project and you will find all the data attached in the view with the images, as shown below.

Mvc

In our next part, we will work on Master Entry details of this project with Login, Register, Adding products to cart etc.

Hope, you will like this article. If you have any doubt, you can ask me and I will try to answer all your questions.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all