0

我想创建一个自定义网格，它将具有三列，行可以是任何数量，具体取决于数据。但我的问题是数据以 json 格式提供。我已经多次创建了类似网格的结构，但这是使用模型和集合，例如：

首先为列创建 div

 @{
                if (Model.MessageList.Count > 0)
                {
                <div class="GridView_Div">
                    <div class="GridHeader_Div">
                        <div class="GridHeaderColoums_Div">Message</div>
                        <div class="GridHeaderColoums_Div">Sent Date</div>
                        <div class="GridHeaderColoums_Div">Receive Date</div>
                        <div class="GridHeaderColoums_Div">Actions</div>
                    </div>
                    <div class="GridData_Div">
                        @{
                    for (int i = 0; i < Model.MessageList.Count; i++)
                    {
                        string resultMessage = string.Empty;
                        string newMessage = string.Empty;
                        string result1 = Model.MessageList.ElementAt(i).Message;
                        int length = result1.Length;
                        if (length > 5)
                        {
                            resultMessage = result1.Substring(0, 5);
                            newMessage = resultMessage + "......";
                        }
                        else
                        {
                            resultMessage = result1.Substring(0);
                            newMessage = resultMessage + "......";
                        }
                            <div class="Grid_Row">
                                <div class="GridData_Coloums">
                                    <a href="#" onclick="ShowMessageDetail('@Model.MessageList.ElementAt(i).pkMessageId')" id="@Model.MessageList.ElementAt(i).pkMessageId">@newMessage</a>
                                </div>
                                <div class="GridData_Coloums">@Model.MessageList.ElementAt(i).Sent_Date</div>
                                <div class="GridData_Coloums">&nbsp; @Model.MessageList.ElementAt(i).Receive_Date</div>
                                <div class="GridData_Coloums">
                                    <input type="button"  value="Delete" id="@Model.MessageList.ElementAt(i).pkMessageId"/>
                                </div>
                            </div>
                    }
                        }
                    </div>
                </div>
                }
                else
                {
                <div style="width: 50%; float: left; margin-left: 10%;">No Message Found</div>
                }
            }

但是如何在 Json 数据中创建类似网格的结构呢？

请帮我处理这个案子。非常感谢

4

3 回答 3

1

这对我来说是一个挑战，我做到了。

在视图中

    $(document).ready(function () {
        $("#hdnPkClientId").val('');
        $("#txt_Autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/Home/SearchClientDetail",
                    data: "{'searchtext':'" + document.getElementById('txt_Autocomplete').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.Data, function (item) {

                            return {

                                label: item.Name,
                                value: item.id,
                                data: item
                            };
                        }));
                    },
                    error: function (xhr)
                    { }
                });
            },
            select: function (event, ui) {
                var detailArr = ui.item.label.split(',');
                $("#txt_Autocomplete").val(detailArr[0]);
                $("#hdnPkClientId").val(ui.item.data.Id);
                $("#Evaluation_Anch").attr("href", "/Evaluation/Index?Client_ID=" + ui.item.data.Id);
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/ClientHome/GetSelectedClientDetails",
                    data: "{'ClientId':'" + document.getElementById('hdnPkClientId').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        $("#Client_Name").html(data.Info.Name);
                        $("#Client_Address").html(data.Info.Address);
                        $("#Client_OtherAddressDetails").html(data.Info.OtherAddressDetails);
                        $("#Client_DOB").html(data.Info.DOB);
                        $("#Client_Phone").html(data.Info.Phone);
                        $("Client_MobilePhone").html(data.Info.Mobile_Phone);
                        var DataDiv = "<table width='100' border='0' cellspacing='0' cellpadding='0'> <tr> <th class='head'>Date</th> <th class='head'>Document Type</th> <th class='head'>Provider</th> </tr>";
                        for (var iRow = 0; iRow < data.Info.Prev_Doc_List.length; iRow++) {
                            var temp = data.Info.Prev_Doc_List[iRow];
                            DataDiv += "<tr>";
                            DataDiv += "<td>" + temp.Created_Date + "</td>";
                            DataDiv += "<td><a id='" + temp.Page_ID + "' href='" + temp.RedirectAddress + "'>" + temp.Doc_type + "</a></td>";
                            DataDiv += "<td>" + temp.Provider + "</td>";
                            DataDiv += "</tr>";
                        }
                        DataDiv += "</table>";
                        $("#PreviousDocumentDiv").html(DataDiv);
                    },
                    error: function (xhr)
                    { }
                });
                return false;
            }
        });
    });

