How to show records in Datatable in asp.net MVC

View

<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css”>
<script type=”text/javascript” charset=”utf8″ src=”https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js”></script>

<script>
$(document).ready(function () {
$(‘#questionTable’).DataTable();
});
</script>

<p>
@Html.ActionLink(“Create New”, “Create”)
@*@Html.ActionLink(“Add New Question”,”Create”, “Questions”)*@
</p>

<div style=”width:100%; margin:0 auto;”>
<table id=”myTable”>
<thead>
<tr>
<th>Subject</th>
@*<th>Section</th>*@
<th>Lession</th>
@*<th>Topic</th>*@
<th>Question Text</th>
<th>Marks For Question</th>
<th>Difficuty Level</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
@* Load datatable css *@
<link href=”//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css” rel=”stylesheet” />
@* Load datatable js *@
@section Scripts{
<script src=”//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js”></script>
<script>
$(document).ready(function () {
$(‘#myTable’).DataTable({
“ajax”: {
“url”: “/Questions/loaddata”,
“type”: “GET”,
“datatype”: “json”
},
“columns”: [
{ “data”: “subjectName”, “autoWidth”: true },
//{ “data”: “section”, “autoWidth”: true },
{ “data”: “lession”, “autoWidth”: true },
//{ “data”: “topic”, “autoWidth”: true },
{ “data”: “QuestionText”, “autoWidth”: true },
{ “data”: “MarksForQuestion”, “autoWidth”: true },
{ “data”: “QuestionDiffLevel”, “autoWidth”: true }
]
});
});
</script>

 

Controller:

 

public ActionResult Index()
{
return View();
}

public ActionResult loaddata()
{
var data = db.GetQuestion(null).Select(u=>new QuestionVM {
subjectName=u.SubjectName,
section=u.SectionName,
lession=u.LessonName,
topic=u.TopicName,
QuestionText=u.QuestionText,
MarksForQuestion =u.MarksForQuestion,
QuestionDiffLevel=u.QuestionDiffLevel
});
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *