.net mvc5_mvc工作流程

.net mvc5_mvc工作流程作者:josh-jw介绍我们可以在web页面用HTML表格元素定义WebGrid显示数据,它以非常简单的方式呈现表格数据,支持自定义格式列,分页,排序,并通过AJAX异步更新。WebGrid主要属性:Source-数据来自哪里。通常情况下,通过controlleraction传递modelDefaultSort-定义如何将数据排序。只要在这里提供列名。RowsPerPage-每页表格显示…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

作者:josh-jw

介绍

我们可以在web页面用HTML表格元素定义WebGrid显示数据,它以非常简单的方式呈现表格数据,支持自定义格式列,分页,排序,并通过AJAX异步更新。

WebGrid主要属性:

Source -数据来自哪里。 通常情况下,通过controller action传递model

DefaultSort -定义如何将数据排序。只要在这里提供列名。

RowsPerPage -每页表格显示的记录数。

CanPage -允许分页。

CanSort -允许通过点击列标题排序。

SelectedFieldName -获取查询字符串字段,用于指定所选行WebGrid实例的全名。

代码使用

在这篇文章中, MVC 4应用程序中使用WebGrid。 首先,我要创建一个名为Product的Model。

Product.cs

public class Product

{

public string Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public long Quantity { get; set; }

}

我使用Razor视图引擎,InventoryController包含下面的action:

InventoryController.cs

public ActionResult WebgridSample()

{

ObservableCollection inventoryList =

new ObservableCollection();

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

}

在WebgridSample视图里,我创建了WebGrid并在调用GetHtml时指定列。

WebgridSample.cshtml:

@{

var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,

selectionFieldName: “selectedRow”,ajaxUpdateContainerId: “gridContent”);

grid.Pager(WebGridPagerModes.NextPrevious);

}

WebGrid helper允许我们添加页眉,页脚,行和交替行元素的样式。

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

添加列到表格中并指定列名、排序方式、字段绑定。

@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”)

))

为了浏览选定的项目,我使用了Id列的format参数。Oolumn方法的format参数,允许我们自定义数据项的渲染。

grid.Column(“Id”, format: (item) => item.GetSelectLink(item.Id))

下面的代码展示了如何以HTML代码方式显示选中的列,为此,我创建了一个Product模型实例。

@{

InventoryManagement.Models.Product product = new InventoryManagement.Models.Product();

}

@if (grid.HasSelection)

{

product = (InventoryManagement.Models.Product)grid.Rows[grid.SelectedIndex].Value;

Id @product.Id

Name @product.Name

Description @product.Description

Quantity @product.Quantity

}

为了避免页面分页时刷新,我们可以添加AJAX参数ajaxUpdateContainerId,包含网格的DIV标记。在这里,我们可以指定ajaxUpdateContainerId为div的id。

ajaxUpdateContainerId: “gridContent”

添加jQuery引用:

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

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

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

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

(0)


相关推荐

  • RabbitMQ(五):Exchange交换器–topic

    RabbitMQ(五):Exchange交换器–topic

  • 电平转换芯片使用_i2c电平转换芯片

    电平转换芯片使用_i2c电平转换芯片设计GPS模组电路时,需要转换电平,设计采用TXS0104E转换电平

  • 动态规划经典题目汇总图_离散型动态规划经典题目

    动态规划经典题目汇总图_离散型动态规划经典题目http://www.cppblog.com/doer-xee/archive/2009/12/05/102629.html转载之前先Orz一下:[s:19]Robberies http://acm.hdu.edu.cn/showproblem.php?pid=2955背包;第一次做的时候把概率当做背包(放大100000倍化为整数):在此范围内最多能抢多少钱 最脑残的是把总

    2022年10月28日
  • C语言strstr函数_c语言fwrite函数的用法

    C语言strstr函数_c语言fwrite函数的用法函数名:strstr功 能:在串中查找指定字符串的第一次出现用 法:char*strstr(char*str1,char*str2);程序例:#include#includeintmain(void){  char*str1=”BorlandInternational”,*str2=”nation”,*ptr;  ptr=

    2022年10月15日
  • grid常用设置

    grid常用设置父元素1.dispaly:grid|inline-grid|subgrid;grid:生成块级网格inline-grid:生成行内网格subgrid:如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小2.grid-template-columns行大小grid-template-rows列大小3.单元格间距grid-column-…

  • 电压转电流电路

    电压转电流电路图1 电压转电流原理图   如图 1是输入输出无偏置型电压转电流信号调理的典型电路。其中运放A、电阻R13、三极管Q10构成压控电流源电路;电阻R9、R11、运放B、三极管Q8、Q9构成电流放大电路。   当电压信号加在运放A同向输入时,由运放特性:虚短、虚断可知反向输入端电压跟随同向输入端电压信号,此时在电阻R13支路上产生电流流过三极管Q10,三极管Q10基极受运放A输出端

发表回复

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

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