ASP.NET MVCフレームワーク学習#1:最初のMVCプロジェクトの作成
前言
仕事のためASPに接触する.NET MVCフレームワークは、私にとって全く新しいもので、最も基本的な概念から学ぶ必要があります.
MVCとは?
MVCは、Model、View、およびControlの3つの部分から構成される.Model:システム全体の論理演算、データベース、データモデルなどの関連部分を担当します.View:ビューに関連するすべての部分を担当します.Controller:modelからデータを取得し、どのViewを表示するかを決定します.
注目点分離:Seperation of Concerns
SoCとは、あなたが開発を行っている間に、現在のオブジェクトの上だけに注目することができ、一度に1つの比較的理解しやすい部分だけに注目することができ、他のオブジェクトの妨害を受けず、他のオブジェクトの動作にも影響を与えず、MVCの中で非常に重要な開発原則である.常に覚えておいてください.
Helloworld
MVCは、Model、View、およびControlの3つの部分から構成される.Model:システム全体の論理演算、データベース、データモデルなどの関連部分を担当します.View:ビューに関連するすべての部分を担当します.Controller:modelからデータを取得し、どのViewを表示するかを決定します.
注目点分離:Seperation of Concerns
SoCとは、あなたが開発を行っている間に、現在のオブジェクトの上だけに注目することができ、一度に1つの比較的理解しやすい部分だけに注目することができ、他のオブジェクトの妨害を受けず、他のオブジェクトの動作にも影響を与えず、MVCの中で非常に重要な開発原則である.常に覚えておいてください.
Helloworld
キーディレクトリおよびファイル
MVCフレームワークはデフォルトのネーミングに基づいており、すべてのMVCアプリケーションのフォルダ名は等しい.コントローラはControllersフォルダ、ビューはViewsフォルダ、モデルはModelsフォルダにあります.標準化されたネーミングはコード量を減らし、MVCプロジェクトに対する開発者の理解に役立つ.この点はとても重要です!!!
~/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">
興味があるかもしれません
飛ぶ奇抜な豚
株価分析雲掌株でしょう
bit1129
scala
darkblue086
apple c フレーム cocoa
周凡楊
html メモリー autocomplete form ブラウズ
g21121
java
510888780
nginx linux
塀の上に草が1本ある
java ひどうきふっき servlet
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号