Post
Ask Question
zeeshan akram

zeeshan akram

  • 1.4k
  • 325
  • 18.4k

Function return JSON value but not display in Grid

Mar 25 2020 5:14 AM
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.
Any Expert can you tell me How I display this JSON format data in grid and Input Field if you feel any mistake kindly me How to resolve this issue.
**JSON Result:**
  1. {  
  2. "listProducts": {  
  3. "Customers": [],  
  4. "P_Color": {  
  5. "Products": [],  
  6. "C_ID": 3,  
  7. "C_Name_OR_Code": "Green "  
  8. },  
  9. "P_Size": {  
  10. "Products": [],  
  11. "S_ID": 2,  
  12. "S_Size": "MediumNa "  
  13. },  
  14. "ProductDetail": {  
  15. "ProductID": 6,  
  16. "PDescription": "s",  
  17. "Model": "s ",  
  18. "Condition": "s ",  
  19. "OS": "s",  
  20. "DualSim": "s ",  
  21. "TouchScreen": "ss ",  
  22. "ScreenSize": "s ",  
  23. "ProcessorType": "s ",  
  24. "Camera": "s ",  
  25. "RAM": "s ",  
  26. "InternalMemory": "s ",  
  27. "Wifi": "s ",  
  28. "BatteryLife": "s ",  
  29. "Discount": 54.0,  
  30. "Other": "s",  
  31. "ImageUrl": "~/upload/20095729TERI NAZAR Song LYRICS.jpg"  
  32. },  
  33. "ProductType": {  
  34. "Products": [],  
  35. "PType_ID": 1,  
  36. "P_Name": "mobile ",  
  37. "P_Description": "mobile",  
  38. "Active": false  
  39. },  
  40. "ProductID": 6,  
  41. "PName": "s ",  
  42. "UnitWeight": 0.0,  
  43. "UnitInStock": 4.0,  
  44. "P_SizeID": 2,  
  45. "P_Color_ID": 3,  
  46. "PType_ID": 1,  
  47. "ManificturedPrice": 52.0  
  48. },  
  49. "listProductDetails": [  
  50. {  
  51. "Product": {  
  52. "Customers": [],  
  53. "P_Color": {  
  54. "Products": [],  
  55. "C_ID": 3,  
  56. "C_Name_OR_Code": "Green "  
  57. },  
  58. "P_Size": {  
  59. "Products": [],  
  60. "S_ID": 2,  
  61. "S_Size": "MediumNa "  
  62. },  
  63. "ProductType": {  
  64. "Products": [],  
  65. "PType_ID": 1,  
  66. "P_Name": "mobile ",  
  67. "P_Description": "mobile",  
  68. "Active": false  
  69. },  
  70. "ProductID": 6,  
  71. "PName": "s ",  
  72. "UnitWeight": 0.0,  
  73. "UnitInStock": 4.0,  
  74. "P_SizeID": 2,  
  75. "P_Color_ID": 3,  
  76. "PType_ID": 1,  
  77. "ManificturedPrice": 52.0  
  78. },  
  79. "ProductID": 6,  
  80. "PDescription": "s",  
  81. "Model": "s ",  
  82. "Condition": "s ",  
  83. "OS": "s",  
  84. "DualSim": "s ",  
  85. "TouchScreen": "ss ",  
  86. "ScreenSize": "s ",  
  87. "ProcessorType": "s ",  
  88. "Camera": "s ",  
  89. "RAM": "s ",  
  90. "InternalMemory": "s ",  
  91. "Wifi": "s ",  
  92. "BatteryLife": "s ",  
  93. "Discount": 54.0,  
  94. "Other": "s",  
  95. "ImageUrl": "~/upload/20095729TERI NAZAR Song LYRICS.jpg"  
  96. }  
  97. ],  
  98. }  
**Get Product Function to fetch for one Value** //JSON format already share above
 
  1. public ActionResult GetProduct_Detail(int id)  
  2. {  
  3. var resultProdD = _IProducts.GetProductByID(id);  
  4. JsonSerializerSettings jss = new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore };  
  5. var result = JsonConvert.SerializeObject(resultProdD, Formatting.Indented, jss);  
  6. return Json(result, JsonRequestBehavior.AllowGet);  
  7. }  
