Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记

2016年，.net 会有很多大更新 ASP.NET 5

在此之前我都是用着古老的.net做开发的 (WebForm + IIS)

为了接下来应对 .net 的新功能，我特地去学习了一下基本的 MVC Owin 等等.

接下来我会针对主题写一些学习笔记.

Setup startup Owin + MVC + WebApi

1.New empty project and add folders and code references for "MVC, WebApi".

　注: Empty project 就是什么sample都不要有的, add folders and code references 就是要包括 dll , 这里的 MVC 和 WebApi 都是没有包含Owin概念的，我们需要之后自己加入哦。

2.Install "Microsoft.Owin.Host.SystemWeb" (This is for host in IIS)

3.Install "Microsoft.AspNet.WebApi.Owin" (WebApi for OWIN)

3.Add a Startup.cs file with below code

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Routing;

using Microsoft.Owin;

using Owin; 

[assembly: OwinStartupAttribute(typeof(Project.Startup))]

namespace Project

{

    public partial class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            //MVC

            AreaRegistration.RegisterAllAreas();

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            //WebApi

            var httpConfig = new HttpConfiguration();

            WebApiConfig.Register(httpConfig);

            app.UseWebApi(httpConfig);

        }

    }

}

4.Remove Global.asax

　Startup.cs 就是for Owin 的，我们不再使用 IIS 的 Global.asax 了.

Sample MVC (Model, View and Controller)

微软有一些folders的的结构，我们可以参考 follow

Model,View,Controller 各一个folder

View/Shared 放一些sharing的view

View/Shared/_Layout.cshtml 布局

View/_ViewStart.cshtml 每一个view的初始化

Example for _ViewStart.cshtml

@{

    Layout = "~/Views/Shared/_Layout.cshtml"; //每一个View 都是用 _Layout.cshtml 布局, 这个是可以被overwrite掉了.

}

Example for _Layout.cshtml

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>@ViewBag.Title</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> @*可以直接用 "~/"*@

    @RenderSection("css", required: false) @*RenderSection 可以在子 View 填入内容*@

</head>

<body>

    @RenderBody() @*这个个子 View 内容*@

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    @RenderSection("script", required: false)

</body>

</html>

Controller, Model 与 View 之间的沟通

Example Controller

using System.Collections.Generic;

using System;

using System.Web.Mvc;

using Project.Models;

using System.Threading.Tasks;

namespace Project.Controllers

{

    [RoutePrefix("")]

    public class HomeController : AsyncController //Async 可以for EF await

    {

        [Route("", Name = "Home")]

        public async Task<ActionResult> Index(string param)

        {

            ViewData["attr"] = "value"; //passing value by 字典

            ViewBag.attr = "value"; // passing value by dynamic

            ViewBag.listStr = new List<string> { "a", "b", "c" };

            HomeViewModels homeVM = new HomeViewModels //passing value by ViewModel

            {

                content = "strContent",

                headerViewModels = new HeaderViewModels

                {

                    content = "headerContent"

                }

            };

            return View(homeVM);

        }

    }

}

Example Model

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Project.Models

{

    public class HomeViewModels

    {

        public string content { get; set; }

        public HeaderViewModels headerViewModels { get; set; }

    }

    public class HeaderViewModels

    {

        public string content { get; set; }

    }

}

如果多的话，可以一个ViewModels 一个 file

Example View

@*初始化*@