在控制器中

   [HttpPost]
        public ActionResult GetSelectedClientDetails(string ClientId)
        {
            ProgressNotesService objService = new ProgressNotesService();
            var Client_Detail = objService.GetSelectedClient(Convert.ToInt32(ClientId));
            if (Client_Detail != null)
            {
                Session["Client_ID"] = Client_Detail.Id;
            }
            return Json(new { Info = Client_Detail });
        }

服务中

    public ClientDetailModel GetSelectedClient(int ClientID)
        {
            ClientDetailModel ClientDetail = new ClientDetailModel();
            List<PreviousDocuments> objDocsList = new List<PreviousDocuments>();
            using (DataContext DB = new DataContext())
            {
                var Row = DB.tbl.Where(m => m.ID == ClientID).FirstOrDefault();
                if (Row != null)
                {
                    ClientDetail.Id = Row.ID.ToString();
                    ClientDetail.Name = Row.First_Name + " " + Row.Last_Name;
                    ClientDetail.Address = Row.Address;
                    ClientDetail.Client_DOB = (DateTime)Row.DOB;
                    ClientDetail.DOB = ClientDetail.Client_DOB.ToString("MM/dd/yyyy");
                    ClientDetail.OtherAddressDetails = (Row.City == "" || Row.City == null ? "N/A" + " " + "," : Row.City + " ,") + (Row.State == "" || Row.State == null ? "N/A" + " " + "," : Row.State + " ,") + (Row.ZipCode == "" || Row.ZipCode == null ? "N/A" : Row.ZipCode);
                    ClientDetail.Phone = Row.Phone;
                    ClientDetail.Mobile_Phone = Row.OtherContact_Phone;
                    var ProgressNoteRecords = DB.ProgressNotes.Where(m => m.FkReferralID == ClientID).ToList();
                    if (ProgressNoteRecords.Count() > 0)
                    {
                        for (int iRow = 0; iRow < ProgressNoteRecords.Count(); iRow++)
                        {
                            objDocsList.Add(new PreviousDocuments
                            {
                                Created_Date = Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Created_Date),
                                Doc_type = "Progress Note",
                                Provider = " blah blah",
                                Page_ID = Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Id),
                                RedirectAddress = "../ProgressNote/Add?ProgressNote_ID=" + Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Id)

                            });
                        }
                    }
                    var Ref = DB.tblrefServices.Where(m => m.ID == ClientID).ToList();
                    if (Ref.Count > 0)
                    {
                        for (int iRow = 0; iRow < Ref.Count(); iRow++)
                        {
                            objDocsList.Add(new PreviousDocuments
                            {
                                Created_Date = Convert.ToString(Ref.ElementAt(iRow).First_Name),
                                Doc_type = "Referral Service",
                                Provider = "blah blah",
                                Page_ID = Convert.ToString(Ref.ElementAt(iRow).ID)
                            });
                        }
                    }
                    ClientDetail.Prev_Doc_List = objDocsList;
                }

            }
            return ClientDetail;

        }

在模型中

public class ClientDetailModel
    {
        public ClientDetailModel()
        {
            Prev_Doc_List = new List<PreviousDocuments>();
        }
        public string Name { get; set; }
        public string Id { get; set; }
        public string DOB { get; set; }
        public string Address { get; set; }
        public string OtherAddressDetails { get; set; }
        public string Phone { get; set; }
        public string Mobile_Phone { get; set; }
        public DateTime Client_DOB { get; set; }
        public List<PreviousDocuments> Prev_Doc_List { get; set; }

    }
    public class PreviousDocuments
    {
        public string Created_Date { get; set; }
        public string Doc_type { get; set; }
        public string Provider { get; set; }
        public string Page_ID { get; set; }
        public string RedirectAddress { get; set; }
    }
于 2013-10-15T04:30:14.157 回答
0

如何使用任何模板引擎，如 jsrender。您可以在其中将提供的 mvc 的视图代码转换为模板。然后将 json 传递给将在所需元素中呈现网格的模板。

有关更多详细信息，请参阅以下链接

http://borismoore.github.io/jsrender/demos/demos.html

http://www.jsviews.com/#jsrender

于 2013-10-15T05:15:54.227 回答
0

您可以使用 KnockoutJS 将您的 json 数据绑定到您的自定义网格

于 2013-10-14T15:38:02.933 回答