Sneha Dhandapani

Sneha Dhandapani

  • 1.5k
  • 434
  • 122.8k

How to load the datatable td values using ajax success function in mvc

Sep 20 2020 8:23 AM
Hi i want to load the data table td values in ajax success function in mvc. I tried to load the datatable td values in ajax success function while changing the year . But its not working.Below i have attached my code.
 
 
My View
 
@model IEnumerable<MVCproject.Model.Details>
@{
ViewBag.Title = "Summary";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/datatables.min.css" rel="stylesheet" />
<script src="~/Scripts/datatables.min.js"></script>
<div class="row" id="">
<div class="col-md-1 col-sm-1 col-xs-12"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="x_panel vt_shadow">
<div class="col-md-12 col-sm-12 col-xs-12 x_title" style="margin:10px 0px 10px 0px;">
<h2 class="" style="font-size:18px;color:black;text-align:left;"><b>Details<span class="DCDIYresult_year" style="color:black;"></span></b></h2>
<div class="col-md-1 col-sm-1 col-xs-12" style="margin-bottom:2px;float:right;margin-right:12px;">
<a class="btn btn-block" style="color:white;font-size:12px;font-weight:600;background-color:#008000;" href="Index/Dashboard"><i class="fa fa-home"></i>&nbsp;&nbsp;Back</a>
</div>
<div class="col-md-2 col-sm-2 nav navbar-right" style="margin-bottom: 15px;">
<span class="glyphicon glyphicon-resize-full" style="color:#008000;float:right;margin:5px 10px 0px 30px;font-size:19px;" id="btn btn-info btn-lg" data-toggle="modal" data-target="#Modaldetails" onclick="$('#datatable-PopupConstituencyList').css('max-width', '100%');"></span>
</div>
<div class="col-md-2 col-sm-2 nav navbar-right" style="margin-bottom: 15px;">
@Html.DropDownList("OperationddlYear10", Model.First().lstYear, new { @class = "form-control top-filter" })
</div>
</div>
<div class="x_content" id="">
<div class="row" id="details">
<table class="table table-bordered table-striped mb-none" id="datatable-pList">
<thead>
<tr>
<th style="text-align:left">C01</th>
<th style="text-align:left">C02</th>
<th style="text-align:right">C03</th>
<th style="text-align:left">C04</th>
</tr>
</thead>
<tbody>
@if (Model != null)
{
foreach (var item in Model)
{
<tr>
<td style="text-align:left">
@item.C01
</td>
<td style="max-width:200px;text-align:left">
<a href="#" style="text-decoration:underline;color:#008000;text-transform:uppercase;">
@item.C02
</a>
</td>
<td style="text-align:right">
@item.C03
</td>
<td style="text-align:left">
@item.C04
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-12"></div>
 
 
My Script
 
<script>
$('#OperationddlYear10').on('change', function () {
$(".DCDIYresult_year").text($('#OperationddlYear10 :selected').text());
var yr= $("#OperationddlYear10").val();
$.ajax({
type: "Post",
url: '@Url.Action("GetData", "Home")',
datatype: "Json",
data: { Year: yr, pval: 1 },
success: function (data) {
$('tbody').html(data);
}
});
});
</script>
 
 
My Controller
 
 
public JsonResult GetData(int Year=3, int pval=0)
{
try
{
BAL bal = new BAL();
List<Details> model = bal.GetData(Year, pval);
return Json( model , JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
Common.AddModel_Log4Net();
throw new Exception(ex.ToString());
}
}
Above is my code.Now i want to load the table values in ajax success function on year change
event but it is not working any one check and help me to resolve this issue .Thanks.

Brought to you by:

Answers (1)