дисплей JSON во всплывающем окне возвращение ActionResult

Question

У меня есть пользовательский контроллер в MVC и ActionResult является:

[HttpPost] 
    public ActionResult Details([DataSourceRequest]DataSourceRequest command, int id) 
    { 
     //var userDetail = _CustomerDetail.GetAllCustomers(); 
     var genericDetail = _GenericDetail.Table.Where(x => x.EntityId == id).Select(z => new { z.Key, z.Value }).ToList().AsQueryable(); 
     //var userData = from ud in userDetail 
     //    join gd in genericDetail 
     //    on ud.Id equals gd.EntityId 
     //    select new { gd.Key, gd.Value }; 
     DataSourceResult result = genericDetail.ToDataSourceResult(command); 

     return Json(result, JsonRequestBehavior.AllowGet); 


    } 

который возвращается объект, как это:
{"Data":[{"Key":"Gender","Value":"F"},{"Key":"FirstName","Value":"h"},{"Key":"LastName","Value":"h"},{"Key":"DateOfBirth","Value":"1914-05-03"}],"Total":4,"AggregateResults":null,"Errors":null}

и моего AJAX и бутстраповских всплывающих коды являются:

$.ajax({ 
 
      type: "POST", 
 
      url: "/UserDetails/Details", 
 
      data: { id: dataItem.Id }, 
 
      success: function (result) { 
 
       $('#dvDetail').html(result); 
 
       $('#myModal').modal('show'); 
 
       
 
     }, 
 
     error:function(){ 
 
      alert('fail'); 
 
     } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
       <h4 class="modal-title" id="myModalLabel">User Detail</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <div id="dvDetail"></div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Я хочу отобразить мой объект json, возвращающийся в 2 столбца, которые являются ключевыми и значениями, и попробуйте множество решений от stackoverflow, но не удался.
Может ли кто-нибудь мне помочь?

Answer 1

Вы должны дать этому объекту шаблон для визуализации данных в виде таблицы два столбца/делах и т.д.

Вы можете определить функцию шаблона:

userDetailTemplate = function(data){ 
    var renderRow = function(val){ 
    return "<tr>" + val + "</tr>"; 
    } 
    var renderCol = function(val){ 
    return "<td>" + val + "</td>"; 
    } 
    var renderContent = function(val){ 
    return "<table>" + content + "</table>"; 
    } 
    var content = []; 

    for(i=0; i<data.length; i++){ 
    var key = renderCol(data[i].Key); 
    var val = renderCol(data[i].Value); 
    content.push(renderRow(key+val)); 
    } 
    return renderContent(content.join('')); 
} 

В обратном вызове Ajax , вам нужно вызвать эту функцию шаблона.

success: function (result) { 
     $('#dvDetail').html(userDetailTemplate(result.Data)); // or this should be result. You need to try either of these. 
     $('#myModal').modal('show');  
    },