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


相关推荐

  • Thinkphp集成抖音SDK的实现方法[通俗易懂]

    Thinkphp集成抖音SDK的实现方法

  • intellij idea 2021激活码(注册激活)

    (intellij idea 2021激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1STL…

  • UFT常识

    UFT常识UFT也用了一段时间了,自己竟然还老犯同样的错误,遇到同样的问题。自己还不能单独解决,对不起导师,对不起自己。下面对UFT中的一些基本问题总结一下。1.关于DataTable导入:DataTable.ImportSheet(FileName,SheetSource,SheetDest)FileName: ThefullorrelativepathoftheExce

  • Oracle12c(PDB中) ORA-01017: invalid username/password; logon denied

    Oracle12c(PDB中) ORA-01017: invalid username/password; logon denied问题背景描述:SQL>altersessionsetcontainer=pdbwyzc;–切换pdbSQL>defineusername=eodaSQL>defineusernamepwd=fooSQL>createuser&&usernameidentifiedby&&usernamepwd;SQL>grantdbato&&username;

  • 关于云计算的海量数据存储模型[通俗易懂]

    关于云计算的海量数据存储模型 引言随着越来越多的人使用计算机,整个网络会产生数量巨大的数据,如何存储网络中产生的这些海量数据,已经是一个摆在面前亟待解决的问题。现在常见的三种存储方式是DAS、NAS和SAN,但是面对网络产生的越来越多的数据,这三种方式的缺点就明显的暴露出来。DAS存储方式可扩展性差,系统性能低,存储分散。NAS虽然使用方便,成本低廉,但最是存储性能差。SAN存

  • 功能十分全面的项目管理工具(文档协作、项目计划、文件管理等)[通俗易懂]

    功能十分全面的项目管理工具(文档协作、项目计划、文件管理等)[通俗易懂]今天本人给大伙推荐一个项目管理工具,该工具会提供各类:文档协作功能、在线思维导图、在线审批流程图、项目管理、任务分发、在线评论,文件管理等等。该项目管理工具整套架构采用了前后分离模式,支持多节点部署,使用的技术是Java、Vue、Element-UI、postgresql1等技术栈。智能项目管理解决方案:https://www.informat.cn/pm一、系统预览1.登录系统2.系统总览,仪表盘3.项目计划管理项目体系分解项目组,主子项目 项目文

发表回复

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

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