create employee information insert form design in asp.net mvc
Overview:
 |
| create crud operation employee details in mvc |
Step 1: Create a new ASP.NET MVC project in visual studio 2010,2012,2013,2015,2017,2019..etc
Create New Project
 |
| Project After Creating |
Step 2: Create New action Result in Home Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace InsertUpdateMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult Employee()
{
return View();
}
}
}
Step 3: Add New Model Class
 |
| Add New Model Class |
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace InsertUpdateMVC.Models
{
public class InsertUpdateModel
{
public int ID { get; set; }
[Required(ErrorMessage ="Required.!")]
public string Employee { get; set; }
[Required(ErrorMessage = "Required.!")]
public string Designation { get; set; }
[Required(ErrorMessage = "Required.!")]
public string Salary { get; set; }
[Required(ErrorMessage = "Required.!")]
public string Address { get; set; }
}
}
Step 4: Add new View in Right click on Employee action result in HomeController.
Add following View code in your Employee.cshtml page
Employee.cshtml View
@model InsertUpdateMVC.Models.InsertUpdateModel
@{
ViewBag.Title = "Employee";
}
<h2>Employee Information (Insert, Edit, Update, Delete and List)</h2>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")
<style>
.error {
color: white;
background-color: #f12e2e;
font-weight: bold;
font-size: 12px;
font-family: 'Times New Roman';
position: static;
display: inline-block;
z-index: 5;
}
</style>
@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
<div class="container">
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Employee)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Employee, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Employee, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Designation)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Designation, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Designation, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Salary)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Salary, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Salary, "", new { @class = "error" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3">@Html.LabelFor(Model => Model.Address)</div>
<div class="col-lg-3">@Html.TextBoxFor(Model => Model.Address, new { @class = "form-control" })</div>
<div class="col-lg-1">
@Html.ValidationMessageFor(Model => Model.Address, "", new { @class = "error" })
</div>
</div>
<br />
<div class="col-lg-offset-4">
<button type="submit" class="btn btn-primary" value="Save">Save</button>
</div>
</div>
}
Step 5: Add new header menu in Layout.cshtml page
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Employee", "Employee", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Step 6: Add new Starting Page in RouteConfig file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace InsertUpdateMVC
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Employee", id = UrlParameter.Optional }
);
}
}
}
Step 7: Run the Project Press Ctrl+F5
 |
| insert employee details in mvc in tamil |
Download Project Code:
More Details:
No comments:
Post a Comment