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 ...

随机推荐

[Java Concurrent] 并发访问共享资源的简单案例
EvenGenerator 是一个偶数生成器,每调用一个 next() 就会加 2 并返回叠加后结果.在本案例中,充当被共享的资源. EvenChecker 实现了 Runnable 接口,可以启动新 ...
POJ3422 Kaka's Matrix Travels 【最大费用最大流】
Kaka's Matrix Travels Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8006 Accepted: ...
【Unity3D自我记录】解决NGUI通过问题触发事件点
在虚拟现实的游戏开发或当,人们功能操作,人们走一下地面行动.但随后点击界面button什么时候,会不会触发click事件.这是通过点.当然,点击界面button当相同的触发点接地运行操作,样也是点透 ...
Java实现BASE64编解码
Java实现BASE64编解码作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs BASE64和其它类似的编码算法通经常使用于转换二进制数据为文本数据,其目 ...
大数据笔记06：大数据之Hadoop的HDFS（文件的读写操作）
1. 首先我们看一看文件读取: (1)客户端(java程序.命令行等等)向NameNode发送文件读取请求,请求中包含文件名和文件路径,让NameNode查询元数据. (2)接着,NameNode返回 ...
PV和并发
几个概念网站流量是指网站的访问量,用来描述访问网站的用户数量以及用户所浏览的网页数量等指标,常用的统计指标包括网站的独立用户数量.总用户数量(含重复访问者).网页浏览数量.每个用户的页面浏览数量.用 ...
html01基本标签
01. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
php单例模式深入讲解
避免多次初始化数据库连接DAO 需要多次初始化数据库连接的场景场景1: 首先PHP单例模式我觉得只是针对单次页面级请求时出现多个应用场景并需要共享同一对象资源时是非常有意义的一个类A需要调用多个类 ...
C#获取磁盘列表与信息
方法1:使用Environment //获取当前计算机逻辑磁盘名称列表 String[] drives = Environment.GetLogicalDrives(); Console.WriteL ...
Android学习手记(1) Activity跳转
新建Project,并将主页命名为MainActivity. 创建一个Activity 在App上“右键->New->Activity->Empty Activity”, 将新建的A ...

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 学习笔记的更多相关文章

随机推荐

热门专题