Hi Rockstar8,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class EmployeeModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees(string IDS)
{
string value = string.Empty;
if (!string.IsNullOrEmpty(IDS))
{
int[] ids = IDS.Replace(",,", ",").Split(',').Select(int.Parse).ToArray();
NorthwindEntities entries = new NorthwindEntities();
List<EmployeeModel> employees = entries.Employees
.Where(g => ids.Contains(g.EmployeeID))
.Select(x => new EmployeeModel()
{
Id = x.EmployeeID,
Name = x.FirstName + " " + x.LastName,
Country = x.Country
}).ToList();
JavaScriptSerializer serializer = new JavaScriptSerializer();
value = serializer.Serialize(employees);
}
return Json(value, JsonRequestBehavior.AllowGet);
}
}
View
<html>
<head>
<title>Index</title>
</head>
<body>
<div class="input-group">
<input type="text" id="txtIds" value="1,2,3" class="form-control" />
<span class="input-group-btn">
<input type="button" id="btnView" value="View" class="btn btn-primary" />
</span>
</div>
<table id="tblEmployees" class="table table-striped">
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnView").on('click', function (e) {
var model = { IDS: $("#txtIds").val() }
$.ajax({
type: 'GET',
url: "/Home/GetEmployees",
dataType: 'json',
data: model,
success: function (response) {
if (response != "") {
var data = JSON.parse(response);
$("#tblEmployees").empty();
$("#tblEmployees").append("<tr><th>ID</th><th>Name</th><th>Country</th></tr>");
for (var i = 0; i < data.length; i++) {
var id = data[i].Id;
var name = data[i].Name;
var country = data[i].Country;
$("#tblEmployees").append("<tr><td>" + id + "</td><td>" + name + "</td><td>" + country + "</td></tr>");
}
}
},
error: function (response) {
alert(response.response.Text);
}
});
});
});
</script>
</body>
</html>
Screenshot
