Asp.net core 2.0.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:\MyApp\wwwroot\

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文件。变色的地方就是修改过的地方。

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

替换原来的：

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

替换原来的：

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

替换原来的：

四、替换文件中原来的<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>© 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好用了。

秒客网

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

相关文章