public class Startup { ... // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseHsts(); } app.UseHttpsRedirection(); app.UseMvc(); app.UseStaticFiles(); //追加 } }
[Route("api/[controller]")] [ApiController] public class ValuesController : ControllerBase { // GET api/values [HttpGet] public ActionResult<IEnumerable<string>> Get() { return new string[] { "value1", "value2" }; } // POST api/values [HttpPost] public void Post([FromBody] string id) { } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="button" value="click" onclick="get()" /> <input type="button" value="post" onclick="post()" /> <script> function get(){ var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { console.log("GET: 通信成功"); } else { console.log("GET: 通信失敗"); } } }; httpRequest.onload = function () { console.log("GET: 通信完了"); }; httpRequest.open("GET", "api/values", true); httpRequest.send(null); } function post() { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { console.log("POST: 通信成功"); } else { console.log("POST: 通信失敗"); } } }; httpRequest.onload = function () { console.log("POST: 通信完了"); }; httpRequest.open("POST", "api/values", true); httpRequest.setRequestHeader('Content-Type', 'application/json'); httpRequest.send(JSON.stringify("id=abc")); } </script> </body> </html>
<style> .parent { position: relative; display: flex; justify-content: center; border: black solid 1px; padding: 20; } .item { display: flex; margin: 3px; padding: 15px; border: black solid 1px; } .menu { position: absolute; right: 0; margin: 3px; padding: 15px; border: black solid 1px; } </style>
<div class="parent"> <div class="item">メインアイテム</div> <div class="item">メインアイテム</div> <div class="menu">メニュー</div> </div>
function myTest() { const promise = new Promise((resolve, reject) => { setTimeout(() => { console.log('スタート'); //処理が成功したら、resolve を呼ぶ。 resolve('1つ目の処理'); }, 1000); }); promise.then((message) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(message); resolve('2つ目の処理'); //エラーの場合、resolve ではなく reject を呼ぶ。 // reject('xxx'); }, 300); }) }).then((message) => { return new Promise((resolve, reject) => { console.log(message); console.log('3つ目の処理'); }) }).catch((error) => { // エラーの場合 console.error('エラー', error); }); }
.header{ background: lightpink; height: 40px; width: 100%; } .parent{ display: flex; flex-direction: column; width: 100%; height: 90vh; } .main{ background: lightblue; height: 50%; } .sidebar{ background: lightseagreen; height: 50%; } @media screen and (min-width : 768px) { /* デスクトップ用 CSS */ .parent{ flex-direction: row; } .main{ flex: 1; height: 100%; } .sidebar{ width: 250px; height: 100%; } }
<div class="header">header</div> <div class="parent"> <div class="main">item 1</div> <div class="sidebar">item 2</div> </div>
.list { display: flex; } .list-item { flex: 1 1; border: solid cadetblue 1px; }
<div class="list"> <div class="list-item">item 1</div> <div class="list-item">item 2</div> <div class="list-item">item 3</div> </div>
.list { display: flex; flex-direction: column; } .list-item { flex: 1 1; border: solid cadetblue 1px; }
<div class="list"> <div class="list-item">item 1</div> <div class="list-item">item 2</div> <div class="list-item">item 3</div> </div>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> .bottom { position: fixed; bottom: 0px; background: red; height: 40px; width: 100px; } </style> </head> <body> <div class="bottom">テキスト</div> </body> </html>
<p> <input type="button" value="toggle flag" (click)="toggleFlag()"> </p> <div #ifBlock *ngIf="flag; else elseBlock"> This is ifBlock </div> <ng-template #elseBlock> Here is elseBlock. </ng-template>
export class IfComponent implements OnInit { flag: boolean; constructor() { } ngOnInit() { this.flag = true; } toggleFlag(){ this.flag = !this.flag; } }TypeScript の flag 変数の値に応じて表示します。flag 変数の値が true のときは #ifBlock のある div タグが、false のときは #elseBlock のある ng-template の中が表示されます。
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //属性ルーティングの有効化 routes.MapMvcAttributeRoutes(); //"Home" や "Home/Index" にアクセスする必要がなければ削除 //routes.MapRoute( // name: "Default", // url: "{controller}/{action}/{id}", // defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } //); } }
public class ArticlesController : Controller { [Route("~/")] [Route("Articles")] [Route("Articles/Index")] public ActionResult Index() { return View(); } }
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //MyRoute を追加。コントローラー名を指定していないリクエストは、Articles コントローラーで捕捉 routes.MapRoute( "MyRoute", "{action}/{id}", new { controller = "Articles", action = "Index", id = UrlParameter.Optional } ); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } }
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API の設定およびサービス ... //json を返す //https://stackoverflow.com/a/13277616 config.Formatters.JsonFormatter.SupportedMediaTypes .Add(new MediaTypeHeaderValue("text/html")); } }
public class ProductsController : ApiController { ... public HttpResponseMessage Get() { IList<IProduct> products = _rep.GetAll(); //モデルリストから JSON に変換 //Content Negotiation in ASP.NET Web API //https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/content-negotiation#serialization return Request.CreateResponse(HttpStatusCode.OK, products); } }
