當(dāng)前位置：首頁 >

从零开始构建一个的asp.net Core 项目（一）

發(fā)布時間：2023/12/10 23 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始构建一个的asp.net Core 项目（一）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

最近突發(fā)奇想，想從零開始構(gòu)建一個Core的MVC項目，于是開始了構(gòu)建過程。

首先我們添加一個空的CORE下的MVC項目，創(chuàng)建完成之后我們運行一下（Ctrl +F5）。我們會在頁面上看到“Hello World!”。

既然是從零開始構(gòu)建的項目，我們需要搞明白這個“Hello World!”是從哪里出現(xiàn)的？點開我們的項目，我們會看到VS為我們生成了兩個類，一個是Program.cs 和startup.cs，和一個空文件夾（wwwroot），除此之外VS在也沒有為我們多生成了任何東西。

我們首先從這兩個類開始分析，program.cs這個類是不是和console application的program.cs 有點像呢。我們點進去看一下

1 public class Program 2 { 3 public static void Main(string[] args) 4 { 5 var host = new WebHostBuilder() 6 .UseKestrel() 7 .UseContentRoot(Directory.GetCurrentDirectory()) 8 .UseIISIntegration() 9 .UseStartup<Startup>() 10 .UseApplicationInsights() 11 .Build(); 12 13 host.Run(); 14 } 15 } Program

我們看到有一個這里邊就有一個主函數(shù)，這里就是主程序的入口。開發(fā)過winfrom的人，應(yīng)該心里都有印象了吧，在winfrom的開發(fā)過程中，我們的項目也有一個這樣的類，只不過里邊最后一行寫的是Application.run()，這里是host.run()，這樣程序就啟動了。我們也看到了?.UseStartup<Startup>()這么一行代碼，這里就是用的startup.cs的那個類。

我們打開startup.cs 這個類

1 public class Startup 2 { 3 4 public void ConfigureServices(IServiceCollection services) 5 { 6 } 7 8 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 9 { 10 loggerFactory.AddConsole(); 11 12 if (env.IsDevelopment()) 13 { 14 app.UseDeveloperExceptionPage(); 15 } 16 17 app.Run(async (context) => 18 { 19 await context.Response.WriteAsync("Hello World!"); 20 }); 21 } 22 }

在這里我找到了"Hello World！"的來源了。

于是我又想能不能讓它顯示一個界面，就像我們生成的MVC項目那樣,有個home的界面。

想實現(xiàn)那個效果我們一步一來。首先我們的每一個View在conroll中對應(yīng)一個action，這樣我們才可以訪問到我們的View ，當(dāng)然在startup.cs中我們需要進行配置相應(yīng)的服務(wù)，進行依賴注入。

那我先建了一個Views文件夾，和Controllers文件夾。在Views文件夾中添加兩個界面，一個是_ViewStrart.cshtml 和_ViewImports.cshtml從名字中可以看出他們對應(yīng)得功能。一個是整個View的起點，另一個是整個view里邊添加的引用。

在Views文件夾下創(chuàng)建Share文件夾，共享的文件夾。就是每個View都用的。相當(dāng)于母版頁吧。

這里為了和VS生成的MVC項目一樣我在Share文件下添加了一個_Layout.cshtml 文件（名稱可以隨便起）。

<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>@ViewData["Title"] - WebApplication1</title><link href="~/site.css" rel="stylesheet" /><link href="~/bootstrap.css" rel="stylesheet" /> </head> <body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Test_NULL</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li><li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li><li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li></ul></div></div></nav><div class="container body-content">@RenderBody()<hr /><footer><p>© 2017 - WebApplication1</p></footer></div> </body> </html> <script src="~/jquery.js"></script> <script src="~/bootstrap.js"></script> _Layout.cshtml

我在里邊引用了Bootstrap.css和BootStrap.js ，juery.js 和site.css

這是site.css,其余三個都可以在相應(yīng)的網(wǎng)站上下載。這幾個文件都在wwwroot文件下的根目錄中（這里為了簡化）

