顯示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

你需要給該對象的模板來呈現數據作爲兩列的表/ DIV等

可以定義一個模板函數是這樣的：

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');  
    },