**HTML View**
  1. <div class="vd_content-section clearfix" id="ecommerce-product-add">  
  2. <div class="row">  
  3. <div class="col-md-12">  
  4. <div class="panel widget">  
  5. <div class="panel-body">  
  6. <form class="form-horizontal" action="#" role="form">  
  7. <div class="panel-heading vd_bg-green">  
  8. <h3 class="panel-title vd_white"> <span class="menu-icon"> <i class="fa fa-bar-chart-o"></i> </span> Products Product Detail</h3>  
  9. </div>  
  10. <br />  
  11. <div class="row">  
  12. <div class="col-md-4">  
  13. <label class="col-xs-3 control-label">Name</label>  
  14. <div class="controls col-xs-9">  
  15. <input type="text" class="input-border-btm" id="PName" />  
  16. </div>  
  17. </div>  
  18. <div class="col-md-4">  
  19. <label class="col-xs-3 control-label">Price</label>  
  20. <div class="control-label col-xs-9">  
  21. <input type="text" class="input-border-btm" id="ManificturedPrice" />  
  22. </div>  
  23. </div>  
  24. <div class="col-md-4">  
  25. <label class="col-xs-3 control-label">Weight</label>  
  26. <div class="control-label col-xs-9">  
  27. <input type="text" class="input-border-btm" id="UnitWeight" />  
  28. </div>  
  29. </div>  
  30. </div>  
  31. <div class="row">  
  32. <div class="col-md-12">  
  33. <div class="panel widget">  
  34. <div class="panel-heading vd_bg-green">  
  35. <h3 class="panel-title vd_white"> <span class="menu-icon"> <i class="fa fa-bar-chart-o"></i> </span> Products Details </h3>  
  36. </div>  
  37. <table id="ProdDetaillIist" class=" panel-body table table-striped table-hover table-responsive">  
  38. <thead>  
  39. <tr>  
  40. <th>#</th>  
  41. <th>OS</th>  
  42. <th>Model</th>  
  43. <th>Screen Size</th>  
  44. <th>Process Type</th>  
  45. <th>Bettry Life</th>  
  46. <th>Camera</th>  
  47. <th>Model</th>  
  48. <th>Condition</th>  
  49. <th>Discount</th>  
  50. <th>Action</th>  
  51. </tr>  
  52. </thead>  
  53. <tbody class="tbody"></tbody>  
  54. </table>  
  55. </div>  
  56. <!-- Panel Widget -->  
  57. </div>  
  58. <!-- col-md-12 -->  
  59. </div>  
  60. <div class="modal fade right" id="product_Detail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"  
  61. aria-hidden="true" data-backdrop="false">  
  62. <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">  
  63. <div class="modal-content">  
  64. <div class="modal-lg">  
  65. <div class="modal-body">  
  66. <div class="row">  
  67. <div class="col-md-12">  
  68. <div class="panel widget">  
  69. <div class="panel-body">  
  70. <div class="panel-heading vd_bg-green">  
  71. <h3 class="panel-title vd_white"> <span class="menu-icon"> <i class="fa fa-bar-chart-o"></i> </span> Products Detail</h3>  
  72. </div>  
  73. <br />  
  74. @*<div class="row">  
  75. <div class="col-md-4">  
  76. <div class="controls col-md-6">  
  77. <label class="control-label">Picture</label>  
  78. <img src="" alt="Not Found" height="70" width="70" />  
  79. </div>  
  80. </div>  
  81. <div class="col-md-6">  
  82. <i class="glyphicon glyphicon-plus"></i> <span>Add files...</span>  
  83. <input type="file" name="file" required="required" multiple id="file" />  
  84. </div>  
  85. </div>*@  
  86. <div class="row">  
  87. <div class="col-md-12">  
  88. <label class="control-label">Product ID</label>  
  89. <div class="controls col-xs-6">  
  90. <input type="text" class="input-border-btm" id="ProductID" />  
  91. </div>  
  92. </div>  
  93. </div>  
  94. <div class="row">  
  95. <div class="col-lg-12">  
  96. <label class="control-label">Description</label>  
  97. <div class="controls col-xs-12">  
  98. <input type="text" class="input-border-btm" id="PDescription" />  
  99. </div>  
  100. </div>  
  101. </div>  
  102. <div class="row">  
  103. <div class="col-md-6">  
  104. <label class="col-xs-3 control-label">Model</label>  
  105. <div class="controls col-xs-9">  
  106. <input type="text" class="input-border-btm" id="Model" />  
  107. </div>  
  108. </div>  
  109. <div class="col-md-6">  
  110. <label class="col-xs-3 control-label">OS</label>  
  111. <div class="controls col-xs-9">  
  112. <input type="text" class="input-border-btm" id="OS" />  
  113. </div>  
  114. </div>  
  115. </div>  
  116. <div class="row">  
  117. <div class="col-md-6">  
  118. <label class="col-xs-3 control-label">DualSim</label>  
  119. <div class="controls col-xs-9">  
  120. <input type="text" class="input-border-btm" id="DualSim" />  
  121. </div>  
  122. </div>  
  123. <div class="col-md-6">  
  124. <label class="col-xs-3 control-label">TouchScreen</label>  
  125. <div class="control-label col-xs-9">  
  126. <input type="text" class="input-border-btm" id="TouchScreen" />  
  127. </div>  
  128. </div>  
  129. </div>  
  130. <div class="row">  
  131. <div class="col-md-6">  
  132. <label class="col-xs-3 control-label">ScreenSize</label>  
  133. <div class="control-label col-xs-9">  
  134. <input type="text" class="input-border-btm" id="ScreenSize" />  
  135. </div>  
  136. </div>  
  137. <div class="col-md-6">  
  138. <label class="col-xs-3 control-label">PrcessorType</label>  
  139. <input type="text" class="input-border-btm" id="PrcessorType" />  
  140. </div>  
  141. </div>  
  142. </div>  
  143. <div class="row">  
  144. <div class="col-md-6">  
  145. <label class="col-xs-3 control-label">Camera</label>  
  146. <div class="control-label col-xs-9">  
  147. <input type="text" class="input-border-btm" id="Camera" />  
  148. </div>  
  149. </div>  
  150. <div class="col-md-6">  
  151. <label class="col-xs-3 control-label">RAM</label>  
  152. <div class="control-label col-xs-9">  
  153. <input type="text" class="input-border-btm" id="RAM" />  
  154. </div>  
  155. </div>  
  156. </div>  
  157. <div class="modal-footer">  
  158. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>  
  159. <input type="submit" value="Save Changes" class="btn vd_btn vd_bg-blue btn-icon btn-sm save-btn fa fa-save" id="btnSave" />  
  160. <input type="submit" value="Update Changes" class="btn vd_btn vd_bg-blue btn-icon btn-sm save-btn fa fa-save" id="btnUpdate" />  
  161. </div>  
  162. </div>  
  163. </div>  
  164. <!-- Panel Widget -->  
  165. </div>  
  166. <!-- col-md-12 -->  
  167. </div>  
  168. </div>  
  169. </div>  
  170. </div>  
  171. </div>  
  172. </form>  
  173. <!-- Modal -->  
  174. </div>  
  175. </div>  
  176. </div>  
  177. <!-- Panel Widget -->  
  178. </div>  
  179. <!-- col-md-12 -->  
  180. </div>  
