当前位置: 移动技术网 > IT编程>开发语言>.net > ASP.NET Core MVC的基础学习笔记

ASP.NET Core MVC的基础学习笔记

2020年03月09日  | 移动技术网IT编程  | 我要评论

b站前员工涉贪,曹操传通用调试器,麻生优

最近由于“武汉肺炎”疫情在家办公,也没闲着,最近学习了一下asp.net core mvc的一些网页开发的的基础知识,话不多说直接上教程!

 

一、创建web应用程序

1)创建新项目--->找到 “ core  应用程序” 类型的项目(也可以模糊查询:语言选择c#,项目类型选择web):

 

 

2)选择 应用程序 (模型视图控制器)--->修改名称--->创建:

 

 

3)新建完成后,解决方案出现如图显示

 

wwwroot 存放网站的 js、css 等前端文件,

models-模型:封装业务逻辑相关的数据及对数据的处理方法【如图黄框框选中】;

views-视图: 向用户提供交互界面【如图蓝框框选中】;

controllers-控制器: 负责控制model和view【如图红框选中】;

appsettings.json-配置文件: 如可以在其中加入数据库连接字符串,如图:

 

 

 

二、创建实体模型

1)添加一个实体类 (选中models--->右键 --->添加--->类--->修改名称--->创建 )

并给字段添加一些特性如下图: 

   /// <summary>
    /// 用户表
    /// </summary>
    public class infouser
    {
        [key]//主键 非已id命名的主键必须添加
        [stringlength(10)]
        [displayname("用户名")]//显示名称
        [required(errormessage = "酒店名称不能为空")]//属性 表示该字段不能为空
        public string username { get; set; }
        [stringlength(16)]
        [displayname("密码")]
        [required(errormessage = "密码不能为空")]
        public string password { get; set; }
        [displayname("创建日期")]
        public datetime dtcreate { get; set; }
        [displayname("登录日期")]
        public datetime dtlogin { get; set; } 
        public byte[] headerimg { get; set; }

}

 

2)再添加一个实体框架类【数据库上下文类】(同样在models文件夹下创建,命名我这推荐以db+name,如dbwwp;) 

创建后再继承dbcontext

/// <summary>
/// 实体框架 entityframeworkcore
/// </summary>
namespace easyblog.models
{
    public class dbwwp : dbcontext
    {
        public dbwwp(dbcontextoptions<dbwwp> options)
         : base(options)
        {

 
        }
        public dbset<infouser> infousers { get; set; }
        public dbset<infoblog> infoblogs { get; set; }
        public dbset<infolog> infologs { get; set; }
        public dbset<inforeply> inforeplys { get; set; }
    }
}

 

3)首先添加两个包:microsoft.entityframeworkcore.sqlserver 和microsoft.entityframeworkcore.tools

步骤:

右键依赖项-->管理nuget程序包--->浏览--->搜索包名--->选择需要的包下载并安装

 

 

4)在 startup类中的 configureservices 方法中注册数据库上下文

services.adddbcontext<dbwwp>(options => options.usesqlserver(configuration.getconnectionstring("dbwwp")));

 

5)现在我们打开” 程序包管理器控制台”(工具-->nuget 包管理器-->程序包管理器控制台),写入命令 “add-migration init” 如下图,添加新的数据库” 迁移”(init--是迁移的名称)。

 

不要介意add-migration 后面的名字与上图不符哈, 出来这个黄色的后成功一半咯~

  

update-database 然后回车

 

 这时候在上下文中就会出现一个叫做当前创建日期 加上你之前add 后面创建名字的一个记录了添加的” 迁移” 都保存在 migrations 目录下:

 

 

三、新增mvc和ef框架

 

1)接下来我们开始创建一套完整的mvc及增删改查,所以我们选择 “视图使用 entity framework 的 mvc 控制器”(步骤:controllers文件夹右键 -->添加-->双击控制器-->视图使用 entity framework 的 mvc 控制器):

 

 

2)接下来下拉选择好模型类(如上面创建的模型类infousers)、下拉选中自己创建的数据上下文类(如上面创建的数据库上下文类),勾上” 生成视图”,点击” 添加” 即可,同时你也可以自己命名,但控制器名称必须以controller结尾(这是asp.net core mvc的一个约定),这里我们默认命名infouserscontroller

 

创建完后系统自动帮我们生成了控制器(如图下infouserscontroller)和自动在views 文件夹下生成 infousers文件夹的增删改查等五个的视图(如图下的create-增,delete-删,details-查,edit-改,index-主页):

 

当然你也可以自己创建view视图,不过添加view视图有两种方法,一种是直接在views文件夹下添加(右键views文件夹下的infousers文件夹-->添加-->视图);另外一种是通过controller中的action来添加,打开控制器里(如infouserscontroller), 在”return view ();” 的地方右键-->添加视图方法。不过我推荐大家采用后一种方法。

 

3)采用前面两种方法后会进入如下图添加视图确认窗口,点添加就行

 

 

4)这样再添加了一个和特定的controller和infousers(这里指infouserscontroller和login)相对应的view(login.cshtml)并补充代码如下

 login.cshtml

@{
    viewdata["title"] = "登录";
}

<h4>@viewdata["title"]</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="login">
            <div class="form-group">
                <label class="control-label">用户名</label>
                <input name="username" id="username" class="form-control" />
            </div>
            <div class="form-group">
                <label class="control-label">密码</label>
                <input name="password" id="password" type="password" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" value="登录" class="btn btn-primary" />
                <small>@viewbag.msg</small>
            </div>
        </form>
    </div>
</div>

 

infouserscontroller.cs

public iactionresult login()
        {
            return view();
        }

        [httppost]
        [actionname("login")]
        public async task<actionresult> logining()
        {
            var username = request.form["username"];
            var password = request.form["password"];
            var item = db.infousers.find(username);

            if (item != null && password == item.password)
            {

                item.dtlogin = datetime.now;
                db.savechanges();


                var claims = new list<claim>();

                claims.add(new claim(claimtypes.name, username));

                var claimsidentity = new claimsidentity(claims, "cookies");
                await httpcontext.signinasync(new claimsprincipal(claimsidentity));
                return redirecttoaction("index", "blog");
            }
            else
                viewbag.msg = "登陆失败";
            return view();
        }

 

  

5)最后运行程序(单击iis express如图或按f5),启动后在浏览器地址中后面接上/infousers/login(浏览器中的地址 xx/infousers/login与开头的路由规则url:"{controller}/{action}/{id}"对应起来)后按回车enter。

当可以看到这界面时,说明成功了。

最后,请大家戴口罩,勤洗手,少去人群聚集处。保护好自己不给祖国添麻烦!!!武汉加油!中国加油!!!

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网