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和bootstrap弹出代码是：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望显示我的json对象返回2列，即Key和Value，并尝试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');      
    },

在返回ActionResult的弹出窗口中显示json

1 个答案: