Asp.net Mvc5 中的主从网格

• 下载 1.zip - 8.1 MB

引言

这个例子让我们探索 jQuery 的强大功能，它可以从服务器端检索数据到客户端。此外，我们将研究 JsonResult 类，它允许我们将对象序列化为 Json 响应。

背景

在学习本主题之前，回顾以下内容非常重要：

JsonResult：将给定的对象序列化为 JSON，并将 JSON 写入响应，通常是为了响应 Ajax 请求。

JsonResult 使用 JavaScriptSerializer 类将其内容（通过 Data 属性指定）序列化为 JSON（JavaScript 对象表示法）格式。 这对于需要操作方法以 JavaScript 易于使用的格式返回数据的 Ajax 场景非常有用。
至于 ContentResult，JsonResult 的内容编码和内容类型都可以通过属性设置。 唯一的区别是，对于此结果，默认 ContentType 是 application/json 而不是 text/html。

jQuery 在 Web 开发领域已变得至关重要，因为 jQuery 具有将许多行普通 JavaScript 代码减少到几行的已验证能力。

使用代码

此代码演示了如何从 Controller 检索数据，该 Controller 公开了一个显示 Json 响应的方法，供 Ajax 请求 使用。

步骤 1

创建一个名为 Company 的类，包含以下字段：

namespace NestedGridFromJson.Models
{
    public class Company
    {
        public string name { get; set; }
        public string bio { get; set; }
        public string headquarter { get; set; }
        public string[] details { get; set; }
    }
}

第二步

创建一个名为 HomeController 的 controller，包含两个方法：

• GetCompaniesData：检索来自 GetCompanies 方法的公司列表，并将其转换为 Json 响应。
• GetCompanies：返回一个公司列表。

public JsonResult GetCompaniesData()
        {
            var users = GetCompanies();
            return Json(GetCompanies(), JsonRequestBehavior.AllowGet);
        }

        private List<Company> GetCompanies() {
            var companiesList = new List<Company>
            {
                new Company { name ="Walmart", bio ="Retailer", headquarter="Bentonville, Arkansas",
                details =  new string[] { "Number of WallMart employees : 2.2 million", "Population of Slovenia :  2.1 million", "Annual Revenue : $486 billion (2015)" }
                },
                new Company { name ="Apple", bio ="Tech Company", headquarter="Cupertino, California",
                details =  new string[] { "Apple's economic output (2014): $87 billion", "Oman's annual GDP (2014): $82 billion", "Annual Revenue : $234 billion (2015)" }
                },
                new Company { name ="Microsoft", bio ="Tech Company", headquarter="RedMond, Washington",
                details =  new string[] { "Annual Revenue: $94 billion (2015)", "Microsoft Office: 1.2 billion users", "107 Language spoken" }
                }
            };

            return companiesList;
        }

步骤 3

创建一个文件 main.js，它将负责向 GetCompaniesData 方法发出请求，以检索 Json 格式的数据。

此文件分为两种方法：

• initOpenAndCloseDetails：负责控制打开和关闭详细信息 div 的事件。
• initGetData：负责为 btnGetData 按钮在 click 事件中提供功能。 基本上，当用户单击此按钮时，它将向 Controller HomeController 发出 Ajax 请求以检索数据，然后，检索到的每个记录将用于创建具有 Master 和 Detail 信息的新行。

function initOpenAndCloseDetails() {
    $('#grid1 div').click(function () {
        if ($(this).attr('class') == 'collapsed') {
            $(this).attr('class', 'expanded');
            var ul = $(this).parent().parent().closest('tr').next('tr').find('.details-opened').removeClass('details-opened');
            $(ul).addClass('details-closed');

        } else {
            $(this).attr('class', 'collapsed');
            var ul = $(this).parent().parent().closest('tr').next('tr').find('.details-closed').removeClass('details-closed');
            $(ul).addClass('details-opened');
        }
    });
}

 

function initGetData() {
    
    $('#btnGetData').click(function () {
        $("#grid1").find("tr:gt(0)").remove();
        var request = new XMLHttpRequest();
        request.open('GET', '../home/GetCompaniesData', true);
        request.onload = function () {
            if (request.status == 200) {
                var myStuff = JSON.parse(request.responseText);
                console.log(myStuff);
                var i=0;
                var grid1 = $('#grid1');

                while (i <= myStuff.length - 1) {
                    var obj = myStuff[i];
                    var addresslist = '';
                    var li = ''

                    var j = 0;
                    while (j <= obj.details.length - 1) {
                        li = li + "<li>" + obj.details[j] + "</li>";
                        j++;
                    }
                    addresslist = "<tr><td colspan=4><ul class='details-closed'>" + li + "</ul></td></tr>";
                    grid1.append('<tr><td><div class=expanded id=' + i + '></div></td><td>' + obj.name + '</td><td>' + obj.bio + '</td><td>' + obj.headquarters + '</td></tr>' + addresslist);
                    i++;
                }
                initOpenAndCloseDetails();
            }
        }

        request.send();
    });
}

initGetData();

您会发现这种检索数据的方式非常有用，不仅可以在表中显示主从数据，还可以在任何 Html 对象中显示数据，例如：列表、下拉列表、复选框等。

结论

将 Jquery 发起异步请求到服务器的功能与 JsonResult 类将对象序列化为 Json 响应的能力相结合，为我们在 Controller 中设计高效方法提供了极大的灵活性。

请下载上面的代码，如果对此有任何疑问，请告诉我，我将感谢您的评论！

历史

第一个版本