ASP.NET MVCフレームワーク学習#1:最初のMVCプロジェクトの作成

27927 ワード

前言

仕事のためASPに接触する.NET MVCフレームワークは、私にとって全く新しいもので、最も基本的な概念から学ぶ必要があります.

MVCとは?

MVCは、Model、View、およびControlの3つの部分から構成される.Model:システム全体の論理演算、データベース、データモデルなどの関連部分を担当します.View:ビューに関連するすべての部分を担当します.Controller:modelからデータを取得し、どのViewを表示するかを決定します.

注目点分離：Seperation of Concerns

SoCとは、あなたが開発を行っている間に、現在のオブジェクトの上だけに注目することができ、一度に1つの比較的理解しやすい部分だけに注目することができ、他のオブジェクトの妨害を受けず、他のオブジェクトの動作にも影響を与えず、MVCの中で非常に重要な開発原則である.常に覚えておいてください.

Helloworld

VSをインストールして、どんなバージョンに関わらず、必ずMVCを含みます.

VSを開き、MVCのWEBプロジェクトを新規作成します.

Ctrl+F 5実行してみる~~~~最初のページができた

キーディレクトリおよびファイル

MVCフレームワークはデフォルトのネーミングに基づいており、すべてのMVCアプリケーションのフォルダ名は等しい.コントローラはControllersフォルダ、ビューはViewsフォルダ、モデルはModelsフォルダにあります.標準化されたネーミングはコード量を減らし、MVCプロジェクトに対する開発者の理解に役立つ.この点はとても重要です!!!

App_Dataフォルダ:App_Dataフォルダは、アプリケーションデータを格納するために使用されます.

Contentフォルダ:Contentフォルダは、スタイルシート(CSSファイル)、グラフ、画像などの静的ファイルに使用されます.

Modelsフォルダ:Modelsフォルダには、アプリケーションモデルを表すクラスが含まれています.モデルには、アプリケーションのデータが格納され、操作されます.

Controllersフォルダ:ユーザーの入力と応答を処理するコントローラクラスが含まれます.MVCは、すべてのコントローラファイルの名前を「コントローラ」で終わるように要求する.

Viewsフォルダ:Viewsフォルダには、アプリケーション表示(ユーザインタフェース)に関するファイル(HTMLファイル)が格納されています.

~/Views/shared/_Layout.cshtml

ファイル_Layout.cshtmlは、アプリケーション内の各ページのレイアウトを表します.


<html>
<head>
	<meta charset="utf-8" />
	<title>@ViewBag.Titletitle>
	
	<span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
	<script src="@Url.Content("~/Scripts/modernizr-2.8.3.min.js")"><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>@Html.ActionLink("Home", "Index", "Home")<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>@Html.ActionLink("Movies", "Index", "Movies")<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>@Html.ActionLink("About", "About", "Home")<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
		@RenderBody()
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>@DateTime.Now<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p><strong>HTML   </strong></p> 
  <pre><code class="prism language-html">@Url.Content() - URL        。
@Html.ActionLink() - HTML        。
</code></pre> 
  <p><strong>Razor  </strong></p> 
  <pre><code class="prism language-Razor">@ViewBag.Title -          。
@RenderBody() -         。
</code></pre> 
  <h3>~/Content/Site.css</h3> 
  <p>   Site.css         html   </p> 
  <pre><code class="prism language-css"><span class="token selector">body</span>
