ARTICLE

Basic ASP.Net MVC3 Razor Engine Application with Entity Framework: Part 2

Posted by Shirsendu Nandi in Articles | ASP.NET MVC with C# on May 20, 2011

Tags: Asp.net mvc3, Asp.net mvc3 Razor Engine, Asp.net mvc3 Razor Engine Application, Asp.net mvc3 Razor Engine with Entity Framework, Entity Framework, Entity Framework Asp.net mvc3 Razor Engine, Entity Framework Asp.net mvc3 Razor Engine Application, Framework Application, mvc3 Razor Engine, mvc3 Razor Engine with Entity Framework, what is Asp.net mvc3 Razor Engine Application

In this article I will describe how to create the related insert update delete details function in this ASP.Net MVC3 Entity Framework with razor engine.

Tweet
3286
0

Reader Level: Intermediate

Download Files:

blogmvc3.rar

Before reading this article please visit my previous article; the URL is:

http://www.c-sharpcorner.com/UploadFile/b19d5a/7464/

Now in the "HomeController" write the action method for Create. The code will be:

public ActionResult Create()
        {
            ViewBag.Message = "Welcome Blog Post Page";
            var v = ViewData.Model = _db.Comments.ToList();
            var Comments = new Comments();

            return View(Comments);
        }

        //
        // POST: /Home/Create

        [HttpPost]
        public ActionResult Create(Comments Comments)
        {
            try
            {
                // TODO: Add insert logic here
                if (ModelState.IsValid)
                {
                    _db.Comments.Add(Comments);
                    _db.SaveChanges();
                    return RedirectToAction("index", "Home");
                }

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Step 2:

Now right-click under the "Create" method and after that please check "Create Strongly-typed Views".

Choose Model Class "Comments" Under DropDown List.

Select "Create" under the "Scaffold Template" list. After that press the "Add" button. It will automatically create a view named "Create " under the "Home" folder.

The code will be generated automatically. Select all and Paste the following code under "create" view.

@model blogmvc3.Models.Comments

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
<h2>Create</h2>

<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>Comments</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Blog.BlogName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.BlogName)
            @Html.ValidationMessageFor(model => model.Blog.BlogName)
        </div>
          <div class="editor-label">
            @Html.LabelFor(model => model.Blog.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.Description)
            @Html.ValidationMessageFor(model => model.Blog.Description)
        </div>
           <div class="editor-label">
            @Html.LabelFor(model => model.Blog.Body)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.Body)
            @Html.ValidationMessageFor(model => model.Blog.Body)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Comment)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Comment)
            @Html.ValidationMessageFor(model => model.Comment)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

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

Step 3:

Now write the method named "Details" under "Homecontroller":

        public ActionResult Details(int id)
        {
            Comments Comments = _db.Comments.Find(id);
            if (Comments == null)
                return RedirectToAction("Index");

            return View("Details", Comments);
        }

Now right-click under the "Details" method and after that please check "Create Strongly-typed Views".

Choose Model Class "Comments" Under Dropdown list.

Select "Details" under the "Scaffold Template" list. After that press the "Add" Button. It will automatically create a view named "Details" under the "Home" folder.

The code will be generated automatically. Select all and paste the following code under "Details" view.

@model blogmvc3.Models.Comments

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}

<h2>Details</h2>

<fieldset>
    <legend>Comments</legend>

    <div class="display-label">BlogName</div>
    <div class="display-field">@Model.Blog.BlogName</div>
    <p></p>

    <div class="display-label">Blog Description</div>
    <div class="display-field">@Model.Blog.Description</div>
    <p></p>

    <div class="display-label">Body</div>
    <div class="display-field">@Model.Blog.Body</div>
    <p></p>

    <div class="display-label">Comment</div>
    <div class="display-field">@Model.Comment</div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.CommentId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Step 4:

Now it's the time for the Edit action method in the home controller.

public ActionResult Edit(int id)
        {
            var Comments = _db.Comments.Single(a => a.CommentId == id);
            return View(Comments);
        }

        //
        // POST: /Home/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            var Comments = _db.Comments.Find(id);
            try
            {
                if (TryUpdateModel(Comments))
                {
                    _db.SaveChanges();
                    return RedirectToAction("Index");
                }
                else
                {
                    return View(Comments);
                }
            }
            catch
            {
                return View(Comments);
            }
        }

Now right-click under the "Edit" Action method and after that please check "Create Strongly-typed Views".

Choose Model Class "Comments" Under Dropdown List.

Select "Edit" under "Scaffold Template" List. After that press the "Add" Button. It will automatically create a view named "Edit" under the "Home" folder.

