Create Product Grid Application With .Net MVC And EF with CRUD Operations

Create Grid Based Web Application for CRUD(Create,Read,Delete,Update) Operation Using .Net MVC 5 And SQL Server

Step 1 : Create Required Tables in Data Base to Store the Details About the Product

CREATE TABLE [dbo].[ProductDetails](
[ProductId] [int] IDENTITY(1,1) NOT NULL,
[ProductName] [varchar](50) NULL,
[Quantity] [varchar](50) NULL,
[Prize] [bigint] NULL,
CONSTRAINT [PK_ProductDetails] PRIMARY KEY CLUSTERED
(
[ProductId] 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

So here it will Create Table ProductDetails in your Database.

Step 2: Create MVC Project in Visual Studio as below Options :

select option Basic in next Step...

Step 3 : Add New ADO Entity Model And give Name to Entity Model as .edmx file in your project

Step 4 :After Creating Model.edmx Generate Model From Database

Step 4 : Select your Connection Details And Select Next in Case you don't have any Connections then Create New Connection And Configure New Connection And Select your Database.

Step 5 : Make Sure You Select All the Tables that are you wan to use in the Application And Click Finish :

Now You are Ready for the Database Side as Entity Part is Created And Respective Model is Created in c# code side.

Step 6 : Create New Controller As shopping Controller And Add below Methods to the Shopping Controller.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace ShoppingApplication.Controllers

{

public class ShoppingController : Controller

{

// GET: /Shopping/

public ActionResult Index()

{

WebShoppingEntities db = new WebShoppingEntities();

return View(db.ProductDetails.ToList());

}

[HttpPost]

public ActionResult Index(string name)

{

WebShoppingEntities db = new WebShoppingEntities();

List<ProductDetail> emp = db.ProductDetails.Where(e => e.ProductName.Contains(name)).ToList();

return View(emp);

}

public ActionResult Add()

{

return PartialView();

}

[HttpPost]

public ActionResult Add(ProductDetail productDetail)

{

WebShoppingEntities db = new WebShoppingEntities();

if (ModelState.IsValid)

{

try

{

db.ProductDetails.Add(productDetail);

db.SaveChanges();

}

catch (Exception ex)

{

TempData["Failure"] = ex;

}

else

{

TempData["Failure"] = "Record Not Saved";

}

return RedirectToAction("Index");

}

public ActionResult Edit(int productId)

{

WebShoppingEntities db = new WebShoppingEntities();

return PartialView(db.ProductDetails.Find(productId));

}

[HttpPost]

public ActionResult Edit(ProductDetail productDetail)

{

WebShoppingEntities db = new WebShoppingEntities();

if (ModelState.IsValid)

{

try

{

ProductDetail productdetail = db.ProductDetails.Where(x => x.ProductId == productDetail.ProductId).FirstOrDefault();

productdetail.ProductName = productDetail.ProductName;

productdetail.Quantity = productDetail.Quantity;

productdetail.Prize = productDetail.Prize;

db.SaveChanges();

return RedirectToAction("Index");

}

catch (Exception ex)

{

TempData["Failure"] = ex;

}

else

{

TempData["Failure"] = "Record Not Saved";

}

return RedirectToAction("Index");

}

public ActionResult DeleteProduct(int productId)

{

WebShoppingEntities db = new WebShoppingEntities();

db.ProductDetails.Remove(db.ProductDetails.Find(productId));

db.SaveChanges();

return RedirectToAction("Index");

}

Step 7 : Create View Index For Main Page And Create Partial View For Edit And Add Product Part As below.

1. Index.cshtml

@model IEnumerable<ShoppingApplication.ProductDetail>

ViewBag.Title = "Product List";

Layout = "~/Views/Shared/_Layout.cshtml";

.grid{ width:100%; }

</style>

}

<br />

@* <div class="col-md-6">

<option>---select---</option>

</select>

</div>*@

</div>

<a href="@Url.Action("Add", "Shopping")" id="add">Add New Product</a>

</div>

<thead>

<th class="text-center">ProductId</th>

<th class="text-center">ProductName</th>

<th class="text-center">Quantity</th>

<th class="text-center">Prize</th>

<th class="text-center">TotalPrize</th>

<th class="text-center">Delete</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model)

{

<tr>

<td class="id">@item.ProductId</td>

<td>@item.ProductName</td>

<td>@item.Quantity</td>

<td>@item.Prize</td>

@*@double totalPrize = @item.Quantity * @item.Prize*@

<td class="text-center"><a href="@Url.Action("DeleteProduct", "Shopping", new { @productId = @item.ProductId })"><i class="glyphicon glyphicon-trash" style="cursor: pointer;"></i>Delete</a></td>

</tr>

}

</tbody>

</table>

</div>

<h4 class="modal-title" id="myModalLabel">Add Product Details</h4>

</div>

</div>

<h4 class="modal-title">Update Product Details</h4>

</div>

</div>

2. Add.cshtml

@model ShoppingApplication.ProductDetail

@using (Html.BeginForm("Add", "Shopping", FormMethod.Post))

{

<h1 class="co">Add New Product </h1>

</div>

@*<div class="row">*@

ProductName

</div>

@Html.TextBoxFor(m => m.ProductName, new { @class = "form-control" })

</div>

Quantity

</div>

@Html.TextBoxFor(m => m.Quantity, new { @class = "form-control" })

</div>

Prize

</div>

@Html.TextAreaFor(m => m.Prize, new { @class = "form-control" })

</div>

@*</div>*@

<button type="button" id ="close" class="btn btn-default" data-dismiss="modal" onclick="window.location.href('@Url.Action("Index","Shopping")')" >Close</button>

</div>

}

3. Edit.cshtml

@model ShoppingApplication.ProductDetail

@using (Html.BeginForm("Edit", "Shopping", FormMethod.Post))

{

ProductId

</div>

@Html.TextBoxFor(m => m.ProductId, new { @class = "form-control",@readonly="readonly" })

</div>

ProductName

</div>

@Html.TextBoxFor(m => m.ProductName, new { @class = "form-control" })

</div>

Quantity

</div>

@Html.TextBoxFor(m => m.Quantity, new { @class = "form-control" })

</div>

Prize

</div>

@Html.TextAreaFor(m => m.Prize, new { @class = "form-control" })

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" class="btn btn-primary">Update</button>

</div>

}

App.js File :

$(document).ready(function () {

$('#add').click(function (event) {

event.preventDefault();

$.get(this.href, function (response) {

$('.divForAdd').html(response);

});

$('#addmodel').modal({

backdrop: 'static',

}, 'show');

});

$('.openDialog-Edit').click(function (event) {

event.preventDefault();

$.get(this.href, function (response) {

$('.divForCreate').html(response);

});

$('#editmodel').modal({

backdrop: 'static',

}, 'show');

});

$('#basic-addon1').click(function (e) {

var name = $('#search-box').val();

e.preventDefault(); // <------------------ stop default behaviour of button

$.ajax({

url: "/Home/Index",

type: "POST",

data: { 'Name': name },

success: function (data) {

$('#div-main').html(data);

error: function () {

alert("An error has occured!!!");

}

});

Make Sure you Add below Script for UI and Click events to be worked ...

Below Are the Output Screen :

Let me know in comments if you find any problem while implementing the same :)

Happy Coding

Search This Blog

Microsoft Technologies

Create Product Grid Application With .Net MVC And EF with CRUD Operations

Comments

Post a Comment