MVC Jquery

-------------------------
C# File
------------------------


using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DemoPractice.Controllers
{
public class AjaxController : Controller
{
private EmployeeEntities emp = new EmployeeEntities();
public static List<Employee> emplist = new List<Employee>();
public ActionResult Index()
{
return View();
}
public bool SubmitData(Employee obj)
{
try
{
emp.Employees.Add(obj);
emp.SaveChanges();
//emplist.Add(obj);
return true;
}
catch
{
return false;
}
}
public JsonResult GetAll()
{
emplist = emp.Employees.ToList();
return Json(emplist, JsonRequestBehavior.AllowGet);
}
public JsonResult GetbyID(int ID)
{
var emps = emplist.Find(x => x.Id.Equals(ID));
return Json(emps, JsonRequestBehavior.AllowGet);
}
public ActionResult Edit(Employee employees)
{
if (ModelState.IsValid)
{
emp.Entry(employees).State = EntityState.Modified;
emp.SaveChanges();
return RedirectToAction("Index");
}
return View(employees);
}
public JsonResult Update(Employee emps)
{
emp.Entry(emps).State = EntityState.Modified;
emp.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
public JsonResult Delete(int ID)
{
Employee employees = emp.Employees.Find(ID);
emp.Employees.Remove(employees);
emp.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
}
}

-------------------------
 Create View with JavaScript
------------------------

@{

ViewBag.Title = "Index";

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<h2>Index</h2>

<div class="container">

<div class="form-group">

<label for="EmployeeId">ID</label>

<input type="text" class="form-control" id="Id" name="Id" placeholder="Id" disabled="disabled" />

</div>

<div class="form-group">

<span>Name:</span>

<input type="text" id="Name" name="Name" />

</div>

<div class="form-group">

<span>City:</span>

<input type="text" id="City" name="City" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>Address:</span>

<input type="text" id="Address" name="Address" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>CreatedDate:</span>

<input type="date" id="CreatedDate" name="CreatedDate" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>Male:</span> <input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />

<span>FeMale:</span> <input id="Gender" name="Gender" type="radio" value="Female" />

</div>

<div class="form-group">

<button type="button" class="btn btn-success" id="btnAdd" onclick="return submitData()">Add</button>

<button type="button" class="btn btn-success" id="btnUpdate" style="display:none;" onclick="return Update();">Update</button>

</div>

@* <input type="button" class="btn btn-success" id="Submit" value="Submit" onclick="submitData()" />*@

</div>

<div>

<table id="resultTable" class="table table-bordered table-hover"></table>

</div>

<script type="text/javascript">

getData();

function submitData(){

var res = validate();

if (res == false) {

return false;

}

var data = {

Id: $('#Id').val(),

Name: $("#Name").val(),

City: $("#City").val(),

Address: $("#Address").val(),

CreatedDate: $("CreatedDate").val(),

Gender: $("Gender").val()

}

$.ajax({

type: "POST",

url: '@Url.Action("SubmitData", "Ajax")',

data: data,

success: function (res) {

if (res) {

getData();

//$("#Id").val('');

$("#Name").val('');

$("#City").val('');

$("#Address").val('');

$("#CreatedDate").val('');

$("#Gender").val('');

}

}

});

}

function getData() {

$.ajax({

type: "GET",

url: '@Url.Action("GetAll","Ajax")',

success: function (result) {

debugger

var data = '<tr><th>Sr.no</th><th>Name</th><th>City</th><th>Address</th><th>CreatedDate</th><th>Gender</th><th></th></tr>';

for (var i = 0; i < result.length; i++) {

data += '<tr><td>' + result[i].Id + '</td><td>' + result[i].Name + '</td><td>' + result[i].City + '</td><td>' + result[i].Address + '</td><td>' + result[i].CreatedDate + '</td><td>' + result[i].Gender + '</td><td><a href="#" onclick="getbyID(' + result[i].Id + ')">Edit</a> | <a href="#" onclick="Delele(' + result[i].Id + ')">Delete</a></td></tr>'

}

$("#resultTable").html(data)

}

});

}

function getbyID(EmpID) {

$('#Name').css('border-color', 'lightgrey');

$('#City').css('border-color', 'lightgrey');

$('#Address').css('border-color', 'lightgrey');

$('#CreatedDate').css('border-color', 'lightgrey');

$("#Gender").css('border-color', 'lightgrey');

$.ajax({

//url: '@Url.Action("SubmitData", "Ajax")',

url: "/Ajax/getbyID/" + EmpID,

type: "GET",

contentType: "application/json;charset=UTF-8",

//dataType: "json",

success: function (result) {

$('#Id').val(result.Id);

$('#Name').val(result.Name);

$('#City').val(result.City);

$('#Address').val(result.Address);

$('#CreatedDate').val(result.CreatedDate);

$('#Gender').val(result.Gender);

//$('#Submit').show();

$('#btnUpdate').show();

$('#btnAdd').hide();

},

});

return false;

}

//function for updating employee's record

function Update() {

var res = validate();

if (res == false) {

return false;

}

var empObj = {

Id: $('#Id').val(),

Name: $('#Name').val(),

City: $('#City').val(),

Address: $('#Address').val(),

CreatedDate: $('#CreatedDate').val(),

Gender: $('#Gender').val()

};

$.ajax({

url: "/Ajax/Update",

data: JSON.stringify(empObj),

type: "POST",

contentType: "application/json;charset=utf-8",

dataType: "json",

success: function (result) {

getData();

$('#Id').val("");

$('#Name').val("");

$('#City').val("");

$('#Address').val("");

$('#CreatedDate').val("");

$('#Gender').val("");

}

});

}

//function for deleting employee's record

function Delele(ID) {

var ans = confirm("Are you sure you want to delete this Record?");

if (ans) {

$.ajax({

url: "/Ajax/Delete/" + ID,

type: "POST",

contentType: "application/json;charset=UTF-8",

dataType: "json",

success: function (result) {

loadData();

}

});

}

}

function validate() {

var isValid = true;

if ($('#Name').val().trim() == "") {

$('#Name').css('border-color', 'Red');

isValid = false;

}

else {

$('#Name').css('border-color', 'lightgrey');

}

if ($('#City').val().trim() == "") {

$('#City').css('border-color', 'Red');

isValid = false;

}

else {

$('#City').css('border-color', 'lightgrey');

}

if ($('#Address').val().trim() == "") {

$('#Address').css('border-color', 'Red');

isValid = false;

}

else {

$('#Address').css('border-color', 'lightgrey');

}

if ($('#CreatedDate').val().trim() == "") {

$('#CreatedDate').css('border-color', 'Red');

isValid = false;

}

else {

$('#CreatedDate').css('border-color', 'lightgrey');

}

if ($('#Gender').val().trim() == "") {

$('#Gender').css('border-color', 'Red');

isValid = false;

}

else {

$('#Gender').css('border-color', 'lightgrey');

}

return isValid;

}

</script>