Asp.net core 2.1 Razor 的使用学习笔记（一）

环境：vs2019 版本：16.1.1     .NET Core        ASP.NET Core 2.1    SDK 2.1.700  （20190529）

这里说明下， Razor页面模式跟mvc出现了严重的不同。正如微软官方说的一样“Razor 页面是 ASP.NET Core MVC 的一个新功能，它可以使基于页面的编码方式更简单高效。”

但就代码说没有什么不同几乎完全一样，但是存放的位置却有了根本的区别。个人研究分析的结果是：Razor页面模式其实是把mvc中的控制器化整为零了，即原来控制器中的操作代码被分布放到了各个页面的.cshtml.cs文件中了。这样一来由原来mvc中文件按类型分类变成了按功能分类，这样的好处就是每个页面形成了模块化，这个页面涉及的数据都在这里，便于维护，不用控制器、模型、视图来回切换了，给我的感觉多少有些像原来的web窗体的页面结构，当然化整为零后每个页面的操作不用全部去读取控制器，可能在性能有提升。

同时，这种变化使代码功能单一，易于维护，更不易出现错误，所以还是值得一学的。 

另外就是，因为本人经常开发一些小的项目，基本用不到sql服务，加之经常切换服务器，所以为了管理方便，数据库文件基本采用离线数据库文件（即服务器不用安装sqlserver即可使用）。如遇使用sqlserver朋友此章可以跳过，因为你不做修改，系统默认是sqlserver服务。（测试生成的数据库好像是在c盘的“文档”里？记不清了。）

另外，因为Bootstrap V4.0.0版本正式发布了，所以我更新下这个教程，把Bootstrap的安装使用加进来。（20180222）

一、新建项目

1、文件》新建项目》ASP.NET Core Web应用程序

2、依次选择“.NET Core”》“ASP.NET Core 2.1”，然后选择“Web 应用程序”（身份验证类型：个人用户账户）。

二、修改数据库连接。引自“张不水”兄的研究成果。

1、添加数据库

手动在项目中添加“App_data”文件夹，并复制粘贴一个标准的内容为空的.mdf文件。为方便大家学习我这里为大家提供了示例数据库。

2、相对路径：

修改appsettings.json文件中的"ConnectionStrings"（第3行）

"DefaultConnection": "Data Source=(localdb)\mssqllocaldb;AttachDbFilename=%CONTENTROOTPATH%\App_Data\aspnet123.mdf;Integrated Security=True;Connect Timeout=30;MultipleActiveResultSets=true”

需注意的是：AttachDbFilename=%CONTENTROOTPATH%\App_Data\aspnet123.mdf;

使用 ContentRootPath 是将文件放置在项目目录下而不是wwwroot目录下，这样更安全。

ContentRootPath 用于包含应用程序文件。
WebRootPath 用于包含Web服务性的内容文件。
实际使用区别如下：

ContentRoot: C:MyApp
WebRoot: C:MyAppwwwroot

3、修改Startup.cs

修改后的代码：

①修改Startup方法为如下

public Startup(IConfiguration configuration,IHostingEnvironment env)
        {
            Configuration = configuration;
            //新添加
            _env = env;
        }

②添加public IHostingEnvironment _env { get; }

③修改ConfigureServices方法

注销掉原有的services.AddDbContext

//添加修改（）声明变量conn并做相应处理
string conn = Configuration.GetConnectionString("DefaultConnection");
if (conn.Contains("%CONTENTROOTPATH%"))
{
conn = conn.Replace("%CONTENTROOTPATH%", _env.ContentRootPath);
}
//修改默认的连接服务为conn
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(conn));

修改完成后的代码：

public class Startup
    {
        public Startup(IConfiguration configuration, IHostingEnvironment env)
        {
            Configuration = configuration;
            //新添加
            _env = env;
        }

        public IConfiguration Configuration { get; }
        //新添加
        public IHostingEnvironment _env { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //services.AddDbContext<ApplicationDbContext>(options =>
            //    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            //添加修改（）声明变量conn并做相应处理
            string conn = Configuration.GetConnectionString("DefaultConnection");
            if (conn.Contains("%CONTENTROOTPATH%"))
            {
                conn = conn.Replace("%CONTENTROOTPATH%", _env.ContentRootPath);
            }
            //修改默认的连接服务为conn
            services.AddDbContext<ApplicationDbContext>(options =>
                      options.UseSqlServer(conn));


            services.AddIdentity<ApplicationUser, IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>()
                .AddDefaultTokenProviders();

            // Add application services.
            services.AddTransient<IEmailSender, EmailSender>();

            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBrowserLink();
                app.UseDatabaseErrorPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseAuthentication();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }

三、加入Bootstrap 4.0.0.

1、下载Bootstrap 4.0.0的预编译版本。如果你不是专业的UI设计不打算修改的话，一般来说，我们用不到源代码进行新的编译。Bootstrap4.0.0下载地址

2、解压下载的文件并替换掉wwwroot>lib>bootstrap>dist的同名目录。（最好是先删除再复制）

3、修改_Layout.cshtml文件。变色的地方就是修改过的地方。

①用下面的代码替换页面上方的：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

替换原来的：

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

②用下面的代码替换页面下方的

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>

替换原来的：

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>

③用下面的代码替换页面下方的

<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl">
</script>

替换原来的：

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>

四、替换文件中原来的<body>中的div内容，其实显示效果是一样的，只是用了新的Bootstrap规则来完成。

<div class="container ">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg fixed-top">
<a class="navbar-brand" href="#">项目名称</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a  asp-page="/Index" class="nav-link">Home</a></li>
<li class="nav-item"><a asp-page="/About" class="nav-link">About</a></li>
<li class="nav-item"><a asp-page="/Contact" class="nav-link">Contact</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</nav>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; 2017 - </p>
</footer>
</div>

五、修改Index.cshtml文件。这里主要是Carousel控件需要部分修改

这是修改好了的代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="~/images/banner1.svg" alt="ASP.NET"/>
<div class="carousel-caption d-none d-md-block">
<p>
Learn how to build ASP.NET apps that can run anywhere.
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409">
Learn More
</a>
</p>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="~/images/banner2.svg" alt="Visual Studio"/>
<div class="carousel-caption d-none d-md-block">
<p>
There are powerful new features in Visual Studio for building modern web apps.
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409">
Learn More
</a>
</p>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="~/images/banner3.svg" alt="Package Management"/>
<div class="carousel-caption d-none d-md-block">
<p>
Bring in libraries from NuGet and npm, and automate tasks using Grunt or Gulp.
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409">
Learn More
</a>
</p>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="~/images/banner4.svg" alt="Microsoft Azure"/>
<div class="carousel-caption d-none d-md-block">
<p>
Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
Learn More
</a>
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

六、修改_LoginPartial.cshtml文件。主要就是去掉<ul>class里面的nav，在<li>里添加class="nav-item"

改后如下：

@if (SignInManager.IsSignedIn(User))
{
<form asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Hello @UserManager.GetUserName(User)!</a>
</li>
<li class="nav-item">
<button type="submit" class="btn btn-link  nav-link">Log out</button>
</li>
</ul>
</form>
}
else
{
<ul class="navbar-nav">
<li class="nav-item"><a asp-page="/Account/Register" class="nav-link">Register</a></li>
<li class="nav-item"><a asp-page="/Account/Login" class="nav-link">Log in</a></li>
</ul>
}

编译后，你会得到和原来一模一样的界面。Bootstrap V4.0.0 确实比原来有进步，差异还不小。具体请参考相关资料，对于研究过bootstrap的朋友来说，还是很简单的。个人觉得比3.3.7好用了。