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(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(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(options =>
                      options.UseSqlServer(conn));


            services.AddIdentity()
                .AddEntityFrameworkStores()
                .AddDefaultTokenProviders();

            // Add application services.
            services.AddTransient();

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

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

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" />

替换原来的:

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" />

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

替换原来的:

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

替换原来的:

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





@RenderBody()



© 2017 -



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

这是修改好了的代码:

六、修改_LoginPartial.cshtml文件。主要就是去掉

    class里面的nav,在
  • 里添加class="nav-item"

    改后如下:

    @if (SignInManager.IsSignedIn(User))
    {


    }
    else
    {

    }

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

转载于:https://www.cnblogs.com/chonghanyu/p/8400214.html

你可能感兴趣的:(Asp.net core 2.1 Razor 的使用学习笔记(一))