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本ある
    java ひどうきふっき servlet
  • 私の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号