WebGrid 在asp.net mvc中的使用和理解(译)

WebGrid 在asp.net mvc中的使用和理解(译)1:思路webgrid就是表格,一行行记录,代表一个个模型,因此,我们只需要在models文件夹建立模型,在控制器生成模型列表,把列表作为模型传入视图(或者绑定强类型视图,这个类型至少大于等于此模型列

大家好,又见面了,我是你们的朋友全栈君。

<span role="heading" aria-level="2">WebGrid 在asp.net mvc中的使用和理解(译)1:思路

webgrid就是表格,一行行记录,代表一个个模型,因此,我们只需要在models文件夹建立模型,在控制器生成模型列表,把列表作为模型传入视图(或者绑定强类型视图,这个类型至少大于等于此模型列表),然后通过GetHtml(Model,propetiesList)即可. 非常简单.

下面对webgrid的一些属性和方法进行介绍(这在设置表格的行列字段属性分页排序等特别适用)

AjaxUpdateCallback:异步操作完成后的回调函数

AjaxUpdateContainerId:更新所包括的元素

CanSort:是否支持排序

ColumnNames:列的名称列表,类似数据库字段列表,通常我们使用List<string>类型

HasSelection:判定行的选中

IsAjaxEnabled Returns a value that indicates whether the WebGrid instance can use Ajax calls to refresh the display

类似还有行数,默认选中,分页,每页多少行等等属性,具体参考msdn即可.

 请参考原文,感谢作者.

通过和原文比较,我觉得我的做法也许更好(原文使用的是弱类型视图,然后在视图中去new 模型或模型列表对象)

我是使用强类型视图,action可以直接传过来,viewbag也可以传过来,视图中也可以new

cshtml文件如下:

@{     Layout = null; }

<!DOCTYPE html>

<html> <head>     <title>WebgridSample</title>     <script src=”../../Scripts/jquery-1.7.1.min.js” type=”text/javascript”></script>     <style type=”text/css”>         .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#FCFCFC;}         .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: #389DF5}     </style> </head> <body> @{     WebGridSampleApplication.Models.Product product = new WebGridSampleApplication.Models.Product(); }

 @{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: “selectedRow”,ajaxUpdateContainerId: “gridContent”);
        grid.Pager(WebGridPagerModes.NextPrevious);}
        <div id=”gridContent”>
        @grid.GetHtml(tableStyle: “webGrid”,
                headerStyle: “header”,
                alternatingRowStyle: “alt”,
                selectedRowStyle: “select”,
                columns: grid.Columns(
                grid.Column(“Id”, format: (i) => i.GetSelectLink(i.Id)),
                         grid.Column(“Name”, ” Name”, (i) => i.GetSelectLink(i.Name)),
                grid.Column(“Description”, “Description”, style: “description”),
                grid.Column(“Quantity”, “Quantity”)
                  ))

 @if (grid.HasSelection)          {              product = (WebGridSampleApplication.Models.Product)grid.Rows[grid.SelectedIndex].Value;              <b>Id</b> @product.Id<br />              <b>Name</b>  @product.Name<br />              <b>Description</b> @product.Description<br />              <b>Quantity</b> @product.Quantity<br />          }     </div>     </body> </html>

 

模型文件如下:

using System; using System.Collections.Generic; using System.Linq; using System.Web;

namespace WebGridSampleApplication.Models {     public class Product     {         public string Id { get; set; }         public string Name { get; set; }         public string Description { get; set; }         public long Quantity { get; set; }     } }

 

控制器文件如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Collections.ObjectModel;
using WebGridSampleApplication.Models;

namespace WebGridSampleApplication.Controllers {     public class InventoryController : Controller     {         public ActionResult WebgridSample()         {

            ObservableCollection<Product> inventoryList = new ObservableCollection<Product>();             inventoryList.Add(new Product { Id = “P101”, Name = “Computer”, Description = “All type of computers”, Quantity = 800 });             inventoryList.Add(new Product { Id = “P102”, Name = “Laptop”, Description = “All models of Laptops”, Quantity = 500 });             inventoryList.Add(new Product { Id = “P103”, Name = “Camera”, Description = “Hd  cameras”, Quantity = 300 });

 inventoryList.Add(new Product { Id = “P104”, Name = “Mobile”, Description = “All Smartphones”, Quantity = 450 });
            inventoryList.Add(new Product { Id = “P105”, Name = “Notepad”, Description = “All branded of notepads”, Quantity = 670 });
            inventoryList.Add(new Product { Id = “P106”, Name = “Harddisk”, Description = “All type of Harddisk”, Quantity = 1200 });
            inventoryList.Add(new Product { Id = “P107”, Name = “PenDrive”, Description = “All type of Pendrive”, Quantity = 370 });
            return View(inventoryList);
        }
    }
}

hope this would help you

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155488.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SpringBoot文件上传下载和多文件上传(图文详解)

    SpringBoot文件上传下载和多文件上传(图文详解)最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的java代码:1、开发环境:IDEA15+Maven+JDK1.82、新建一个maven工程:3、工程框架4、pom.xml文件依赖项

    2022年6月12日
  • AbstractQueuedSynchronizer浅析「建议收藏」

    AbstractQueuedSynchronizer浅析「建议收藏」文章目录简介如何实现自定义同步器实现分析1.publicfinalvoidacquire(intarg)该方法以排他的方式获取锁,对中断不敏感,完成synchronized语义。简介这是一个抽象类,提供了一个FIFO(先进先出的队列),可以用来构建锁或者其他同步装置的基础框架。该同步器利用intstate来表示一个状态。子类通过继续该抽象类并实现他的方法来管理其状态,管理方式是通过acquire(intarg)方法release(intarg)方法来操作状态。多线程环境中对状

  • f1 score计算_F1值

    f1 score计算_F1值F1分数(F1Score),是统计学中用来衡量二分类模型精确度的一种指标。它同时兼顾了分类模型的精确率和召回率。F1分数可以看作是模型精确率和召回率的一种加权平均,它的最大值是1,最小值是0。1.TP、TN、FP、FN解释说明真实情况 预测结果 正例 反例 正例 TP(真正例) FN(假反例) 反例 FP(假正例) TN(真反例) 行表示预测的label值,列表示真实label值 TP:TruePositive,被判定为正样本,事实上也是

  • 公网RTSP视频流「建议收藏」

    公网RTSP视频流「建议收藏」公网RTSP视频流测试地址:rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

    2022年10月18日
  • Postman使用详解

    一、Postman背景介绍用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网页基本信息,它还可以发送几乎所有类型的HTTP请求!Postman在发送网络HTTP请求方面可以说是Chrome插件类产品中的代…

  • 空间矢量脉冲宽度调制(SVPWM)Simulink仿真教程

    空间矢量脉冲宽度调制(SVPWM)Simulink仿真教程目录SVPWM仿真主体结构扇区选择模块XYZ计算模块矢量作用模块切换时间判断模块三角波模块开关信号模块输出信号模块输出结果SVPWM参考文献​SVPWM仿真主体结构扇区选择模块原理基于原理搭建基于原理的s函数扇区输出结果XYZ计算模块原理基于原理搭建模块仿真结果矢量作用模块原理基于原理搭建模块仿真结果切换时间判断模块原理…

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号