Home > DeveloperSection > Beginner > MVC Application using Razor View

MVC Application using Razor View


ASP.NET MVC ASP.NET MVC 
Ratings:
3 Comment(s)
 9814  View(s)
Rate this:

MVC Application using Razor View

In this article, I am explaining how to use Razor View in ASP.NET MVC with the Entity Framework. You learn how to use the Entity Wizard to create an ADO.NET Entity Data Model. I also illustrate how to select, insert, update, and delete database data by using the Entity Framework.

In order to use the Entity Framework, you need to create an Entity Data Model. For adding Entity Model:

1) Right click on Model Folder in the solution explorer.
2) Select Add
à New Item.

MVC Application using Razor View

Select ADO.NET Entity Data Model from Add New Item template. You can change the name of Data Model with .edmx extension. Here I change it into ProductDb.edmx.

MVC Application using Razor View

    Then Select Generate from Database option and Click on Next button.

MVC Application using Razor View

Here you have to provide the connection string properties in a dialog box:
 1) Provide your server name.
 2) If you are using Windows mode do not provide Username and password else   
      provide both of them in the case of SQL Server Authentication.
 3) Select the database from the available list.

MVC Application using Razor View

After establishing a new connection or selecting a database click on Next button to proceed.
Here I change name of entity connection setting as ProductDetails in Web.config.

MVC Application using Razor View

Then select the table from the table list in the database as shown below. Here I am selection a product table for my application. After selecting a table clicks on Finish button.

MVC Application using Razor View

The structures of my Product table in the database are as:

create table Product

(

   product_id int identity primary key,

   product_category varchar(20),

   product_name varchar(20),

   product_quantity int,

   product_price int

)

                           

After adding an entity model to have to add the Views in which you can select, update, insert or delete database records.
First add Index View that displays the list of product from the database. For adding View right click on Controller Index Action
à Select Add View.

MVC Application using Razor View

When you select an Add View option, a dialog box will open. Select entity model class as our strongly typed view and List from Scaffold template.

MVC Application using Razor View

You can modify a view (Index View) as I had modified below:

@model IEnumerable<RazrMVCApp.Models.Product>

 

@{

    Layout = null;

 }

<!DOCTYPE html>

<html>

<head>

    <title>Index</title>

    <style type="text/css">

         div

         {

             font-family:Calibri;

         }

    </style>

</head>

<body>

    <p>

        @Html.ActionLink("Create New", "Create")

    </p>

    <table align="center" cellpadding="10" border="1px">

        <tr style="background-color:Aqua">

            <th></th>

            <th>Product ID</th>

            <th>Product Category</th>

            <th>Product Name</th>

            <th>Product Quantity</th>

            <th>Product Price</th>

        </tr>

    @foreach (var item in Model) {

        <tr>

            <td>

                @Html.ActionLink("Edit", "Edit", new { id=item.product_id }) |

                @Html.ActionLink("Details", "Details", new { id=item.product_id }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.product_id })

            </td>

            <td>@item.product_id</td>

            <td>@item.product_category</td>

            <td>@item.product_name</td>

            <td>@item.product_quantity</td>

            <td>@item.product_price</td>

        </tr>

    }

    </table>

</body>

</html>

 

Then add Edit View and this time select Edit option from Scaffold template list:

MVC Application using Razor View

Edit View:

@model RazrMVCApp.Models.Product

 

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>Edit</title>

    <style type="text/css">

         div

         {

             font-family:Calibri;

         }

    </style>

</head>

<body>

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

   

    @using (Html.BeginForm()) {

        @Html.ValidationSummary(true)

        <fieldset>

            <legend>Product</legend>

            @Html.HiddenFor(model => model.product_id)

            <div class="editor-label">

                @Html.LabelFor(model => model.product_category)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_category)

                @Html.ValidationMessageFor(model => model.product_category)

            </div>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_name)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_name)

                @Html.ValidationMessageFor(model => model.product_name)

            </div>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_quantity)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_quantity)

                @Html.ValidationMessageFor(model => model.product_quantity)

            </div>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_price)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_price)

                @Html.ValidationMessageFor(model => model.product_price)

            </div>

            <p>

                <input type="submit" value="Save" />

            </p>

        </fieldset>

    }

    <div> @Html.ActionLink("Back to List", "Index")</div>

</body>

</html>

 

Add Details View and select Details option from Scaffold template list:

MVC Application using Razor View

Details View:

@model RazrMVCApp.Models.Product

 

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>Details</title>

    <style type="text/css">

         div

         {

             font-family:Calibri;

         }

    </style>

</head>

