Hi SajidHussa,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<SelectListItem> customers = new List<SelectListItem>();
customers.Add(new SelectListItem { Text = "John Hammond", Value = "1" });
customers.Add(new SelectListItem { Text = "Mudassar Khan", Value = "2" });
customers.Add(new SelectListItem { Text = "Suzanne Mathews", Value = "3" });
customers.Add(new SelectListItem { Text = "Robert Schidner", Value = "4" });
return View(customers);
}
public JsonResult getchapter()
{
List<SelectListItem> myList = new List<SelectListItem>();
myList.Add(new SelectListItem { Text = "Chapter 1", Value = "1" });
myList.Add(new SelectListItem { Text = "Chapter 2", Value = "2" });
myList.Add(new SelectListItem { Text = "Chapter 3", Value = "3" });
myList.Add(new SelectListItem { Text = "Chapter 4", Value = "4" });
return Json(myList, JsonRequestBehavior.AllowGet);
}
}
View
@model List<SelectListItem>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Home/getchapter",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (chapters) {
var row = "";
$.each(chapters, function () {
row += "<tr><td>" + this.Text + "</td></tr>";
});
$('#tblChapter tbody').append(row);
}
});
});
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
</tr>
@foreach (SelectListItem item in Model)
{
<tr>
<td>@item.Text</td>
</tr>
}
</table>
<hr />
<table id="tblChapter">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Screenshot