Insert View Using Jquery

RouteCnfig.
cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Jquery_DataBase
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Search",
url: "home/search",
defaults: new { controller = "Home", action = "Search", id =
UrlParameter.Optional }
);
routes.MapRoute(
name: "Student",
url: "home/Student",
defaults: new { controller = "Home", action = "Student", id =
);
routes.MapRoute(
name: "Student Insert",
url: "home/Insert",
defaults: new { controller = "Home", action = "Insert", id =
);
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Employee", id =
);
}
}
}
HomeController.cs
using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Jquery_DataBase.Controllers
{
public class HomeController : Controller
{
// GET: Home
JqueryDbEntities dbContext = new JqueryDbEntities();
public ActionResult Employee()

{
return View();
}
public JsonResult Search(string empId)
{
Employee emp = dbContext.Employees.Find(empId);
return Json(emp, JsonRequestBehavior.AllowGet);
}
public ActionResult Student()

{
return View();
}
public JsonResult Insert(string name,int age,string mail,string mobile)
{
string result = "";
try
{
Student student = new Student();
student.Name = name;
student.Age = age;
student.MailId = mail;
student.Mobile = mobile;
dbContext.Students.Add(student);
}
catch
{
result="Not Succesfuul";
}
finally
{
dbContext.SaveChanges();
result = "Succesfully";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
Employee.cshtml
@{
Layout=null;
}
<html>
<head>
<script src="~/Views/jQuery.js"></script>
<script>
$(document).ready(function () {
$("#btnSearch").click(function (event) {
var id = $("#searchId").val();
$.ajax({
url: "/home/search",
type: "POST",
dataType: "JSON",
contentType: "application/json",
data: {
"empId": id
},
success: function (data) {
$("#name").val(data.Name);
$("#mobile").val(data.Mobile);
$("#dept").val(Department);
$("#design").val(data.Designation);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="searchId" placeholder="Enter Employee Id" />

<input type="submit" id="btnSearch" value="submit" />
<table>
<tr>
<thead>Name</thead>
<thead>Mobile Number</thead>
<thead>Department</thead>
<thead>Designation</thead>
</tr>
<td>
<td id="name"></td>
<td id="mobile"></td>
<td id="dept"></td>
<td id="design"></td>
</td>
</table>
<br />
<a href="Student">Student</a>
</body>
</html>
Student.cshtml
@*@{
Layout = null;
}
<html>
<head>
<script>
$("#btnSearch").click(function () {
var empId = $("#searchId").val();
$.ajax({
url: "/home/search",
type: "Get",
dataType: "JSON",
data: {
"empId": empId
}
})
});
});
</script>
</head>
<body>
<input type="text" id="searchId" placeholder="Enter Employee Id" />

<button id="btnSearch">Search</button>
</body>
</html>*@
@{
Layout = null;
}
<html>
<head>
<script>
$("#btnSubmit").click(function () {
var stuName = $("#stuName").val();
var stuAge = $("#stuAge").val();
var stuMail = $("#stuEmail").val();
var stuMobile = $("#stuMobile").val();
$.ajax({
url: "/home/insert",
type: "POST",
dataType: "JSON",
data: {
"stuName": stuName,
"stuAge": stuAge,
"stuMail": stuMail,
"stuMobile": stuMobile
},
sucess: function (data) {
alert(data);
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>MailId</th>
<th>Mobile</th>
</tr>
<tr>
<td><input type="text" id="stuName" placeholder="Enter Name" /></td>
<td><input type="number" id="stuAge" placeholder="Enter Age" /></td>
<td><input type="email" id="stuEmail" placeholder="Enter E-mail"
/></td>
<td><input type="tel" id="stuMobile" placeholder="Enter
MobileNumber" /></td>
</tr>
</table>
<button id="btnSubmit">Submit</button>
</body>
</html>
Employee.cs
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your
application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
{
using System;
public partial class Employee

{
public int EmpId { get; set; }
public string Name { get; set; }
public string Mobile { get; set; }
public string Department { get; set; }
public string Designation { get; set; }
}
}
Student.cs
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your
application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
{
using System;
public partial class Student

{
public int StudentId { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string MailId { get; set; }
public string Mobile { get; set; }
}
}

Insert View Using Jquery

Uploaded by

Insert View Using Jquery

Uploaded by

RouteCnfig.

public ActionResult Employee()

public ActionResult Student()

<input type="text" id="searchId" placeholder="Enter Employee Id" />

<input type="text" id="searchId" placeholder="Enter Employee Id" />

public partial class Employee

public partial class Student

You might also like