body {padding-top: 50px;padding-bottom: 20px; }/* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content {padding-left: 15px;padding-right: 15px; }/* Set widths on the form inputs since otherwise they're 100% wide */ input, select, textarea {max-width: 280px; }/* Carousel */ .carousel-caption p {font-size: 20px;line-height: 1.4; }/* Make .svg files in the carousel display properly in older browsers */ .carousel-inner .item img[src$=".svg"] {width: 100%; }/* Hide/rearrange for smaller screens */ @media screen and (max-width: 767px) {/* Hide captions */.carousel-caption {display: none;} } .myTextArea {width: 100% !important; } site.css

由于我使用了Razor語法和taghelper標(biāo)簽，所以我們在這里需要添加相應(yīng)的引用。

打開nuget包管理器找到下邊這兩個包，點擊安裝就可以了，當(dāng)然了也可以打開*.csproj文件進行編輯

打開_ViewStrart.cshtml在里邊添加，這里說明一下，Layout = "~/Views/Shared/_Layout.cshtml";表示的是默認(rèn)情況下所有VIew都是用的這個母版頁，當(dāng)然了你也可以在界面中自己重新聲明

@{Layout = "~/Views/Shared/_Layout.cshtml"; }

打開_ViewImports.cshtml 在里邊添加（這里聲明了我所有的view中都可以用Taghelper），寫過自定義TagHelper的可能在這里比較明了。*是代表所有逗號后邊表示的是程序集的名稱。

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers

下邊我們在Views文件夾下添加一個Home文件夾在Home文件夾下添加一個Index.cshtml文件。（這里為了演示一切從簡）

@{ViewData["Title"] = "Index Page"; } <h1>這是測試用的Index頁面</h1>

由于一個View對應(yīng)Controller中的一個action，我們要在Controllers文件中添加一個HomeController.cs MVC控制器類（一切從簡）

using Microsoft.AspNetCore.Mvc;namespace Test_Null.Controllers {public class HomeController : Controller{public IActionResult Index(){return View();}} } HomeController.cs

這樣前臺界面已經(jīng)搭建完畢了就剩怎么調(diào)用了。

我回到了StartUp.cs 這個類

由于我們用的是MVC所以在這里我添加了MVC這個包的引用

在StartUp.cs 類里邊的這方法中配置這項服務(wù)

public void ConfigureServices(IServiceCollection services){services.AddMvc();}

由于我在前臺界面中用了js和css這樣的靜態(tài)文件（在wwwroot的根目錄中）所以在這里我要加上靜態(tài)包的引用。關(guān)于這個包的高級應(yīng)用這里有篇博客

http://www.cnblogs.com/linezero/p/5541326.html

修改StartUp.cs 類

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){loggerFactory.AddConsole();if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseStaticFiles();//使用靜態(tài)文件默認(rèn)的文件夾為wwwroot app.UseMvc(routes =>{routes.MapRoute(name: "default",template: "{Controller=Home}/{action=Index}/{id?}");});}

這是修改后的整個Startup.cs類和最開始做個對比

1 public class Startup 2 { 3 public void ConfigureServices(IServiceCollection services) 4 { 5 services.AddMvc(); 6 } 7 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 8 { 9 loggerFactory.AddConsole(); 10 11 if (env.IsDevelopment()) 12 { 13 app.UseDeveloperExceptionPage(); 14 } 15 app.UseStaticFiles();//使用靜態(tài)文件默認(rèn)的文件夾為wwwroot 16 17 app.UseMvc(routes => 18 { 19 routes.MapRoute( 20 name: "default", 21 template: "{Controller=Home}/{action=Index}/{id?}" 22 ); 23 }); 24 } 25 } Startup.cs

到這里就完成了。運行一下（Ctrl+F5）

運行結(jié)果

通過這個構(gòu)建過程，讓我對每個包的用途有了點理解，以及MVC的運行過程。和依賴注入（DI），服務(wù)的配置有了點了解，本來想連上數(shù)據(jù)庫進行操作，可是我用EF的時候除了點問題，等問題解決了，再寫篇從零開始連上數(shù)據(jù)庫的演示。

轉(zhuǎn)載于:https://www.cnblogs.com/qulianqing/p/6816281.html

總結(jié)

以上是生活随笔為你收集整理的从零开始构建一个的asp.net Core 项目（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：工业机械人运动学正逆解，简单粗暴！！！！
下一篇：【 Redis开发与运维】第3章读书笔