<span class="token punctuation">{</span>
<span class="token property">font</span><span class="token punctuation">:</span> <span class="token string">"Trebuchet MS"</span>, Verdana, sans-serif<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #5c87b2<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #696969<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h1</span>
<span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 3px solid #cc9900<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> Georgia, serif<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #996600<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#main</span>
<span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 0 4px 4px 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a</span>
<span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> #034af3<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>

<span class="token comment">/*      ------------------------------*/</span>
<span class="token selector">ul#menu</span>
<span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul#menu li</span>
<span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul#menu li a</span> 
<span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #e8eef4<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 2.8em<span class="token punctuation">;</span>
<span class="token comment">/*CSS3 properties*/</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px 4px 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul#menu li a:hover</span>
<span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 

<span class="token comment">/*      ------------------------------*/</span>
<span class="token selector">fieldset</span>
<span class="token punctuation">{</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 

<span class="token selector">fieldset label</span>
<span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">input[type="text"], input[type="password"]</span>
<span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">input[type="submit"]</span>
<span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/*      ------------------------------*/</span>
<span class="token selector">table.data</span>
<span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #c3c3c3<span class="token punctuation">;</span>
<span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">table.data th</span>
<span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>#e8eef4<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #c3c3c3<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">table.data td</span> 
<span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #c3c3c3<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h3>~/Controllers/    </h3> 
  <p>Controllers                      。<font color="red">MVC               “Controller”   。</font></p> 
  <p>web            URL                 。  ：   URL   （   “http://www.w3school.com.cn/index.asp”）               “index.asp”。</p> 
  <p>MVC            。MVC   URL      ，          <strong>Controller</strong>。</p> 
  <p><strong>Controller</strong>         、    、    、          。</p> 
  <p>     ，<strong>     </strong>  </p> 
  <blockquote> 
   <p>~/Controllers/HomeController.cs</p> 
  </blockquote> 
  <pre><code class="prism language-c#">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcDemo.Controllers {
	public class HomeController : Controller {
		public ActionResult Index() { return View(); }
		public ActionResult About() { return View(); }
	}
}
</code></pre> 
  <p>           ：<strong>Index</strong> <strong>About</strong>，            ：</p> 
  <blockquote> 
   <p>~/Views/Home/Index.cshtml<br> ~/Views/Home/About.cshtml</p> 
  </blockquote> 
  <h3>~/Views/    </h3> 
  <p>Views               （    ）     （HTML   ）。</p> 
  <p>       ，            html、asp、aspx、cshtml    vbhtml。</p> 
  <table> 
   <thead> 
    <tr> 
     <th>    </th> 
     <th>   </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td> HTML</td> 
     <td>.htm or .html</td> 
    </tr> 
    <tr> 
     <td>  ASP</td> 
     <td>.asp</td> 
    </tr> 
    <tr> 
     <td>  ASP.NET</td> 
     <td>.aspx</td> 
    </tr> 
    <tr> 
     <td>ASP.NET Razor C#</td> 
     <td>.cshtml</td> 
    </tr> 
    <tr> 
     <td>ASP.NET Razor VB</td> 
     <td>.vbhtml</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li><font color="red">Home                         （    ）。</font></li> 
   <li><font color="red">  ，  Controller Views         。</font></li> 
   <li><font color="red">Shared                 （       ）。</font></li> 
   <li><font color="red">~/Views/ _ViewStart         ：</font><pre><code class="prism language-html">@{Layout = "~/Views/Shared/_Layout.cshtml";}
</code></pre>                       。<br>        ，              。</li> 
  </ul> 
  <h4>~/Views/Home/Index.cshtml</h4> 
  <p>Index.cshtml            。</p> 
  <pre><code class="prism language-html">@{ViewBag.Title = "Home Page";}
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>     <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>         <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre> 
  <h4>~/Views/Home/About.cshtml</h4> 
  <p>About.cshtml            。</p> 
  <pre><code class="prism language-html">@{ViewBag.Title = "Home Page";}
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>     <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>         <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>  ，   MVC        。</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1293108933229092864"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">

興味があるかもしれません

株の分析に注意しなければならない主な要素は何ですか?
飛ぶ奇抜な豚
株価分析雲掌株でしょう

【Scala 18】ビュー定義とコンテキスト定義
bit1129
scala

C言語の分岐——Object-Cプログラム設計読解有感
darkblue086
apple c フレーム cocoa

表の単一値に対するブラウザの記憶を削除
周凡楊
html メモリー autocomplete form ブラウズ

JAvaのツリー通信録
g21121
java

Nginxインストールの導入
510888780
nginx linux

JAva servelet非同期処理要求
塀の上に草が1本ある
ｊａｖａひどうきふっきｓｅｒｖｌｅｔ

私のspring学習ノート8-SpringでのBeanのインスタンス化
aijuans
Spring 3

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号

Redis Cluser

redisの紹介と構成の詳細、redis-benchmak圧力測定ツール、reids-cliテストステータスツール