<body>

    <fieldset>

        <legend>Product</legend>

   

        <div class="display-label">Product Category</div>

        <div class="display-field">@Model.product_category</div>

   

        <div class="display-label">Product Name</div>

        <div class="display-field">@Model.product_name</div>

   

        <div class="display-label">Product Quantity</div>

        <div class="display-field">@Model.product_quantity</div>

   

        <div class="display-label">Product Price</div>

        <div class="display-field">@Model.product_price</div>

    </fieldset>

    <p>

        @Html.ActionLink("Edit", "Edit", new { id=Model.product_id }) |

        @Html.ActionLink("Back to List", "Index")

    </p>

</body>

</html>

 

Add Delete View and select Delete option from Scaffold template list:

MVC Application using Razor View

Delete View:

@model RazrMVCApp.Models.Product

@{

    Layout = null;

}

 

<!DOCTYPE html>

<html>

<head>

    <title>Delete</title>

     <style type="text/css">

         div

         {

             font-family:Calibri;

         }

    </style>

</head>

<body>

    <h3>Are you sure you want to delete this?</h3>

    <fieldset>

        <legend>Product</legend>

   

        <div class="display-label">Product Category</div>

        <div class="display-field">@Model.product_category</div>

   

        <div class="display-label">Product Name</div>

        <div class="display-field">@Model.product_name</div>

   

        <div class="display-label">Product Quantity</div>

        <div class="display-field">@Model.product_quantity</div>

   

        <div class="display-label">Product Price</div>

        <div class="display-field">@Model.product_price</div>

    </fieldset>

    @using (Html.BeginForm()) {

        <p>

            <input type="submit" value="Delete" /> |

            @Html.ActionLink("Back to List", "Index")

        </p>

    }

</body>

</html>

 

Add Create View and select Create option from Scaffold template list:
MVC Application using Razor View

Create View:

@model RazrMVCApp.Models.Product

 

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <title>Create</title>

    <style type="text/css">

         div

         {

             font-family:Calibri;

         }

    </style>

</head>

<body>

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

   

    @using (Html.BeginForm()) {

        @Html.ValidationSummary(true)

        <fieldset>

            <legend>Product</legend>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_category)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_category)

                @Html.ValidationMessageFor(model => model.product_category)

            </div>

   

            <div class="editor-label">

                @Html.LabelFor(model => model.product_name)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_name)

                @Html.ValidationMessageFor(model => model.product_name)

            </div>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_quantity)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_quantity)

                @Html.ValidationMessageFor(model => model.product_quantity)

            </div>

            <div class="editor-label">

                @Html.LabelFor(model => model.product_price)

            </div>

            <div class="editor-field">

                @Html.EditorFor(model => model.product_price)

                @Html.ValidationMessageFor(model => model.product_price)

            </div>

            <p>

                <input type="submit" value="Create" />

            </p>

        </fieldset>

    }

    <div> @Html.ActionLink("Back to List", "Index") </div>

</body>

</html>

 

After adding the Views, in the Controller we have to call the Views.

1) The Index() action returns all of the product records from database table with  
     the help of the Entity Framework.
2) The First Edit() action returns selected product detail and second one update
     the record in the database.
3) The Details() action returns the details of the selected product.
4) The first Create() action provide you a form in which you can insert the product
    details and second one create a new record in the database table.
5) The first Delete() action ask you for a confirmation of delete and second one
    delete the records from the table.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using RazorMVCApp.Models;

 

namespace RazorMVCApp.Controllers

{

    public class HomeController : Controller

    {

        ProductDetails product = new ProductDetails();

 

        public ActionResult Index()

        {

            return View(product.Products.ToList());

        }

 

        public ActionResult Edit(int id)

        {

            return View(product.Products.Where(m => m.product_id == id).Single());

        }

        [HttpPost]

        public ActionResult Edit(FormCollection form)

        {

          var id = Int32.Parse(form[0]);

          var productToUpdate = product.Products.First(m => m.product_id == id);

          TryUpdateModel(productToUpdate, new string[] { "product_category", 
          "product_name", "product_quantity", "product_price" },  
           form.ToValueProvider());

            if (ModelState.IsValid)

            {

                product.SaveChanges();

                return RedirectToAction("Index", "Home");

            }

            return View(productToUpdate);

        }

        public ActionResult Details(int id)

        {

            return View(product.Products.Where(m => m.product_id == id).Single());

        }

        public ActionResult Delete(int id)

        {

            return View(product.Products.Where(m => m.product_id == id).Single());

        }

        [HttpPost]

        public ActionResult Delete(int id, Product prd)

        {

           var productToDelete = (from m in product.Products where m.product_id == id
           select m).FirstOrDefault();

           product.DeleteObject(productToDelete);

           product.SaveChanges();

           return RedirectToAction("Index", "Home");

        }

        public ActionResult Create()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Create(Product prd)

        {

            if (ModelState.IsValid)

            {

                product.AddToProducts(prd);

                product.SaveChanges();

                return RedirectToAction("Index", "Home");

            }

            else

                return View();

        }

    }

}

 

After creating a Controller, you can see the output in your browser: