C#：系统学习笔记(一)MVC基础篇

最新推荐文章于 2024-06-28 17:15:45 发布

KaiSarH

最新推荐文章于 2024-06-28 17:15:45 发布

阅读量1.2k

点赞数

分类专栏： C#

本文链接：https://blog.csdn.net/KaiSarH/article/details/103097449

版权

C# 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本系统学习笔记课程是我在听大岳老师的C#ASP.NETMVC/WinForm上位机WPF课程时所做的笔记
课程讲的很棒,大家如果对C

文章目录

1. 如何选择比较好的前端框架进行敏捷开发
- 1.1 Charisma
- 1.2 AdminLTE
2. 快速搭建MVC项目
3. 使用母版页协助开发

1. 如何选择比较好的前端框架进行敏捷开发

1.1 Charisma

下载官网

框架整体界面:
在这里插入图片描述

1.2 AdminLTE

下载官网

框架整体界面:
在这里插入图片描述

我们可以看到,在模板上,已经有很多现成的框架了,我们在开发的时候可以直接在模板上进行后续开发或者将其中的样式元素裁剪调用.

2. 快速搭建MVC项目

目标:

将模板的登录页和主界面加入到我们的项目之中

步骤:

新建—项目
项目结构

① Views 存放视图各种界面
② Models 存放方法,通用数据类访问
③ Controllers 存放控制器方法
④ 在App_Start下的RouteConfig.cs(配置文件)中

controller : home为控制器名称
action : index为相应控制器下对应的某一个方法
新建登录页面 : Views—添加—添加视图

不适用布局页,只需要更改视图名称就可以.
如果说,想要登陆界面,需要控制器(Controller)控制我们的登录流程.
新建控制器 : Controller—添加—控制器

控制器名称,要与我们想控制的界面相同.比如我们就要用LoginController控制我们新建的LoginView
当我们新建控制器以后,VS会帮助我们自动在Views下新建对应视图的文件夹.我们需要将对应的界面放在文件夹下.

显示我们的登陆界面
将RouteConfig.cs中的controller改为我们刚刚建立的控制器.action改为我们自己的函数
在这里插入图片描述
在LoginController.cs中,新建一个MyIndex()方法,返回我们刚刚新建的视图

然后把我们框架需要的样式文件js文件等放入我们的项目中,

再在我们新建立的LoginView中,将我们的框架代码复制进去(保留有需要的):

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="~/plugins/css/charisma-app.css" rel="stylesheet">

    <link href="~/plugins/css/bootstrap-cerulean.min.css" rel="stylesheet" />
    <!-- jQuery -->
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/plugins/bower_components/jquery/jquery.min.js"></script>//
    <script src="~/plugins/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="~/plugins/js/jquery.autogrow-textarea.js"></script>
    <script src="~/plugins/js/jquery.cookie.js"></script>
    <script src="~/plugins/js/jquery.iphone.toggle.js"></script>
    <script src="~/plugins/js/jquery.history.js"></script>
    <script src="~/plugins/js/charisma.js"></script>
</head>
<body>
    <div class="ch-container">
        <div class="row">

            <div class="row">
                <div class="col-md-12 center login-header">
                    <h2>Welcome to Charisma</h2>
                </div>
                <!--/span-->
            </div><!--/row-->
            <div class="row">
                <div class="well col-md-5 center login-box">
                    <div class="alert alert-info">
                        Please login with your Username and Password.
                    </div>
                    <form class="form-horizontal" action="index.html" method="post">
                        <fieldset>
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span>
                                <input type="text" class="form-control" placeholder="Username">
                            </div>
                            <div class="clearfix"></div><br>
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>
                                <input type="password" class="form-control" placeholder="Password">
                            </div>
                            <div class="clearfix"></div>
                            <div class="input-prepend">
                                <label class="remember" for="remember"><input type="checkbox" id="remember"> Remember me</label>
                            </div>
                            <div class="clearfix"></div>
                            <p class="center col-md-5">
                                <button type="submit" class="btn btn-primary">Login</button>
                            </p>
                        </fieldset>
                    </form>
                </div>
                <!--/span-->
            </div><!--/row-->
        </div><!--/fluid-row-->
    </div><!--/.fluid-container-->
</body>
</html>

点击运行后,即可看到登陆界面效果图:
在这里插入图片描述

显示我们的主界面,同理
①在Views下的Login中添加视图MainPage,将框架中的index的代码拷入
②在LoginController.cs中,增加Main()函数,返回我们的主界面
③修改RouteConfig.cs中的action,修改为Main
即可显示我们的主界面:

3. 使用母版页协助开发

如果某一个模块或者某一个界面在项目中经常被使用到,而且模块通用.可以将其设置为母版页,利于后期维护.

在之前的基础上,新建一个Shared文件夹,存放我们的母版页.其中代码通用
在其中新建MVC 5布局页
我们可以看到,新建的布局页面中,有一个
```
@RenderBody()
```
这一部分内容,是预留出来的.
可以这样理解,我们每一次调用母版页,源代码都会被智能的存放入RenderBody()中动态加载.
我们将代码复制到母版页中,然后
接下来新建一个文件夹(就像之前的Login文件夹被自动创建,我们新建一个,保证与控制器同名称)并在其中新建视图,并引用母版页
加下来要创建视图界面对应的控制器

我们在母版页的代码中可以看到这样一行

是为智慧城市这个元素添加了超链接,指向的是zhihuiController中的zhihuichengshi方法.
因此,我们要建立一个zhihuichengshi方法.

可以看到,zhihuichengshi()方法中,返回了我们刚才设置的界面
然后我们再把RouteConfig.cs中的controller和action修改一下.

运行打开后,我们可以看到