none
MVC中的控件 RRS feed

  • 问题

  • 各位,

            我想知道MVC中有没有类似gridview的控件,可以很简单的填充数据的。最好有一些代码例子。

    谢谢。

    2016年11月11日 0:53

答案

  • 你好,

    据我所知,MVC并没有内置类型gridview的空间。

    你可以从Nuget管理程序中下载一个叫MvcWebGrid的插件。

    然后可以使用这个插件实现展示数据。

    具体你可以参照如下代码:

    控制器代码:

     public class WebgridSampleController : Controller
        {
            // GET: WebgridSample
            public ActionResult Index()
            {
                return View();
            }
    
            public class Product
            {
                public string Id { get; set; }
                public string Name { get; set; }
                public string Description { get; set; }
                public long Quantity { get; set; }
            }
    
            public ActionResult WebgridSample()
            {
                ObservableCollection<Product> inventoryList =
                    new ObservableCollection<Product>();
                inventoryList.Add(new Product
                {
                    Id = "P101",
                    Name = "电脑",
                    Description = "电脑电脑",
                    Quantity = 800
                });
                inventoryList.Add(new Product
                {
                    Id = "P102",
                    Name = "笔记本电脑",
                    Description = "All models of Laptops",
                    Quantity = 500
                });
                inventoryList.Add(new Product
                {
                    Id = "P103",
                    Name = "照相机",
                    Description = "照相机照相机",
                    Quantity = 300
                });
                inventoryList.Add(new Product
                {
                    Id = "P104",
                    Name = "手机",
                    Description = "手机手机",
                    Quantity = 450
                });
                inventoryList.Add(new Product
                {
                    Id = "P105",
                    Name = "平板电脑",
                    Description = "平板电脑平板电脑",
                    Quantity = 670
                });
                inventoryList.Add(new Product
                {
                    Id = "P106",
                    Name = "硬盘",
                    Description = "硬盘硬盘",
                    Quantity = 1200
                });
                inventoryList.Add(new Product
                {
                    Id = "P107",
                    Name = "内存",
                    Description = "内存内存",
                    Quantity = 370
                });
                return View(inventoryList);
            }
        }

    视图代码:

    @{
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
        selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);}
    
     
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>WebgridSample</title>
        <style type="text/css">
            .webGrid {
                margin: 4px;
                border-collapse: collapse;
                width: 500px;
                background-color: #B4CFC3;
            }
    
            .header {
                background-color: #C1D4E6;
                font-weight: bold;
                color: #FFF;
            }
    
            .webGrid th, .webGrid td {
                border: 1px solid #C0C0C0;
                padding: 5px;
            }
    
            .alt {
                background-color: #E4E9F5;
                color: #000;
            }
    
            .gridHead a:hover {
                text-decoration: underline;
            }
    
            .description {
                width: auto;
            }
    
            .select {
                background-color: #71857C;
            }
        </style> 
    </head>
    <body>
        <div id="gridContent">
            @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                columns: grid.Columns(
                grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),
                grid.Column("Name", " Name"),
                grid.Column("Description", "Description", style: "description"),
                grid.Column("Quantity", "Quantity")
         ))
        </div>
    </body>
    </html>

    结果:


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已建议为答案 Angie Xu 2016年11月12日 7:50
    • 已标记为答案 Anne_Wx 2016年11月14日 2:34
    2016年11月11日 7:33