前言：

在本篇 Taurus.MVC WebMVC 入门开发教程的第四篇文章中，

我们将学习如何实现数据列表的绑定，通过使用 List<Model> 来展示多个数据项。

我们将继续使用 Taurus.Mvc 命名空间，同时探讨如何在视图中绑定并显示一个 Model 列表。

步骤1：创建 Model

首先，我们需要更新我们的 Model 类，使其能够表示多个数据项。

我们可以继续沿用之前的 User 类，不过这次我们将创建一个包含多个 User 对象的列表。

public class User

{

    public string Name { get; set; }

    public int Age { get; set; }

}

步骤2：更新控制器

接下来，我们需要更新控制器以支持传递包含多个 User 对象的列表到视图中。

在 HomeController.cs 文件中，修改 Index 方法来创建一个包含多个 User 对象的列表，并传递给视图。

public class HomeController : Taurus.Mvc.Controller

{

    public void Index()

    {

        List<User> userList = new List<User>

    {

        new User { Name = "Alice", Age = 25 },

        new User { Name = "Bob", Age = 30 },

        new User { Name = "Charlie", Age = 28 }

    };

        View.SetForeach(userList, "list");

    }

}

我们通过 View 的 SetForeach 方法，来接收列表数据，并同时进行界面渲染。

同时，我们在SetForeach的第二个方法中，指定界面元素的ID，以便我们知道要渲染的是哪个节点。

步骤3：更新视图

现在，我们需要更新视图来显示列表中的每个 User 对象的信息。

在 Index.html 视图文件中，我们可以通过设定ID，并被代码端使用循环来遍历列表，并显示每个 User 对象的姓名和年龄。

<!DOCTYPE html>

<html  xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>欢迎来到 Taurus.MVC WebMVC</title>

</head>

<body>

    <h1>用户列表</h1>

    <ul id="list">

        <li>姓名：${Name}，年龄：${Age}</li>

    </ul>

</body>

</html>

在上述代码中，我们使用 同样使用 ${modelName}  CMS 指令来绑定列表数据。

绑定使用的是视图所使用的 Model，其 类型为 List<User>。

然后，通过节点 id 传递到控制器中循环遍历列表中的每个 User 对象，并显示其姓名和年龄。

其循环的内容为id节点的内部文本，因此以下代码将被循环多次并进行替换：

<li>姓名：${Name}，年龄：${Age}</li>

步骤4：运行应用程序

最后，运行应用程序并查看页面的呈现效果。

您将看到一个包含多个用户信息的列表被成功显示在页面上。

步骤5：循环嵌套的调用方式

有时候，界面可能涉及循环嵌套，以实现嵌套的结果。

例如：框架后台管理中的 Extend Menu 就用到了这个手法。

界面Html如：

                <div id="menuList">

                    <div style="float:left"><b>${0} ：</b></div>

                    <div name="hostList" style="float:left">

                        <a target="frame" href="${HostUrl}">${HostName}</a>&nbsp;&nbsp;|&nbsp;

                    </div>

                    <div style="clear:both;height:5px;">

                    </div>

                </div>

一级节点：MenuList 为一级循环，其内部文本 ${0} 绑定标题。

说明：${0} 用来绑定分类标题，${Model} 语法，也可以根据索引来绑定数据。

二级节点：hostList 为二级循环，其内部文件有多个绑定项：${HostUrl} 和 ${HostName}

对于这种循环嵌套，对新手来手，是需要多习练习适应的。

这里我们看框架内部是怎么实现的：

internal partial class AdminController

{

    #region 页面呈现

    private MDataTable menuTable;

    /// <summary>

    /// Ext - Menu 展示

    /// </summary>

    public void Menu()

    {

        menuTable = new MDataTable();

        menuTable.Columns.Add("MenuName,HostName,HostUrl");

        MDataTable dtGroup = new MDataTable();

        dtGroup.Columns.Add("MenuName");

        List<string> groupNames = new List<string>();

        #region 加载自定义菜单

        ......省略代码......

        #endregion

        View.OnForeach += View_OnForeach_Menu;

        dtGroup.Bind(View, "menuList");

    }

    private string View_OnForeach_Menu(string text, MDictionary<string, string> values, int rowIndex)

    {

        string menu = values["MenuName"];

        if (!string.IsNullOrEmpty(menu))

        {

            //循环嵌套：1-获取子数据

            MDataTable dt = menuTable.FindAll("MenuName='" + menu + "'");

            if (dt != null && dt.Rows.Count > 0)

            {

                //循环嵌套：2 - 转为节点

                XmlNode xmlNode = View.CreateNode("div", text);

                //循环嵌套：3 - 获取子节点，以便进行循环

                XmlNode hostNode = View.Get("hostList", xmlNode);

                if (hostNode != null)

                {

                    //循环嵌套：4 - 子节点，循环绑定数据。

                    View.SetForeach(dt, hostNode, hostNode.InnerXml, null);

                    //循环嵌套：5 - 返回整个节点的内容。

                    return xmlNode.InnerXml;

                }

            }

        }

        return text;

    }

