Asp.Net MVC Simple Example – Save Data to Database
In my previous articles, we discussed Asp.Net MVC Controllers, Views, and Models. Today we discuss how we can save data to database in Asp.Net MVC with a simple example. Before going to create the MVC application, first, we create a database table using below script.
USE [ECommerce]
GO
/****** Object: Table [dbo].[Products] Script Date: 10/28/2016 3:58:10 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Products](
[Id] [int] IDENTITY(1,1) NOT NULL,
[ProductName] [varchar](250) NOT NULL,
[ProductDesc] [varchar](250) NOT NULL,
[ProductUrl] [varchar](250) NOT NULL,
CONSTRAINT [PK_Products] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
Now Open Microsoft Visual Studio 2015 => Create Asp.Net MVC application and name it as FirstMVCApp. Right-click on the Models folder and select Add => New Item. Select ADO.NET Entity Model and call it as ECommerce as shown below.
Click on Add button and select “EF Designer from database” from the second screen.
From the next screen, connect to the database where we created the database table. Select Tables from the available database objects as shown below.
As of now, we created the Model class based on the database. Let’s add Controller by right click on Controllers folder and select Add => Controller. Name the controller as HomeController. By default Index() method added to the controller. Add new action method CreateProduct() as shown below.
using System.Web.Mvc;
namespace FirstMVCApp.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult CreateProduct()
{
return View();
}
}
}
Build the application before going to add View. Right click on CreateProduct() method and select Add View as shown below.
In next window select Model Product for View as shown below.
Add the below code to CreateProduct.cshtml view to create the form for adding product.
@model FirstMVCApp.Models.Product
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create Product</title>
</head>
<body>
<div>
@using (Html.BeginForm())
{
<p>
@Html.LabelFor(model => model.ProductName)
@Html.EditorFor(model => model.ProductName)
</p>
<p>
@Html.LabelFor(model => model.ProductDesc)
@Html.EditorFor(model => model.ProductDesc)
</p>
<p>
@Html.LabelFor(model => model.ProductUrl)
@Html.EditorFor(model => model.ProductUrl)
</p>
<p>
<input type="submit" value="Create Product" />
</p>
}
</div>
</body>
</html>
Run the application, and it displays the form as shown below.
As of now,
we did not add the code to save the input. If you see the view source of the above
web page you can find <form action="/Home/CreateProduct" method="post">. That
means form is posting the data to self. So we have to create an action method
to save the product details. Add new CreateProduct() method with an attribute
as HttpPost which takes the Product model class as input and add code to save
the data in the database as shown below.
using FirstMVCApp.Models;
using System.Web.Mvc;
namespace FirstMVCApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult CreateProduct()
{
return View();
}
[HttpPost]
public ActionResult CreateProduct(Product product)
{
var db = new ECommerceEntities();
db.Products.Add(product);
db.SaveChanges();
return View(product);
}
}
}
Run the application. Enter details for product and click on Create Product button, data will be saved in database.