**Jquery Function**
  1. <script type="text/javascript">  
  2. $(document).ready(function () {  
  3. debugger;  
  4. var baseUrl = (window.location).href; // You can also use document.URL  
  5. var id = baseUrl.substring(baseUrl.lastIndexOf('=') + 1);  
  6. list_ProductDetail(id);  
  7. });  
  8. function list_ProductDetail(id)  
  9. {  
  10. $.ajax({  
  11. url: "/Items/GetProduct_Detail",  
  12. type: "GET",  
  13. contentType: "application/json;charset=utf-8",  
  14. dataType: "json",  
  15. data: { id: id },  
  16. success: function (result) {  
  17. $('#PName').val(result.PName);  
  18. $('#ManificturedPrice').val(result.ManificturedPrice);  
  19. $('#UnitWeight').val(result.UnitWeight);  
  20. $.each(result, function (key, item) {  
  21. var html = '';  
  22. html += '<tr>';  
  23. html += '<td>' + item.ProductID + '</td';  
  24. html += '<td>' + item.OS + '</td>';  
  25. html += '<td>' + item.PrcessorType + '</td>';  
  26. html += '<td>' + item.RAM + '</td>';  
  27. html += '<td>' + item.ScreenSize + '</td>';  
  28. html += '<td>' + item.TouchScreen + '</td>';  
  29. html += '<td>' + item.BatteryLife + '</td>';  
  30. html += '<td>' + item.Camera + '</td>';  
  31. html += '<td>' + item.Model + '</td>';  
  32. html += '<td>' + item.Condition + '</td>';  
  33. html += '<td>' + item.Discount + '</td>';  
  34. 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>';  
  35. });  
  36. $('tbody').append(html);  
  37. },  
  38. error: function (errormessage) {  
  39. alert(errormessage.responseText);  
  40. },  
  41. });  
  42. }  
  43. </script>  

Answers (1)