    #endregion

}

最后，运行应用程序并查看页面的呈现效果。

您将看到一个包含一级标题和多个二级标题列表被成功显示在页面上。

总结

通过本篇教程，我们学习了如何在 Taurus.MVC WebMVC 中实现数据列表的绑定，使用 List<Model> 来展示多个数据项。

我们更新了 Model 类、控制器和视图，成功实现了一个简单的数据列表绑定示例。

本系列的目录大纲为：

Taurus.MVC WebMVC 入门开发教程1：框架下载环境配置与运行

Taurus.MVC WebMVC 入门开发教程2：一个简单的页面呈现

Taurus.MVC WebMVC 入门开发教程3：数据绑定Model

Taurus.MVC WebMVC 入门开发教程4：数据列表绑定List<Model>

Taurus.MVC WebMVC 入门开发教程5：表单提交与数据验证

Taurus.MVC WebMVC 入门开发教程6：路由配置与路由映射

Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段

Taurus.MVC WebMVC 入门开发教程4：数据列表绑定List<Model>的更多相关文章

  1. Taurus.MVC WebAPI 入门开发教程4：控制器方法及参数定义、获取及基础校验属性【Require】。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  2. Taurus.MVC WebAPI 入门开发教程8：WebAPI文档与自动化测试。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  3. Taurus.MVC WebAPI 入门开发教程1：框架下载环境配置与运行（含系列目录）。

    前言: Taurus.MVC 微服务版本已经发布了:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. 以前都是框架发布时写点相关功能点的文章,没有形成 ...

  4. Taurus.MVC WebAPI 入门开发教程2：添加控制器输出Hello World。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  5. Taurus.MVC WebAPI 入门开发教程3：路由类型和路由映射。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  6. Taurus.MVC WebAPI 入门开发教程5：控制器安全校验属性【HttpGet、HttpPost】【Ack】【Token】【MicroService】。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  7. Taurus.MVC WebAPI 入门开发教程6：全局控制器DefaultController与全局事件。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  8. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  9. Taurus.MVC 微服务框架 入门开发教程：项目集成：4、默认安全认证与自定义安全认证。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  10. ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

随机推荐

  1. Mysql 安装文件下载

    今天上了mysql的官方网站想下载mysql数据库 https://www.mysql.com 注册之后发现 出口许可证的问题 这里fxxk 一下川建国的老婆和女儿 感觉比较抑郁 然后就去百度了下 发 ...

  2. net core控制台程序使用依赖注入读取appsettings.json配置文件

    .net 2.1有用,转自https://www.jianshu.com/p/726d1aa2795c 1.项目下添加appsettings.json文件,并将属性-复制到输出目录,设置为如果较新则复 ...

  3. 手撕Vue-提取元素到内存

    接着上一篇文章,我们已经实现了构建Vue实例的过程,接下来我们要实现的是提取元素到内存. 主要是通过文档碎片来实现,文档碎片是一个轻量级的文档,可以包含和控制节点,但是不会像真实的DOM那样占用内存, ...

  4. 学科知识图谱学习平台项目 ：技术栈Java、Neo4j、MySQL等超详细教学

    学科知识图谱学习平台项目 :技术栈Java.Neo4j.MySQL等超详细教学 0.效果展示 1.安装教程 安装Java SDK 11,下载前需要登录Oracle账号,下载链接,安装教程,测试是否能在 ...

  5. numpy数组拼接方法介绍(concatenate)---一次性完成多个数组的拼接

    1.数组拼接方法一 思路:首先将数组转成列表,然后利用列表的拼接函数append().extend()等进行拼接处理,最后将列表转成数组. 示例1: >>> import numpy ...

  6. MySQL 之基础命令(精简笔记)

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...

  7. CE修改器入门：运用代码注入

    从本关开始,各位会初步接触到CE的反汇编功能,这也是CE最强大的功能之一.在第6关的时候我们说到指针的找法,用基址定位动态地址.但这一关不用指针也可以进行修改,即使对方是动态地址,且功能更加强大. 代 ...

  8. C# 通过VMI接口获取硬件ID

    使用C#语言实现通过VMI(虚拟机监控器)接口来获取硬件ID的过程.VMI是一种用于虚拟化环境的接口,用于管理虚拟机和宿主机之间的通信和资源共享.具体实现中,需要通过添加System.Manageme ...

  9. 使用Docker单机部署Ceph

    安装Docker过程参考:https://www.cnblogs.com/hackyo/p/9280042.html 1. 创建Ceph专用网络 sudo docker network create ...

  10. 多进程｜基于非阻塞调用的轮询检测方案｜进程等待｜重新理解挂起｜Linux OS

    说在前面 今天给大家带来操作系统中进程等待的概念,我们学习的操作系统是Linux操作系统. 我们今天主要的目标就是认识wait和waitpid这两个系统调用. 前言 那么这里博主先安利一下一些干货满满 ...