Asp.Net and Asp.Net MVC Tutorials for Beginners: December 2017

Saturday, 16 December 2017

Adding data to database using entity framework.

After success of employee addition message is display as in below screen.

Step 1: Install entity framework, if you don't have it installed already on your computer. Using nuget package manager, is the easiest way to install. A reference to EntityFramework.dll is automatically added.
Open visual studio > Tools > Library Package Manager > Manage NuGet Packages for Solution

Step 2: Add EmployeeContext.cs class file to the Models folder. Add the following "using" declaration (using System.Data.Entity;).

EmployeeContext class derives from DbContext class, and is responsible for establishing a connection to the database. So include connection string in web.config file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.Entity;

namespace MVCDemo.Entity
{
public class EmployeeContext : DbContext
{
public DbSet<Employee> Employees { get; set; }
}
}

Step 3: Add a connection string

Step 4: Map "Employee" model class to the database table, Employees using "Table" and "Key" attribute as shown below.

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace MVCDemo.Entity

{

[Table("Employees")]

public class Employee

{

[Key]

public int EmployeeId { get; set; }

public string LastName { get; set; }

public string FirstName { get; set; }

public string Title { get; set; }

public string TitleofCourtesy { get; set; }

public string Language { get; set; }

public DateTime DOB { get; set; }

public DateTime DOJ { get; set; }

public double Salary { get; set; }

public string Email { get; set; }

}

Step 5: Make the changes to action method in controller class.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVCDemo.Entity;

using System.Text.RegularExpressions;

namespace MvcDemo.Controllers

{

public class HomeController : Controller

{

public ActionResult Customer()

{

List<SelectListItem> items = new List<SelectListItem>();

items.Add(new SelectListItem

{

Text = "Option1",

Value = "Option1"

});

items.Add(new SelectListItem

{

Text = "Option2",

Value = "Option2"

});

items.Add(new SelectListItem

{

Text = "Option3",

Value = "Option3"

});

items.Add(new SelectListItem

{

Text = "Option4",

Value = "Option4"

});

ViewBag.ListOfItems = items;

TempData["ListofItems"] = items;

return View();

}

[HttpPost]

public ActionResult Customer(Employee objEmployee, string radios, string[] departments)

{

ViewBag.ListOfItems = TempData["ListofItems"];

TempData.Keep();

// Performing server side validation

if (string.IsNullOrEmpty(objEmployee.LastName))

{

ModelState.AddModelError("LastName", "Last Name is required");

}

if (string.IsNullOrEmpty(objEmployee.FirstName))

{

ModelState.AddModelError("FirstName", "First Name is required");

}

if (objEmployee.Title == "0")

{

ModelState.AddModelError("Title", "Title is required");

}

if (string.IsNullOrEmpty(radios))

{

ModelState.AddModelError("TitleofCourtesy", "Title of Coutesy is required");

}

if (departments==null)

{

ModelState.AddModelError("Language", "Language is required");

}

if (!string.IsNullOrEmpty(objEmployee.Email))

{

string emailRegex = @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +

@"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +

@".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";

Regex re = new Regex(emailRegex);

if (!re.IsMatch(objEmployee.Email))

{

ModelState.AddModelError("Email", "Email is not valid");

}

else

{

ModelState.AddModelError("Email", "Email is required");

}

if (ModelState.IsValid)

{

// Perform Operations

objEmployee.TitleofCourtesy = radios;

// You might have to use string separator like comma or something else.

string dept = "";

foreach (var d in departments)

dept += d.ToString();

objEmployee.Language = dept;

try

{

EmployeeContext db = new EmployeeContext();

db.Employees.Add(objEmployee);

db.SaveChanges();

ViewBag.Message = "Employee Added.";

}

catch (Exception ex)

{

}

return View();

}

In View:

@model MVCDemo.Entity.Customer

Layout = null;

}

<!DOCTYPE html>

<head>

<title>Customer</title>

</head>

<body>

<h3>Add Employee</h3>

@if (ViewBag.Message != null)

{

<h5>@ViewBag.Message</h5>

}

else

{

@using (Html.BeginForm("Customer", "Home", FormMethod.Post))

{

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

</div>

@Html.ValidationMessageFor(m => m.LastName)

</div>

<div class="col-md-3">First Name</div>

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

</div>

@Html.ValidationMessageFor(m => m.FirstName)

</div>

<div class="col-md-3">Title</div>

@Html.DropDownListFor(m => m.Title,

new List<SelectListItem> {

new SelectListItem { Value = "0" , Text = "Select Title" },

new SelectListItem { Value = "1" , Text = "Option A" },

new SelectListItem { Value = "2" , Text = "Option B" },

new SelectListItem { Value = "3" , Text = "Option C" }

new { id = "drpTitle", @class = "form-control" })

</div>

@Html.ValidationMessageFor(m => m.Title)

</div>

<div class="col-md-3">Title of Courtesy</div>

@if (ViewBag.ListOfItems != null)

{

foreach (var c in ViewBag.ListOfItems)

{

<input type="radio" name="radios" value="@c.Value" />@c.Text

}

</div>

@Html.ValidationMessageFor(m => m.TitleofCourtesy)

</div>

<div class="col-md-3">Language</div>

@if (ViewBag.ListOfItems != null)

{

foreach (var c in ViewBag.ListOfItems)

{

<input type="checkbox" name="departments" value="@c.Value" />@c.Text

}

</div>

@Html.ValidationMessageFor(m => m.Language)

</div>

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

</div>

@Html.ValidationMessageFor(m => m.DOB)

</div>

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

</div>

@Html.ValidationMessageFor(m => m.DOJ)

</div>

<div class="col-md-3">Salary</div>

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

</div>

@Html.ValidationMessageFor(m => m.Salary)

</div>

<div class="col-md-3">Email</div>

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

</div>

@Html.ValidationMessageFor(m => m.Email)

</div>

</div>

</div>

}

</div>

}

</div>

$(function () {

$("#txtDOB").datepicker({ maxDate: '0' });

$("#txtDOJ").datepicker({ minDate: '0' });

$("#btnSave").click(function () {

});

</script>

</body>

</html>

Step 6: Existing databases do not need, database initializer so it can be turned off so copy and paste the following code in Application_Start() function, in Global.asax file.

Database.SetInitializer<MVCDemo.Models.EmployeeContext>(null);

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MvcDemo

{

public class MvcApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

Database.SetInitializer<MVCDemo.Entity.EmployeeContext>(null);

AreaRegistration.RegisterAllAreas();

WebApiConfig.Register(GlobalConfiguration.Configuration);

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

BundleConfig.RegisterBundles(BundleTable.Bundles);

AuthConfig.RegisterAuth();

}

Performing server side validation in MVC.

In Models

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using MVCDemo.Entity;

namespace MVCDemo.Entity

{

public class Customer

{

public string LastName { get; set; }

public string FirstName { get; set; }

public string Title { get; set; }

public string TitleofCourtesy { get; set; }

public string Language { get; set; }

public bool IsLanguage { get; set; }

public DateTime DOB { get; set; }

public DateTime DOJ { get; set; }

public double Salary { get; set; }

public string Email { get; set; }

}

In Controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVCDemo.Entity;

using System.Text.RegularExpressions;

namespace MvcDemo.Controllers

{

public class HomeController : Controller

{

public ActionResult Customer()

{

ViewBag.Message = "Your Employee page.";

List<SelectListItem> items = new List<SelectListItem>();

items.Add(new SelectListItem

{

Text = "Option1",

Value = "Option1"

});

items.Add(new SelectListItem

{

Text = "Option2",

Value = "Option2"

});

items.Add(new SelectListItem

{

Text = "Option3",

Value = "Option3"

});

items.Add(new SelectListItem

{

Text = "Option4",

Value = "Option4"

});

ViewBag.ListOfItems = items;

TempData["ListofItems"] = items;

return View();

}

[HttpPost]

public ActionResult Customer(Customer objCustomer, string radios, string[] departments)

{

ViewBag.Message = "Your Employee page.";

ViewBag.ListOfItems = TempData["ListofItems"];

TempData.Keep();

if (string.IsNullOrEmpty(objCustomer.LastName))

{

ModelState.AddModelError("LastName", "Last Name is required");

}

if (string.IsNullOrEmpty(objCustomer.FirstName))

{

ModelState.AddModelError("FirstName", "First Name is required");

}

if (objCustomer.Title == "0")

{

ModelState.AddModelError("Title", "Title is required");

}

if (string.IsNullOrEmpty(radios))

{

ModelState.AddModelError("TitleofCourtesy", "Title of Coutesy is required");

}

if (departments==null)

{

ModelState.AddModelError("Language", "Language is required");

}

if (!string.IsNullOrEmpty(objCustomer.Email))

{

string emailRegex = @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +

@"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +

@".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";

Regex re = new Regex(emailRegex);

if (!re.IsMatch(objCustomer.Email))

{

ModelState.AddModelError("Email", "Email is not valid");

}

else

{

ModelState.AddModelError("Email", "Email is required");

}

if (ModelState.IsValid)

{

// Perform Operations

}

return View();

}

In Views

@model MVCDemo.Entity.Customer

Layout = null;

}

<!DOCTYPE html>

<head>

<title>Customer</title>

</head>

<body>

<h3>Add Employee</h3>

@using (Html.BeginForm("Customer","Home", FormMethod.Post)) {

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

</div>

@Html.ValidationMessageFor(m => m.LastName)

</div>

<div class="col-md-3">First Name</div>

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

</div>

@Html.ValidationMessageFor(m => m.FirstName)

</div>

<div class="col-md-3">Title</div>

@Html.DropDownListFor(m => m.Title,

new List<SelectListItem> {

new SelectListItem { Value = "0" , Text = "Select Title" },

new SelectListItem { Value = "1" , Text = "Option A" },

new SelectListItem { Value = "2" , Text = "Option B" },

new SelectListItem { Value = "3" , Text = "Option C" }

new { id = "drpTitle", @class = "form-control" })

</div>

@Html.ValidationMessageFor(m => m.Title)

</div>

<div class="col-md-3">Title of Courtesy</div>

@if (ViewBag.ListOfItems != null)

{

foreach (var c in ViewBag.ListOfItems)

{

<input type="radio" name="radios" value="@c.Value" />@c.Text

}

</div>

@Html.ValidationMessageFor(m => m.TitleofCourtesy)

</div>

<div class="col-md-3">Language</div>

@if (ViewBag.ListOfItems != null)

{

foreach (var c in ViewBag.ListOfItems)

{

<input type="checkbox" name="departments" value="@c.Value" />@c.Text

}

</div>

@Html.ValidationMessageFor(m => m.Language)

</div>

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

</div>

@Html.ValidationMessageFor(m => m.DOB)

</div>

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

</div>

@Html.ValidationMessageFor(m => m.DOJ)

</div>

<div class="col-md-3">Salary</div>

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

</div>

@Html.ValidationMessageFor(m => m.Salary)

</div>

<div class="col-md-3">Email</div>

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

</div>

@Html.ValidationMessageFor(m => m.Email)

</div>

</div>

</div>

}

</div>

$(function () {

$("#txtDOB").datepicker({ maxDate: '0' });

$("#txtDOJ").datepicker({ minDate: '0' });

$("#btnSave").click(function () {

});

</script>

</body>

</html>

Wednesday, 13 December 2017

Create Screen Add Employee Using Simple Jquery Validation

In View :

@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Add Employee</h3>

<div class="container">
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Last Name</div>
<div class="col-md-3">
<input type="text" id="txtLastName" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errLastName">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">First Name</div>
<div class="col-md-3">
<input type="text" id="txtFirstName" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errFirstName">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Title</div>
<div class="col-md-3">
<select id="drpTitle" class="form-control">
<option>Select Title</option>
<option>Option 01</option>
</select>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errTitle">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Title of Courtesy</div>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="optradio">Option 1</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3</label>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errTOC">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Language</div>
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="English">English</label>
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="Hindi">Hindi</label>
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="Urdu">Urdu</label>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errLanguage">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">DOB</div>
<div class="col-md-3">
<input type="text" id="txtDOB" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errDOB">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">DOJ</div>
<div class="col-md-3">
<input type="text" id="txtDOJ" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errDOJ">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Salary</div>
<div class="col-md-3">
<input type="text" id="txtSalary" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errSalary">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Email</div>
<div class="col-md-3">
<input type="text" id="txtEmail" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errEmail">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-3">
<input type="button" id="btnSave" class="btn btn-primary" value="Save" />
</div>
<div class="col-md-6">
 
</div>
</div>
<div class="clear-fix"> </div>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@*<link rel="stylesheet" href="/resources/demos/style.css">*@
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#txtDOB").datepicker({ maxDate: '0' });
$("#txtDOJ").datepicker({ minDate: '0' });

$("#txtLastName").keypress(function () {
if ($("#txtLastName").length > 0)
$("#errLastName").addClass("hidden");
});

$("#txtFirstName").keypress(function () {
if ($("#txtFirstName").length > 0)
$("#errFirstName").addClass("hidden");
});

$("#drpTitle").change(function () {
if ($("#drpTitle option:selected").text() != "Select Title") {
$("#errTitle").addClass("hidden");
}
});

$('[name="optradio"]').change(function () {
if ($('[name="optradio"]:checked').length > 0)
$("#errTOC").addClass("hidden");
});

$('[name="chkLanguage"]').change(function () {
if ($('[name="chkLanguage"]:checked').length > 0)
$("#errLanguage").addClass("hidden");
});

$("#txtDOB").change(function () {
if ($("#txtDOB").length > 0)
$("#errDOB").addClass("hidden");
});

$("#txtDOJ").change(function () {
if ($("#txtDOJ").length > 0)
$("#errDOJ").addClass("hidden");
});

$("#txtSalary").keyup(function () {
if ($("#txtSalary").val() < 10000 || $("#txtSalary").val() > 40000)
$("#errSalary").html("<strong>Salary should be between 10000 and 40000.</strong>").removeClass("hidden");
else if ($("#txtSalary").val() > 10000 && $("#txtSalary").val() < 40000)
$("#errSalary").html("<strong>Required</strong>").addClass("hidden");
});

// Only for Numeric Values in textbox.
$("#txtSalary").keydown(function (event) {
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
});

$("#txtEmail").keyup(function () {
if ($("#txtEmail").val() != "") {
var re = /^\w+([-+.'][^\s]\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (re.test($("#txtEmail").val())) {
$("#errEmail").html("<strong>Required.</strong>").addClass("hidden");
}
else {
$("#errEmail").html("<strong>Invalid Email</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errEmail").html("<strong>Required.</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
});

$("#btnSave").click(function () {
if ($("#txtLastName").val() != "") {
if ($("#txtFirstName").val() != "") {
if ($("#drpTitle option:selected").text() != "Select Title") {
if ($('[name="optradio"]:checked').length > 0) {
if ($('[name="chkLanguage"]:checked').length > 0) {
if ($("#txtDOB").val() != "") {
if ($("#txtDOJ").val() != "") {
if ($("#txtSalary").val() != "") {
if ($("#txtEmail").val() != "") {
var re = /^\w+([-+.'][^\s]\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (re.test($("#txtEmail").val())) {

}
else {
$("#errEmail").html("<strong>Invalid Email</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errEmail").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errSalary").removeClass("hidden");
$("#txtSalary").focus();
}
}
else {
$("#errDOJ").removeClass("hidden");
$("#txtDOJ").focus();
}
}
else {
$("#errDOB").removeClass("hidden");
$("#txtDOB").focus();
}
}
else {
$("#errLanguage").removeClass("hidden");
$('[name="chkLanguage"]').focus();
}
}
else {
$("#errTOC").removeClass("hidden");
$('[name="optradio"]').focus();
}
}
else {
$("#errTitle").removeClass("hidden");
$("#drpTitle").focus();
}
}
else {
$("#errFirstName").removeClass("hidden");
$("#txtFirstName").focus();
}
}
else {
$("#errLastName").removeClass("hidden");
$("#txtLastName").focus();
}
});
});
</script>
</body>

</html>