@{

    ViewBag.title = "Home";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@*setup _Layout.cshtml 的 RenderSection*@

@section css {

    <link href="~/Content/Site.css" rel="stylesheet" />

}

@section script {

    <script src="~/Scripts/jquery.validate.js"></script>

}

@*setup ViewModels*@

@model Project.Models.HomeViewModels

<div>

    <p>Home</p>

    @*渲染一个 partial view*@

    @Html.Partial("~/Views/Shared/PartialView/header.cshtml", @Model.headerViewModels);  

    <br />

    <p>passing value by 字典 : @ViewData["attr"]</p>

    <p>passing value by dynamic : @ViewBag.attr</p>

    @*looping*@

    @foreach (string str in ViewBag.listStr)

    {

        <p>@str</p>

    }

    @for (int i = ; i < ViewBag.listStr.Count; i++)

    {

        <p>@i</p>

    }

    @*create Link*@

    <a href="@Url.RouteUrl("Home",new { param = "param" })">Home</a>

    <br />

    @Html.ActionLink("Home", "Index", "Home", new { param = "param" }, null)

</div>

题外话 :

关于 App_Code

以前我是用 website 而不是 project 来开发的，这2者对 App_Code 有点区别

在 project App_Code 创建好 .cs 文件之后，要把属性 -> Build Action 设置成 Compile

关于 SSL

设置成 SSL, 去project 的属性 -> SSL Enabled = true, 然后 right click -> 属性 -> Web -> 把 project url 换成 SSL 的路径

WebApi + AngularJS

如果要使用 OData filter 的话，应该是要装 Microsoft.AspNet.WebApi.OData

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

namespace Project.WebApiControllers

{

    [RoutePrefix("api/products")]

    public class ProductsController : ApiController

    {

        [Route("")]

        public IEnumerable<string> Get()

        {

            return new string[] { "value1", "value2" };

        }

    }

}

@{

    Layout = null;

}

<!DOCTYPE html>

<html ng-app="app" ng-controller="ctrl">

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Products</title>

</head>

<body>

    <script src="~/Scripts/jquery-2.2.0.min.js"></script>

    <script src="~/Scripts/angular.min.js"></script>

    <script>

        var app = angular.module("app", []);

        app.controller("ctrl", function ($http) {

            $http({

                url: "https://localhost:44300/api/products",

                method: "GET"

            }).then(function (response) {

                console.log(response);

            });

        });

    </script>

</body>

</html>

WebApi + OData v4

Install "Microsoft.AspNet.OData"

change WebApiConfig to

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Http;

using System.Web.OData.Batch;

using System.Web.OData.Builder;

using System.Web.OData.Extensions;

using Microsoft.OData.Edm;

using Project.Entity;

namespace Project

{

    public static class WebApiConfig

    {

        private static IEdmModel GetEdmModel()

        {

            ODataConventionModelBuilder builder = new ODataConventionModelBuilder();

            builder.Namespace = "Project";

            builder.ContainerName = "ProjectContainer";

            //每一个Entity都要注册到EDM

            //注意 : 下面这个 "products" 是url prefix, e.g. api/products... 而且OData url 是区分大小写的哦

            builder.EntitySet<Product>("products");

            return builder.GetEdmModel();

        }

        public static void Register(HttpConfiguration config)

        {

            // Web API configuration and services

            // Web API routes

            config.MapHttpAttributeRoutes();

            //config.Routes.MapHttpRoute(

            //    name: "DefaultApi",

            //    routeTemplate: "api/{controller}/{id}",

            //    defaults: new { id = RouteParameter.Optional }

            //);

            //"api" 是 url prefix

            config.MapODataServiceRoute("OData", "api", GetEdmModel(), new DefaultODataBatchHandler(GlobalConfiguration.DefaultServer));

            config.EnsureInitialized();

        }

    }

}

change WebApiController to

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.OData;

using System.Web.OData.Routing;

using Project.Entity;

namespace Project.WebApiControllers

{

    [ODataRoutePrefix("products")] //这个"products"要对应注册EDM的值哦 , e.g. builder.EntitySet<Product>("products")

    public class ProductsController : ODataController

    {

        [ODataRoute("")]

        public IHttpActionResult Get()

        {

            return Ok(new List<Product> { new Product { id = , code = "code" } });

        }

    }

}

Web.config 要放 ExtensionlessUrlHandler 主要是为了处理 url 的 "."

这里我用的和微软官网有点不同，因为微软的放了，static file 会出现500 error

refer : http://blogs.msdn.com/b/davidhardin/archive/2015/01/13/odata-action-gets-404-due-to-periods-in-url.aspx

<configuration>

 <system.webServer>

    <handlers>

      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />

      <remove name="OPTIONSVerbHandler" />

      <remove name="TRACEVerbHandler" />

      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="/api/*" verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

    </handlers>

  </system.webServer>

</configuration>

Install EntityFramework

在 WebConfig 加入

<configuration>

  <connectionStrings>

    <add name="DefaultConnection" connectionString="data source=192.168.1.95;Network Library=DBMSSOCN;initial catalog=HotelPlatform;persist security info=True;user id=keatkeat;password=001001;multipleactiveresultsets=True;application name=EntityFramework" providerName="System.Data.SqlClient" />

  </connectionStrings>

</configuration>

data source = IP

catalog= Database Name

password = 需要encode for xml

删除掉

<defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">

  <parameters>

    <parameter value="mssqllocaldb" />

  </parameters>

</defaultConnectionFactory>

identity + oauth 2.0 待续

Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记的更多相关文章

Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记之"坑"
1.AngularJS route 与 MVC route http://www.cnblogs.com/usea/p/4211989.html public class SingleRoute : ...
体验Visual Studio 2015 之 MVC - 视图组建
VS2015 PERVIEW中可以创建MVC 项目. 我们可以发现有几大亮点. 首先我们看目录结构: 当前项目包含两个主要的文件夹:Solution Items .src 很明显src文件夹下为当前 ...
Visual Studio 2015 新建MVC项目 Package Manager Console不能使用 (HRESULT: 0x80131500)
Visual studio 2015 突然新建不了MVC项目,报出错误: HRESULT: 0x80131500 在折腾了很长时间,最后在Github上看到这样一个贴地址:https://githu ...
visual studio 2015中的webapi生成helpPage，页面不显示方法说明问题解决
环境: vs2015.win7 参考:http://www.cnblogs.com/Erik_Xu/p/5638381.html 生成的help页面如下:,并没有显示控制器和方法. 原因是:新建项目时 ...
升级 Visual Studio 2015 CTP 5 的坑、坑、坑
前两天,微软发布了 Visual Studio 2015 CTP 5,全称为 Visual Studio 2015 Community Technology Preview 5,意为社区技术预览版,之 ...
visual studio 2015 搭建python开发环境，python入门到精通[三]
在上一篇博客Windows搭建python开发环境,python入门到精通[一]很多园友提到希望使用visual studio 2013/visual studio 2015 python做demo, ...
使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
Visual Studio 2015创建ASP.NET MVC流程
本文链接:https://blog.csdn.net/begindong/article/details/68059437本人这两天第一次对c#进行系统学习,写出来做个学习记录和大家分享,以下有什么错 ...
Visual Studio 2015打开ASP.NET MVC的View提示"Object reference not set to an instance of an object"错误的解决方案
使用Visual Studio 2013打开没有问题,但Visual Studio 2015打开cshtml就会提示"Object reference not set to an insta ...

随机推荐

JMeter学习资料
JMeter User Manual: http://jmeter.apache.org/usermanual/index.html JMeter Componet reference: http:/ ...
[置顶] Putty管理私钥文件
openssh中,ssh_keygen产生的私钥,id_rsa这种密钥putty是不认识的,必须先把它转换成ppk格式, Windows上如果你安装了git,它里面bin目录下就有ssh_keygen ...
ubuntu进入命令登录界面
按ctrl+alt+F1或者ctrl+alt+F2进入系统终端,可以以命令行界面登录系统.
在终端(Terminal)里用命令行进行数学运算
有时候我们进行一些数学运算,我们会去开系统自带的计算来做这件事情,其实我们也可以直接在终端里面用命令行进行的. 在命令行里敲 bc 进入数学计算模式,然后随便输入数学表达式回车 ,结果就出来了,是不 ...
Apache配置HTTPS协议搭载SSl配置全过程
1.首先要开启相应的扩展和辅助的dll(ssleay32.dll,libeay32.dll)到system32下 2.生成服务器证书安装好在bin目录下有一个openssl.exe文件,用来生成证书 ...
struts2，hibernate，spring整合笔记(2)
上一话struts2,hibernate,spring整合笔记(1) 接下来继续配置完struts之后就要开始hibernate的配置 hibernate的环境并不依赖web开发环境,在我第一次配置 ...
Android 连接Wifi和创建Wifi热点 demo
android的热点功能不可见,用了反射的技术搞定之外. Eclipse设置语言为utf-8才能查看中文注释上代码: MainActivity.java package com.widget.hot ...
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性
这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...
jQuery幻灯插件：Nivo Slider
使用步骤 1.引入css文件 default.css 设置展示插件所需的样式,像控制导航键,导航按钮样式,当然你可以自己写个样式 nivo-slider控制图片样式,插件所需的CSS文件 <li ...
git变基、冲突解决
参考git rebase 版本..变基 git冲突解决先fetch,pull,如果文件冲突,手动处理冲突文件,然后再fetch,pull,发现拉不下来,这时需要将文件改为已合并,然后提交文件具体操作 ...

Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记

Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记的更多相关文章

随机推荐

热门专题