C# function return value but not display value in grid ajax

Question

Hi, I want to show data in grid function is calling but not show in the grid. I debug the code I can see the id value when the cursor reaches the $.ajax then directly go to the end of brackets, I don't know what is a problem any expert can you tell where I am wrong.

 

 

C# Function

public JsonResult GetProduct_Detail(int id)
   {
       var resultProdD = _IProducts.GetProductByID(id);
       return Json(resultProdD,JsonRequestBehavior.AllowGet);
   }

 Master  Grid 

<div class="row">
                       <div class="col-md-12">
                           <div class="panel widget">
                               <div class="panel-heading">

                               </div>
                               <div class="panel-body-list  table-responsive">
                                   <table class="table table-striped table-hover no-head-border">
                                       <thead class="vd_bg-grey vd_white">
                                           <tr>
                                               <th>#</th>
                                               <th>Name</th>
                                               <th>Model</th>
                                               <th>Condition</th>
                                               <th>UnitPrice</th>
                                               <th>Mani Price</th>
                                               <th>Discount</th>
                                               <th>Weight</th>
                                               <th>Action</th>
                                           </tr>
                                       </thead>
                                       <tbody>
                                           @foreach (var item in Model)
                                           {
                                               <tr>
                                                   <td>@item.ProductID</td>

                                                   <td>@item.PName</td>

                                                   <td>@item.Model</td>

                                                   <td>@item.Condition</td>

                                                   <td>@item.ManificturedPrice</td>

                                                   <td>@item.Discount</td>

                                                   <td>@item.UnitWeight</td>

                                                   <td>@item.UnitInStock</td>

                                                   <td class="menu-action">
                                                    <a href="javascript:void(0);" class="btn menu-icon vd_bd-grey vd_grey" data-original-title="view" data-toggle="tooltip" data-placement="top" data-id="@item.ProductID"><i class="fa fa-eye"></i> </a>
                                                       <a href="~/Items/[email protected]" class=" anchorDetail btn menu-icon vd_bd-grey vd_grey" data-original-title="view" data-toggle="tooltip" data-placement="top" data-id=""><i class="fa fa-pencil"></i> </a>
                                                       <a href="javascript:void(0);" class="btn menu-icon vd_bd-grey vd_grey" data-original-title="view" data-toggle="tooltip" data-placement="top" data-id="@item.ProductID"><i class="fa fa-times"></i> </a>
                                                   </td>
                                               </tr>
                                           }

                                       </tbody>
                                   </table>
                               </div>
                           </div>

Jquery Function

 

<script type="text/javascript">
 $(document).ready(function () {
 debugger;
 var baseUrl = (window.location).href; // You can also use document.URL
 var id = baseUrl.substring(baseUrl.lastIndexOf('=') + 1);
 list_ProductDetail(id); //id=6 value show
 });
 function list_ProductDetail(id) //id=6 value show
 {
 $.ajax({ when curror reached this line then go end brakets
 url: "/Items/GetProduct_Detail",
 type: "GET",
 contentType: "application/json;charset=utf-8",
 dataType: "json",
 data: { id: id },
 success: function (result) {

 $('#PName').val(result.PName);
 $('#ManificturedPrice').val(result.ManificturedPrice);
 $('#UnitWeight').val(result.UnitWeight);

 $.each(result, function (key, item) {
 var html = '';
 html += '<tr>';
 html += '<td>' + item.ProductID + '</td';
 html += '<td>' + item.OS + '</td>';
 html += '<td>' + item.PrcessorType + '</td>';
 html += '<td>' + item.RAM + '</td>';
 html += '<td>' + item.ScreenSize + '</td>';
 html += '<td>' + item.TouchScreen + '</td>';
 html += '<td>' + item.BatteryLife + '</td>';
 html += '<td>' + item.Camera + '</td>';
 html += '<td>' + item.Model + '</td>';
 html += '<td>' + item.Condition + '</td>';
 html += '<td>' + item.Discount + '</td>';
 html += '<td><a class="menu-action rounded-btn btn menu-icon vd_bd-grey vd_grey" data-toggle="tooltip" href="#" onclick="return GetProductDetail(' + item.ProductID + ')"><i class="fa fa-pencil"></i></a> | <a href="#" onclick="Delete(' + item.ProductID + ')"><i class="fa fa-thrash"></i></a></td>';
 });
 $('.tbody').html(html);
 },
 error: function (errormessage) {
 alert(errormessage.responseText);
 },
 });
 }