HTML5技术

从零开始构建一个的asp.net Core 项目(一) - 你好世界_qu

字号+ 作者:H5之家 来源:H5之家 2017-05-07 10:29 我要评论( )

最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程。 首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5)。我们会在页面上看到Hello World!。 既然是从零开始构建的项目,我们需要搞明白这个Hello World!是从哪

最近突发奇想,想从零开始构建一个Core的MVC项目,于是开始了构建过程。

首先我们添加一个空的CORE下的MVC项目,创建完成之后我们运行一下(Ctrl +F5)。我们会在页面上看到“Hello World!”。

既然是从零开始构建的项目,我们需要搞明白这个“Hello World!”是从哪里出现的? 点开我们的项目,我们会看到VS为我们生成了两个类,一个是Program.cs 和startup.cs,和一个空文件夹(wwwroot),除此之外VS在也没有为我们多生成了任何东西。

我们首先从这两个类开始分析,program.cs这个类是不是和console application的program.cs 有点像呢。我们点进去看一下

Program 2 { 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

我们看到有一个这里边就有一个主函数,这里就是主程序的入口。开发过winfrom的人,应该心里都有印象了吧,在winfrom的开发过程中,我们的项目也有一个这样的类,只不过里边最后一行写的是Application.run(),这里是host.run(),这样程序就启动了。我们也看到了 .UseStartup<Startup>()这么一行代码,这里就是用的startup.cs的那个类。

我们打开startup.cs 这个类

Startup 2 { ConfigureServices(IServiceCollection services) 5 { 6 } Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 9 { 10 loggerFactory.AddConsole(); (env.IsDevelopment()) 13 { 14 app.UseDeveloperExceptionPage(); 15 } 16 17 app.Run(async (context) => 18 { ); 20 }); 21 } 22 }

在这里我找到了"Hello World!"的来源了。

于是我又想能不能让它显示一个界面,就像我们生成的MVC项目那样,有个home的界面。

想实现那个效果我们一步一来。 首先我们的每一个View在conroll中对应一个action,这样我们才可以访问到我们的View ,当然在startup.cs中我们需要进行配置相应的服务,进行依赖注入。

那我先建了一个Views文件夹,和Controllers文件夹。在Views文件夹中添加两个界面,一个是_ViewStrart.cshtml 和_ViewImports.cshtml从名字中可以看出他们对应得功能。一个是整个View的起点,另一个是整个view里边添加的引用。

在Views文件夹下创建Share文件夹,共享的文件夹。就是每个View都用的。相当于母版页吧。

这里为了和VS生成的MVC项目一样我在Share文件下添加了一个_Layout.cshtml 文件(名称可以随便起)。

@ViewData["Title"] - WebApplication1Toggle navigationTest_NULLHomeAboutContact @RenderBody() 2017 - WebApplication1

_Layout.cshtml

我在里边引用了Bootstrap.css和BootStrap.js ,juery.js 和site.css

这是site.css,其余三个都可以在相应的网站上下载。这几个文件都在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标签,所以我们在这里需要添加相应的引用。

打开nuget包管理器找到下边这两个包,点击安装就可以了,当然了也可以打开*.csproj文件进行编辑

打开_ViewStrart.cshtml在里边添加,这里说明一下,Layout = "~/Views/Shared/_Layout.cshtml";表示的是默认情况下所有VIew都是用的这个母版页,当然了你也可以在界面中自己重新声明

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

打开_ViewImports.cshtml 在里边添加(这里声明了我所有的view中都可以用Taghelper),写过自定义TagHelper的可能在这里比较明了。*是代表所有 逗号后边表示的是程序集的名称。

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers

下边我们在Views文件夹下添加一个Home文件夹在Home文件夹下添加一个Index.cshtml文件。(这里为了演示一切从简)

@{ ViewData["Title"] = "Index Page"; } 这是测试用的Index页面

由于一个View对应Controller中的一个action,我们要在Controllers文件中添加一个HomeController.cs MVC控制器类(一切从简)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 一个想法照进现实-《IT连》创业项目:创业时该不该用新手程序员 - 路过秋天

    一个想法照进现实-《IT连》创业项目:创业时该不该用新手程序员 - 路

    2017-05-06 15:01

  • VopSdk一个高逼格微信公众号开发SDK - deeround

    VopSdk一个高逼格微信公众号开发SDK - deeround

    2017-05-04 17:02

  • Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

    Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

    2017-05-02 11:00

  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

网友点评
a