Cant able to load the table in ajax success function mvc

Question

Hi all i cant able to load the table values in ajax success function. I tried to load the values of the table in ajax success function.But it not loading the values properly

 

My Controller

public JsonResult GetData(int ID=3, int PID=1001)

{

try

{

List<Details> grplist= new List<Details>();

var Par = new Parameters();

par.Add("ID",ID);

par.Add("PID",PID);

var grptable = StroredProc..GetDataTable(spGetDetails",par);

for(int i=0;i<grptable .Rows.Count;i++)

{

DetailModel grp= new DetailModel();

grp.name = grptable.Rows[i]["name"];

grp.Relation= grptable.Rows[i]["Relation"];

grplist.Add(grp);

}

return Json( grplist, JsonRequestBehavior.AllowGet);

}

catch (Exception ex)

{

Common.AddModel_Log4Net();

throw new Exception(ex.ToString());

}

}

 

 

My View

<div class="row" id="details">

<table class="table table-bordered table-striped mb-none" id="datatable-pList">

<thead>

<tr>

<th style="text-align:left">Name</th>

<th style="text-align:left">Relation</th>

</tr>

</thead>

<tbody id ="prebody">

@if (Model != null)

{

foreach (var item in Model)

{

<tr>

<td style="text-align:left">

@item.name

</td>

<td style="text-align:right">

@item.Relation

</td>

</tr>

}

}

</tbody>

</table>

</div>

 

 

My Script

<script>

$('#OperationddlYear10').on('change', function () {

$.ajax({

type: "GET",

url: '@Url.Action("GetData", "Home")',

datatype: "Json",

data: { ID: 3, PID: 1001 },

success: function (data) {

for(i=0;i<data.length;i++)

{

$('prebody').html( $('prebody').html() + '<td>'+data[i].name+'</td>' +

'<td>'+data[i].Relation+'</td>');

}

}

});

});

</script>

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.