• 小试牛刀MVC简单网页


    上次我们创建了第一个MVC的网站,没用下,这次就简单来运行下,首先大家要去理解下MVC模式到底什么关系。在这里我就不多说,直接创建一个网页,用来显示一些数据,数据库的话我就先简单用这样创建先,为了方便嘛。。。好,看图

     

    这里我先选择数据里ADO.NET实体数据类型

     

    选择从数据库中来导入到我新建的ADO.NET的实体类中,刚好我的数据库有一个tb_user的表,里面就是保存一些学生信息,包括学号之类的东西,我只是随便弄一个表格来展示一下这个数据而已,所以你们弄个什么表格都可以。

     

    Ok,这样我就生成了一个ADO.NET的Model,关于学生的,接下来就来把学生的信息在表格里面展示出来,完成我们的第一个MVC网页。

    来新建一个叫Stu的控制器,控制器统一要在名称后加上Controller后缀,这个不是必需的,但大家应该都要遵守,否则合作起来就比较难。

    StuController.cs
    
    using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Web;
    
    using System.Web.Mvc;
    
     
    
    namespace MVC.Controllers
    
    {
    
        public class StuController : Controller
    
    {
    
        //在全局这里定义我的数据访问类,方便后面对数据直接操作
    
            Models.collectsystemEntities db = new Models.collectsystemEntities();
    
            public ActionResult Index()
    
            {
    
                //这里使用了下LINQ语句,从ADO.NET中查询数据并放到List里面
    
                List<MVC.Models.tb_user> list = (from s in db.tb_user select s).ToList();
    
                //通过return View();括号里面填内容来传参,模式传到视图中的Model属性中
    
                //可以在视图通过Model来访问到,后面我会教下大家从控制器传参到视图的几种方法
    
                return View(list);
    
            }
    
     
    
        }
    
    }

     

    先生成一个空的视图,当然,visual studio会默认帮你生成和控制器里面的action方法名一致的视图。一个简单的table,代码如下:

    Index.cshtml
    
    @{
    
        Layout = null;
    
    }
    
    @using MVC.Models;
    
    <!DOCTYPE html>
    
     
    
    <html>
    
    <head>
    
        <meta name="viewport" content="width=device-width" />
    
        <title>Index</title>
    
    </head>
    
    <body>
    
        <div>
    
            <table >
    
                <tr>
    
                    <th>ID</th>
    
                    <th>学号</th>
    
                    <th>姓名</th>
    
                </tr>
    
                @foreach(tb_user user in Model as List<tb_user>)
    
                {
    
                    <tr>
    
                        <td>@user.Id</td>
    
                        <td>@user.Number</td>
    
                        <td>@user.Name</td>
    
                    </tr>
    
                }
    
            </table>
    
        </div>
    
    </body>
    
    </html>

    运行后的效果如下图:

     

    很明显,可以访问到里面的数据,不过明显很丑啦,哎。。。。,先用着bootstrap的css文件随便弄的漂亮点先,后面给大家讲解视图模板的时候心情才会好一点。先建立一个CSS文件,把css文件复制进去,然后给我们的table添加class属性。

     

    添加css到文件中,其实这个应该在后面讲到的视图模板中来全局添加比较好,一个个添加的话如果到了要修改的时候就会很麻烦,代码冗余。截图如下:

     

     

    这下就漂亮多了,哈哈,勉强先接受吧。。。。。

     

     

     

     

     

     

     

  • 相关阅读:
    蓝桥杯 2014本科C++ B组 六角填数 枚举排列
    蓝桥杯 2014本科C++ B组 地宫取宝 DFS+记忆化搜索
    埃及分数 IDA*
    优先队列详解(转载)
    HDU 1242 Rescue BFS+优先队列
    HDU 1627 Krypton Factor
    2018中国机器人大赛服务机器人专项赛赛后总结
    OpenMP使用体验报告(概述)
    写在归程路上——2018ROBOCUP机器人世界杯中国赛
    ROS编译工作区缺少cv_bridge的问题解决
  • 原文地址:https://www.cnblogs.com/xmfdsh/p/3601213.html
Copyright © 2020-2023  润新知