The code will be generated automatically. Select all and paste the following code under "Edit" view.

@model blogmvc3.Models.Comments

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}

<h2>Edit</h2>

<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>Comments</legend>

        @Html.HiddenFor(model => model.CommentId)
         <div class="editor-label">
            @Html.LabelFor(model => model.Blog.BlogName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.BlogName)
            @Html.ValidationMessageFor(model => model.Blog.BlogName)
        </div>
          <div class="editor-label">
            @Html.LabelFor(model => model.Blog.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.Description)
            @Html.ValidationMessageFor(model => model.Blog.Description)
        </div>
           <div class="editor-label">
            @Html.LabelFor(model => model.Blog.Body)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Blog.Body)
            @Html.ValidationMessageFor(model => model.Blog.Body)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Comment)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Comment)
            @Html.ValidationMessageFor(model => model.Comment)
        </div>

       @* <div class="editor-label">
            @Html.LabelFor(model => model.BlogId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BlogId)
            @Html.ValidationMessageFor(model => model.BlogId)
        </div>*@

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

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

Step 5:

Now for the delete action please write the following code under the "homeController".

public ActionResult Delete(int id)
        {
            return View(_db.Comments .Find (id));
        }

        //
        // POST: /Home/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here
                var comments = _db.Comments.Find(id);
                _db.Comments.Remove(comments);
                _db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Now right-click under the "Delete" Action method and after that please check "Create Strongly-typed Views".

Choose Model Class "Comments" under the Dropdown list.

Select "Delete" under the "Scaffold Template" list. After that press the "Add" Button. It will automatically create a view named "Delete" under the "Home" folder.

The code will be generated automatically. Select all and paste the following code under the "Delete" view.

@model blogmvc3.Models.Comments

@{
    ViewBag.Title = "Delete";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Delete Action</legend>

   <div class="display-label">BlogName</div>
    <div class="display-field">@Model.Blog.BlogName</div>
    <p></p>

    <div class="display-label">Blog Description</div>
    <div class="display-field">@Model.Blog.Description</div>
    <p></p>

    <div class="display-label">Body</div>
    <div class="display-field">@Model.Blog.Body</div>

    <p></p>

    <div class="display-label">Comment</div>
    <div class="display-field">@Model.Comment</div>
</fieldset>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" /> |
        @Html.ActionLink("Back to List", "Index")
    </p>
}

Now the overall code of the "HomeController" is given below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using blogmvc3.Models;
using blogmvc3.DatabaseContext;

namespace blogmvc3.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        BlogDbContext _db = new BlogDbContext();

        public ActionResult Index()
        {
            return View(_db.Comments .ToList ());
        }

        //
        // GET: /Home/Details/5

        public ActionResult Details(int id)
        {
            Comments Comments = _db.Comments.Find(id);
            if (Comments == null)
                return RedirectToAction("Index");

            return View("Details", Comments);
        }

        //
        // GET: /Home/Create

        public ActionResult Create()
        {
            ViewBag.Message = "Welcome Blog Post Page";
            var v = ViewData.Model = _db.Comments.ToList();
            var Comments = new Comments();

            return View(Comments);
        }

        //
        // POST: /Home/Create

        [HttpPost]
        public ActionResult Create(Comments Comments)
        {
            try
            {
                // TODO: Add insert logic here
                if (ModelState.IsValid)
                {
                    _db.Comments.Add(Comments);
                    _db.SaveChanges();

                    return RedirectToAction("index", "Home");
                }

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Home/Edit/5|

        public ActionResult Edit(int id)
        {
            var Comments = _db.Comments.Single(a => a.CommentId == id);

            return View(Comments);
       }

        //
        // POST: /Home/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            var Comments = _db.Comments.Find(id);
            try
            {
                if (TryUpdateModel(Comments))
                {
                    _db.SaveChanges();
                    return RedirectToAction("Index");
                }
               else
                {
                    return View(Comments);
                }
            }
            catch
            {
                return View(Comments);
            }
        }

        //
        // GET: /Home/Delete/5

        public ActionResult Delete(int id)
        {
            return View(_db.Comments .Find (id));
        }

        //
        // POST: /Home/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here
                var comments = _db.Comments.Find(id);
                _db.Comments.Remove(comments);
                _db.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Step 6:

Now run the following code. You will insert, update, delete and see the details data in the application. In this application I did not do any designing.

So now you can get a good basic idea of ASP.Net MVC3 razor applications with Entity Framework.

This application is being made by VS 2010. I have uploaded the source code here.