Asp.net core 2.1 Razor 的使用學習筆記（一）

本文轉載自查看原文 2018-02-01 22:16 1118 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:\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?}");
            });
        }
    }

View Code

三、加入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好用了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Asp.net core 學習筆記 Razor Page Asp.net core 學習筆記 2.1 升級到 2.2 【ASP.NET Core學習】Razor頁面學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面學習ASP.NET Core Razor 編程系列十六——排序學習ASP.NET Core Razor 編程系列十九——分頁學習ASP.NET Core Razor 編程系列一學習ASP.NET Core Razor 編程系列十七——分組 ASP.NET Core Razor 頁面使用教程學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面