其实aspnet打开网站源码分享的问题并不复杂，但是又很多的朋友都不太了解asp访问网页源码，因此呢，今天小编就来为大家分享aspnet打开网站源码分享的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
RazorView文件是为action方法提供视图，可以在Views->ControllerName文件夹下创建这个文件，在我们应用程序中创建一个CityController.cs文件，这个控制器中有一个Tokyo的方法
usingMicrosoft.AspNetCore.Mvc;namespaceAspNetCore.Views.Controllers{publicclassCityController:Controller{publicIActionResultTokyo(){returnView();}}}
针对这个action方法，我们创建一个他自己的视图在Views->City文件夹下，注意文件夹的名字没有Controller后缀，是City而不是CityController
因此在应用程序的Views文件夹内创建一个新的文件夹叫City，选择Add->NewItem,在弹出的对话框中选择RazorView-Empty并且将其命名为Tokyo.cshtml
视图模式是空的，将下面代码添加到视图中
<h1>WelcometoTokyo</h1>
运行应用程序进入URL-https://localhost:7019/City/Tokyo，我们会看到View呈现在浏览器中
这个View适用于Tokyo的action方法，如果我有另外一个action叫Nagoya在相同的控制器中
usingMicrosoft.AspNetCore.Mvc;namespaceAspNetCore.Views.Controllers{publicclassCityController:Controller{publicIActionResultTokyo(){returnView();}publicIActionResultNagoya(){returnView();}}}
现在我们将创建一个Nagoya.cshtml视图文件在Views->City文件夹，我们简单的显示消息
<h1>WelcometoNagoya</h1>
在应用程序中，下列图片显示了2个View的位置
2添加视图快捷键
在VisualStudio中可以使用快捷键为action添加View，右键点击action方法名称并且在菜单中选择AddView，VisualStudio将会打开对话框，你能选择视图并且给视图命名，如果没有Controller文件夹会自动创建一个
3在View中使用Razor语法写自定义逻辑
你可以在视图中写业务逻辑代码，例如if和foreach语句，例子：在视图中添加下列代码：
@if(DateTime.Now.DayOfWeek==DayOfWeek.Monday){<p>It’saBoringDay</p>}else{<p>It’saPartyDay</p>}
也可以在视图中添加下面代码
@{string[]countries=newstring[]{“England”,”France”,”Germany”,”China”};<ul>@foreach(stringcountryincountries){<li>@countries</li>}</ul>}
在视图中，添加HTML表单和提交按钮，当这个按钮被点击时，这个表单被提交到与之匹配的action，这个url被设置使用表单action特性属性，我们创建表单action的url通过使用下面两个帮助标签：
1asp-controller-指定控制器的名称，如果这个参数被省略，框架会自动查找当前view关联的控制器2asp-action-指定action方法的名字，如果该参数被省略，框架会自动查找当前view关联的action例子：更新Tokyo.cshtml视图文件包含下面表单代码
<h1>WelcometoTokyo</h1><formasp-controller=”City”asp-action=”Tokyo”method=”post”><divclass=”mb-3row”><labelclass=”col-sm-1control-label”>名称</label><divclass=”col-sm-11″><inputclass=”form-control”name=”name”/></div></div><divclass=”mb-3row”><labelclass=”col-sm-1control-label”>性别</label><divclass=”col-sm-11″><selectclass=”form-control”name=”sex”><optionvalue=”F”>Female</option><optionvalue=”M”>Male</option></select></div></div><divclass=”mb-3row”><divclass=”col-sm-11offset-sm-1″><buttonclass=”btnbtn-primary”type=”submit”>保存</button></div></div></form>
注意使用asp-controller=”City”和asp-action=”Tokyo”这两个帮助标签创建URL，当表单提交时CityController控制器中的Tokyo方法将被调用，method=”post”特性告诉action以post方式调用
<formasp-controller=”City”asp-action=”Tokyo”method=”post”>
这个表单有2个html控件能够输入用户和性别，提交这个表单时，action方法会接收到对应的值
<inputclass=”form-control”name=”name”/><selectclass=”form-control”name=”sex”><optionvalue=”F”>Female</option><optionvalue=”M”>Male</option></select>
现在在CityController中添加一个POST版本的Tokyo方法，代码如下
[HttpPost]publicIActionResultTokyo(stringname,stringsex){returnView();}
为了获取到这2个值我们需要在控制器中添加2个参数，现在运行应用并且进入URL-https://localhost:7019/City/Tokyo，在表单中输入值并提交你将会在控制器的action方法中获取到该值
共享视图保存在Views->Shared目录下，可以在不同的action之间共享页面,让我们通过一个例子来了解一下，在HomeController.cs文件中创建一个新的action方法叫CallSharedView，代码如下：
publicIActionResultCallSharedView(){returnView();}
我们把CallSharedView方法代码复制到另外一个控制器中ExampleController.cs
现在Home和Example控制器中分别有叫CallSharedView方法,针对这两个action方法我们创建一个共享视图，因此添加一个视图文件在Views->Shared文件夹并且命名为CallSharedView.cshtml,这个视图的名字和这两个控制器中action方法的名字相同这个视图相当简单，我们用h1标签展示消息
<h1>DisplayingfromSharedView</h1>
ASP.NETCore保证所有的共享视图可用并且确保他们可用，运行应用程序并且在浏览器中打开下面两个连接，这两个连接使用了我们之前创建的2个方法
ASP.NETCoreaction会从下面两个地方搜索视图文件：
/Views/<ControllerName>/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml
例如下面AdminController中的List方法，最后一行调用View()方法
publicIActionResultList(){returnView();}
ASP.NETCore会在下面两个位置查找视图：1/Views/Admin/List.cshtml=>如果在这个位置发现文件，将会呈现视图，如果在这个位置没有发现文件，将会在第二个位置查找2/Views/Shared/List.cshtml=>如果在这里发现文件将呈现该文件，如果没有View将抛出一个错误我们没有为List方法添加视图文件，这种情况下将会抛出一个错误，因此运行应用程序并且输入如下url，你将会看到一个视图没有发现的异常消息我们只需要在/Views/Admin文件夹或者在/Views/Shared文件夹下添加List.cshtml6.1区域视图
如果你的控制器是ASP.NETCoreArea的一部分，可以从下面3个位置搜索：
/Areas/<AreaName>/Views/<ControllerName>/<ViewName>.cshtml/Areas/<AreaName>/Views/Shared/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml
让我们通过一个例子来了解一下，首先在应用程序的根目录下添加一个新的Areas文件夹，接下来在Areas文件加内添加一个Sales文件夹
在Areas->Sales文件加下添加一个新的AdminController,在这个控制器中添加一个List方法
usingMicrosoft.AspNetCore.Mvc;namespaceAspNetCore.Views.Areas.Sales{publicclassAdminController:Controller{publicIActionResultList(){returnView();}}}
在Program.cs类中添加区域路由
app.MapControllerRoute(name:”myArea”,pattern:”{area:exists}/{controller=Home}/{action=Index}/{id?}”);
运行应用程序并且在浏览器中打开url-https://localhost:7019/Sales/Admin/List，我们会看到一个视图文件没有呈现的错误,ASP.NETCore从下面三个位置搜索视图：
1/Areas/Sales/Views/Admin/Show.cshtml=>如果在这个文件夹下发现文件，该视图将会被呈现,如果没有，则会到第二个位置查找
2/Areas/Sales/Views/Shared/Show.cshtml=>如果在这个文件夹下发现视图，该视图将会被呈现，如果没有，则会到第三个位置查找
3/Views/Shared/Show.cshtml=>如果在这个文件夹下发现视图，该视图将会被呈现，如果没有，则会抛出一个异常
7Layout视图
ASP.NETCore是否内置应用程序的UI或者另外一些技术包含公共部分保持相同，例如：logo区域，头部菜单，左侧导航以及右侧工具链或者底部区域，ASP.NETCore有一个布局视图叫_Layout.cshtml包含公共UI部分，Layout视图必须位于Views->Shared文件夹
注意：如果你的应用程序已经有layout文件，你可以删除它，我们将从头创建一个新的布局文件
我们在Shared文件夹下添加一个新的_Layout.cshtml文件
_Layout.cshtml文件将被创建，我们打开并且编辑它
<!DOCTYPEhtml><html><head><metaname=”viewport”content=”width=device-width”/><title>@ViewBag.Title</title></head><body><div>@RenderBody()</div></body></html>
正如你清楚的看到它包含了HTML代码块使用了一小部分Razor代码像@ViewBag.Title用来设置页面的title，@RenderBody()呈现所有的子视图，不包含Section，让我们先了解Layout是如何工作的
7.1_ViewStart.cshtm文件
Razor视图启动文件是_ViewStart.cshtml文件，位于Views文件夹内，它包含的代码会首先运行，代码比较简单并且告诉dotnet使用_Layout.cshtml作为默认布局文件
@{Layout=”_Layout”;}
如果没有_ViewStart.cshtml这个文件，那么我们需要通过在每个视图上添加以下Razor代码来告诉它们默认布局
@{Layout=Layout;}
因此有这个文件能够移除大量的重复代码，类似的，如果一个应用程序有ViewStart文件，但是不想在视图中应用它，这种情况下在View中添加@{Layout=;}
7.2使用Bootstrap设计Layout
我们可以使用Bootstrap包设计我们页面，首先需要安装Bootstarp包，安装完成，会在wwwroot->lib->bootstrap目录下，我们创建ASP.NETCoreWebApp(Model-View-Controller)模版已经在项目中预先安装Bootstrap
因此我们检查文件夹我们发现它已经安装，现在我们添加3设计部分在_Layout.cshmtl.这些是：
1在页面头部添加bootstrap.min.css样式
2在页面头部添加bootstrap导航菜单链接到应用程序的不同的action方法
3在页面底部添加footer
现在添加一个新的Action方法并且命名为TestLayout，代码如下：
<!DOCTYPEhtml><html><head><metaname=”viewport”content=”width=device-width”/><title>@ViewData[“Title”]</title><linkrel=”stylesheet”href=”~/lib/bootstrap/dist/css/bootstrap.min.css”/></head><body><header><navclass=”navbarnavbar-expand-smnavbar-toggleable-smnavbar-lightbg-whiteborder-bottombox-shadowmb-3″><divclass=”container-fluid”><aclass=”navbar-brand”asp-area=””asp-controller=”Home”asp-action=”Index”>UnderstandingControllersViews</a><buttonclass=”navbar-toggler”type=”button”data-bs-toggle=”collapse”data-bs-target=”.navbar-collapse”aria-controls=”navbarSupportedContent”aria-expanded=”false”aria-label=”Togglenavigation”><spanclass=”navbar-toggler-icon”></span></button><divclass=”navbar-collapsecollapsed-sm-inline-flexjustify-content-between”><ulclass=”navbar-navflex-grow-1″><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”Home”asp-action=”Index”>Home</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”City”asp-action=”Tokyo”>Tokyo</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”City”asp-action=”Nagoya”>Nagoya</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”Home”asp-action=”CallSharedView”>SharedView</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”Example”asp-action=”CallSharedView”>SharedView</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-controller=”Admin”asp-action=”List”>SearchView</a></li><liclass=”nav-item”><aclass=”nav-linktext-dark”asp-area=”Sales”asp-controller=”Admin”asp-action=”List”>AreaView</a></li></ul></div></div></nav></header><divclass=”container”><mainrole=”main”class=”pb-3″>@RenderBody()</main></div><footerclass=”border-topfootertext-muted”><divclass=”container”>ASP.NETCoreSite</div></footer></body></html>
现在我们为我们应用程序创建一个通用页面，现在我们创建一个新的action方法测试TestLayout页面
publicIActionResultTestLayout(){ViewBag.Title=”WelcometoTestLayout”;returnView();}
我们设置ViewBag.Title变量，layout将读取这个值并显示当前页面title
这个View代码比较简单并且包含了2行，这个视图作为_Layout.csthml的子视图来呈现，我们讨论过@RenderBody(),他的主要功能是呈现子视图在_Layout.cshtml文件替换@RenderBody()代码被调用
运行应用程序打开https://localhost:7019/Home/TestLayout如下所示：
@sectionTop{<divclass=”p-3mb-2bg-primarytext-white”>ThisisTop</div>}@sectionBottom{<divclass=”p-3mb-2bg-infotext-white”>ThisisBottom</div>}@sectionScript{<scriptsrc=”https://code.jquery.com/jquery-3.2.1.min.js”></script>}<h2class=”text-primary”>TestLayoutstartshere</h2><pclass=”text-success”>Thistextiscomingfromchildview</p>
这些sections可以包含html和razor代码，在这里我们在顶部和底部添加一些简单的DIV，并且引入了脚本段，接下来在应用程序的_Layout.cshtml文件中添加代码呈现这些段落，我们更新一下_Layout.cshmtl文件代码如下
<!DOCTYPEhtml><html><head><metaname=”viewport”content=”width=device-width”/><title>@ViewData[“Title”]</title><linkrel=”stylesheet”href=”~/lib/bootstrap/dist/css/bootstrap.min.css”/></head><body><header></header>@RenderSection(“Top”);<divclass=”container”><mainrole=”main”class=”pb-3″>@RenderBody()</main></div>@RenderSection(“Bottom”)@RenderSection(“Script”)<footerclass=”border-topfootertext-muted”><divclass=”container”>ASP.NETCoreSite</div></footer></body></html>
运行应用程序并测试：
可选的布局段落虽然在子视图中定义了，但是我们不想用，我们通过一个例子来了解，添加另一个段落调用Ads在layout布局文件中
这里我们没有在TestLayout.cshml视图中定义段落，现在运行应用程序，你将看到未处理的异常：
Layout视图没有在子视图中发现这个段落，我们可以通过在TestLayout.cshtml视图中添加下面代码来修复这个bug
@sectionAds{}
我们也可以通过另外一种方式解决这个错误，确保这个段落在layout页面是可选的，使用这个可选段落dotnet会忽略它如果这个段落没有在子视图中定义
我们使用@RenderSection方法第二个参数，进入Layout页面并且修改@RenderSection(“Ads”)为@RenderSection(“Ads”,false)使这个段落可选
<!DOCTYPEhtml><html><head><metaname=”viewport”content=”width=device-width”/><title>@ViewData[“Title”]</title><linkrel=”stylesheet”href=”~/lib/bootstrap/dist/css/bootstrap.min.css”/></head><body><header></header>@RenderSection(“Top”);<divclass=”container”><mainrole=”main”class=”pb-3″>@RenderBody()</main></div>@RenderSection(“Bottom”)@RenderSection(“Ads”,false);@RenderSection(“Script”)<footerclass=”border-topfootertext-muted”><divclass=”container”>ASP.NETCoreSite</div></footer></body></html>
源代码地址
https://github.com/bingbing-gui/Asp.Net-Core-Skill/tree/master/Fundamentals/AspNetCore.Views/AspNetCore.Views
参考文献
[1]https://www.yogihosting.com/aspnet-core-views/
好了，文章到这里就结束啦，如果本次分享的aspnet打开网站源码分享和asp访问网页源码问题对您有所帮助，还望关注下本站哦！