基於Asp.Net Core Mvc和EntityFramework Core 的實戰入門教程系列-1

來個目錄吧:
第一章-入門
第二章- Entity Framework Core Nuget包管理
第三章-建立、修改、刪除、查詢
第四章-排序、過濾、分頁、分組
第五章-遷移,EF Core 的codefirst使用
暫時就這麼多。後面陸續更新吧css

本系列文章爲翻譯加上我我的的使用心得理解,但願幫助熱愛學習的程序員。html

珍重聲明:本系列文章會跟原文有點出入,去掉了羅裏吧嗦的文字。

原文:Getting started with ASP.NET Core MVC and Entity Framework Core using Visual Studiojquery

2017-3-7 22:01:58這個時間是我開始翻譯本系列的時間也是vs2017發佈會的時間。祝願.Net Core愈來愈好git

前言

Contoso 大學示例項目是一個 基於Visual Studio 2015開發,使用技術是.net core 1.0mvc與EntityFramework Core1.0。
功能說明:
本程序是一個虛構的Contoso大學網站,他包含了招生、課程管理、老師管理等功能。這是一個系列教程,講述若是從零開始構建一個Contoso大學程序。程序員

EF Core1.0 是EF的最新版本,可是他沒有具有全部的EF6.X的功能。(譯者注: 因此大家用的時候本身遇到的坑要本身填)github

系統必備組件:

  • Visual Studio 2017 (譯者注:咱們確定用2017了啊是否是)
  • .Net Core 1.1web

    Contoso 大學 Web程序

如下爲正文,原做者羅裏吧嗦的話語我就不說了。基本就是用戶能夠查看和修改學生、課程、老師的信息。
如下是截圖:ajax

Paste_Image.png

Paste_Image.png

爲了本教程能夠集中主要精力介紹如何使用EntityFramework,網站的用戶界面樣式都是基於VS2015內置的模板生成的頁面內容。bootstrap

建立一個ASP.NET Core MVC的項目

我都用VS2017 RTM開發了。mvc

打開Visual Studio 2017並建立一個新的ASP.NET Core MVC項目,取個名字:「ContosoUniversity」。

  • 文件菜單中,選擇新建項目
  • 從左邊窗口中選擇Web
  • 選擇ASP.NET Core Web Application (.NET Core)項目
  • 輸入「ContosoUniversity」做爲名稱而且點擊肯定

老外耐心就是好,寫的這麼詳細一點都不嫌累

Paste_Image.png

而後點擊更改身份驗證爲不進行身份驗證,取消在雲中託管,而後點擊肯定

這裏能夠選擇.NETCORE 1.1

Paste_Image.png

若是你不當心點了啓用身份認證的話,那麼就把 項目刪除了吧。Microsoft Identity的模塊我空了,抽空在單獨翻譯翻譯吧,如今咱們繼續。

修改下網站的佈局和風格

簡單調整下菜單佈局、首頁視圖信息

打開 路徑爲「Views/Shared/_Layout.cshtml 」

  • 修改下標題名稱「ContosoUniversity」 爲「Contoso University」
  • 添加菜單導航視圖信息,Students,Courses,Instructors和Departments而後刪除Contant菜單
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Contoso University</title> 

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <div 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">Contoso University</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="Students" asp-action="Index">Students</a></li>
                    <li><a asp-area="" asp-controller="Courses" asp-action="Index">Courses</a></li>
                    <li><a asp-area="" asp-controller="Instructors" asp-action="Index">Instructors</a></li>
                    <li><a asp-area="" asp-controller="Departments" asp-action="Index">Departments</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© 2016 - Contoso University</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>

在 路徑「Views/Home/Index.cshtml」,Home視圖中替換爲如下代碼信息

@{
    ViewData["Title"] = "Home Page";
}

<div class="jumbotron">
    <h1>Contoso University</h1>
</div>
<div class="row">
    <div class="col-md-4">
        <h2>Welcome to Contoso University</h2>
        <p>
            Contoso University is a sample application that
            demonstrates how to use Entity Framework Core 1.0 in an
            ASP.NET Core MVC 1.0 web application.
        </p>
    </div>
    <div class="col-md-4">
        <h2>Build it from scratch</h2>
        <p>You can build the application by following the steps in a series of tutorials.</p>
        <p><a class="btn btn-default" href="https://docs.asp.net/en/latest/data/ef-mvc/intro.html">See the tutorial »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Download it</h2>
        <p>You can download the completed project from GitHub.</p>
        <p><a class="btn btn-default" href="https://github.com/aspnet/Docs/tree/master/aspnet/data/ef-mvc/intro/samples/cu-final">See project source code »</a></p>
    </div>
</div>

而後按鍵CTRL+F5,運行項目進入調試模式。你能夠看到主頁頁面的變化

Paste_Image.png

相關文章
相關標籤/搜索