1.Model Class
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
public string Password { get; set; }
public string Email { get; set; }
public string Telephone { get; set; }
public string Address { get; set; }
public string Gender { get; set; }
public bool IsActive { get; set; }
[Display(Name="Country")]
public int CountryId { get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
public class AppContext:DbContext
{
public AppContext():base("DefaultConnection")
{
}
public DbSet<Employee> Employees { get; set; }
public DbSet<Country> Countries { get; set; }
}
2.Web Config file
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=MITTAL-PC; Integrated Security=SSPI; Initial Catalog=SPA_App" providerName="System.Data.SqlClient"/>
</connectionStrings>
3.Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SinglePageApplicationInMVC_UsingJQuery.Models;
using System.Data.Entity;
namespace SinglePageApplicationInMVC_UsingJQuery.Controllers
{
public class EmployeeController : Controller
{
AppContext _context = new AppContext();
// GET: Employee
public ActionResult Index()
{
ViewBag.CountryList = _context.Countries.ToList();
return View();
}
public JsonResult GetEmployees()
{
var employees = (from a in _context.Employees
join b in _context.Countries
on a.CountryId equals b.CountryId
select new { a.Id, a.FullName, a.Email, a.Password, a.Telephone, a.Address, a.Gender,a.IsActive, b.CountryId, b.CountryName }).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult AddEmployee(Employee employee)
{
if (employee.Id == 0)
{
_context.Employees.Add(employee);
}
else
{
_context.Entry(employee).State = EntityState.Modified;
}
_context.SaveChanges();
return RedirectToAction("Index");
}
public ActionResult Edit(int id)
{
var employee = (from a in _context.Employees
join b in _context.Countries
on a.CountryId equals b.CountryId
where a.Id == id
select new { a.FullName, a.Email, a.Password, a.Telephone, a.Address, a.Gender,a.IsActive, b.CountryId, b.CountryName }).ToList();
return Json(employee, JsonRequestBehavior.AllowGet);
}
public void Delete(int id)
{
var employee = _context.Employees.Find(id);
_context.Employees.Remove(employee);
_context.SaveChanges();
}
}
}
4.Index View
@model SinglePageApplicationInMVC_UsingJQuery.Models.Employee
@{
ViewBag.Title = "Index";
}
<div class="container">
<div style="float:left;width:40%">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Registration Form</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Telephone, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<label class="radio-inline">
@Html.RadioButtonFor(model => model.Gender, "Male", new { @name = "gender" })
Male
</label>
<label class="radio-inline">
@Html.RadioButtonFor(model => model.Gender, "Female", new { @name = "gender" })
Female
@Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
</label>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.IsActive)
@Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CountryId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("CountryId", new SelectList(ViewBag.CountryList, "CountryId", "CountryName"), null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CountryId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" id="btnsave" value="Save" class="btn btn-success" onclick="SaveData()" />
</div>
</div>
</div>
}
</div>
<br />
<br />
<br />
<div style="float:right;width:60%">
<table id="employees" class="table table-bordered table-striped table-condensed table-responsive" style="text-align:center">
<tr>
@*<td>Id</td>*@
<th>FullName</th>
<th>Email</th>
<th>Password</th>
<th>Telephone</th>
<th>Address</th>
<th>Gender</th>
<th>Country</th>
<th>IsActive</th>
<th colspan="2">Action</th>
</tr>
<tbody></tbody>
</table>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
//BindCoountry();
BindData();
});
function BindData() {
$.ajax({
url: '/Employee/GetEmployees',
type: 'GET',
success: function (p) {
$("#employees").find("tr:gt(0)").remove();
for (var i = 0; i < p.length; i++) {
$("#employees").append('<tr> <td style="display:none">' + p[i].Id + '</td> <td>' + p[i].FullName + '</td> <td>' + p[i].Email + '</td> <td>' + p[i].Password + '</td> <td>' + p[i].Telephone + '</td> <td>' + p[i].Address + '</td> <td>' + p[i].Gender + '</td> <td>' + p[i].CountryName + '</td> <td>' + p[i].IsActive + '</td> <td><input type="button" value="Edit" onclick="EditData(' + p[i].Id + ')" class="btn btn-success"></td> <td><input type="button" value="Delete" onclick="DeleteData(' + p[i].Id + ')" class="btn btn-danger"></td> </tr>');
}
},
error: function () {
alert('Record not Show !!!');
}
});
}
function SaveData() {
$.ajax({
url: '/Employee/AddEmployee',
method: 'POST',
data: { Id:KKK,FullName: $("#FullName").val(), Email: $("#Email").val(),Password:$('#Password').val(), Telephone: $("#Telephone").val(), Address: $("#Address").val(), CountryId: $("#CountryId").val(), Gender: $("input[name='Gender']:checked").val(),IsActive:$("input[name='IsActive']:checked").val()},
success: function (data) {
alert('Data Save/Update Successfully');
BindData();
},
error: function () { }
});
}
function BindCoountry() {
$.ajax({
url: '/Employee/GetCountry',
type: 'GET',
data: {},
success: function (data) {
$.each(data, function (index, country) {
$('#ddlcountry').append($('<option/>').attr("value", country.CountryId).text(country.CountryName));
});
},
error: function () { }
});
}
var KKK = 0;
function EditData(id) {
$.ajax({
url: '/Employee/Edit',
type: 'GET',
data: { Id: id },
success: function (p) {
console.log(p);
$("#FullName").val(p[0].FullName);
$("#Email").val(p[0].Email);
$("#Password").val(p[0].Password);
$("#Telephone").val(p[0].Telephone)
$("#Address").val(p[0].Address)
$("#CountryId option:selected").val(p[0].CountryId);
$("#CountryId option:selected").text(p[0].CountryName);
$("input[name=Gender][value=" + p[0].Gender + "]").prop('checked', true);
if (p[0].IsActive == true){
$("#IsActive").prop("checked", true);
}
else {
$("#IsActive").prop("checked", false);
}
$("#btnsave").val("Update");
KKK = id;
}
});
}
function DeleteData(id) {
if (confirm("Are you sure...?")) {
$.ajax({
url: '/Employee/Delete',
type: 'GET',
data: { Id: id },
success: function () {
BindData();
},
error: function () {
alert('Record Not Delete Successfully!!');
}
});
}
return false;
}
</script>
}
No comments:
Post a Comment