あなたの質問はかなり広いです。私のコメント/回答はすべてRazorにあります。私の意見では、MVCに切り替える場合は、Razorを使用することをお勧めします。切り替える理由はたくさんありますが、移行する人にとっては私の一番の選択だと思います。最良の理由は2つあります。最初のかみそりは、プログラミングがWebフォームでどのように機能するかについていくつかの悪い習慣を捨てることを可能にし、同じ方法で、元のコードをコピーして貼り付けてMVCで機能するように変更する代わりに、コードを書き直すことを余儀なくされました。
このコントロールは、ページにJS / CSSを追加し、サーバー側のロジックとカスタムプロパティをいくつか備えています。MVCアプリには何を含める必要がありますか?
これはかなり宗教的なソフトウェアの質問です。それを行う方法はたくさんあります。
それで、MVCにJS/CSSを追加する方法についての私の宗教的な意見に。サーバー側を含める1つの方法は、レイアウト/マスターテンプレートにリージョンを作成することです。
ビュー/_ViewStart.cshtml
@{
Layout = "~/Views/Shared/Layout.cshtml";
}
Views / Shared / Layout.cshtml
<!doctype html>
<head>
<link href="/Styles/Global.css" rel="stylesheet" type="text/css" />
@RenderSection("Styles", required: false)
<script src="/Scripts/Global.js" type="text/javascript"></script>
@RenderSection("Scritps", required: false)
これにより、各ビューrequired=false
でRenderSecionコードを使用してスタイルまたはスクリプトをオプションで追加できるようになります。
Views / Home / Index.cshtml
@section Styles {
<link href="/Styles/Home/Index.css" rel="stylesheet" type="text/css" />
}
これは非常に単純であり、多くの単純なサイトから中程度に複雑なサイトにおそらく適したソリューションです。私はあなたが要求したことをする必要があり、本当に必要な場合にのみファイルを含める必要があったので、これは私にとって十分ではありませんでした。さらに、部分的なビューとテンプレートはセクションをレンダリングできません。これは巨大なPITAであることがわかりました。そこで、HtmlHelper拡張メソッドをいくつか追加しました。(スタイルシートはほぼ同一のコードであるため、Javascriptのコードのみを表示します。これらのメソッドは重複するURLを許可しません。
Domain / HtmlHelperExtensions.cshtml
public static class HtmlHelperExtensions
{
private const string _JSViewDataName = "RenderJavaScript";
private const string _StyleViewDataName = "RenderStyle";
public static void AddJavaScript(this HtmlHelper HtmlHelper, string ScriptURL)
{
List<string> scriptList = HtmlHelper.ViewContext.HttpContext.Items[HtmlHelperExtensions._JSViewDataName] as List<string>;
if (scriptList != null)
{
if (!scriptList.Contains(ScriptURL))
{
scriptList.Add(ScriptURL);
}
}
else
{
scriptList = new List<string>();
scriptList.Add(ScriptURL);
HtmlHelper.ViewContext.HttpContext.Items.Add(HtmlHelperExtensions._JSViewDataName, scriptList);
}
}
public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper)
{
StringBuilder result = new StringBuilder();
List<string> scriptList = HtmlHelper.ViewContext.HttpContext.Items[HtmlHelperExtensions._JSViewDataName] as List<string>;
if (scriptList != null)
{
foreach (string script in scriptList)
{
result.AppendLine(string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", script));
}
}
return MvcHtmlString.Create(result.ToString());
}
}
更新されたViews/Shared / Layout.cshtml
<!doctype html>
<head>
<link href="/Styles/Global.css" rel="stylesheet" type="text/css" />
@Html.RenderStyleSheets()
<script src="/Scripts/Global.js" type="text/javascript"></script>
@Html.RenderJavascripts()
更新されたViews/Home / Index.cshtml
@Html.AddStyleSheet("/Styles/Home/Index.css")
次の質問に...
それらをMVCアプリの1つの再利用可能なエンティティにカプセル化するにはどうすればよいですか?多分部分的なビュー?
Razorは、部分ビューとテンプレートの両方をサポートしています。技術的には、それぞれが実行できることには大きな重複がありますが、プログラマーが必要なときにそれぞれを利用できるようにそれぞれを設計する方法には制限があります。
部分ビューは、レンダリングするためにモデル/クラスを必要としません。これが完全に有効な部分ビューです。
/Views/Home/Index.cshtml
@Html.Partial("Partial-Menu")
/Views/Shared/Partial-Menu.cshtml
<div id="menu">
<a href="/">Home</a>
<a href="/Home/About">About Us</a>
</div>
もう一方のテンプレートには、レンダリングするためにモデルが必要でした。これは、テンプレートが任意のクラスまたは構造体を編集テンプレートまたは表示テンプレートとしてレンダリングする方法であるためです。
/Models/Person.cs
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
/Controllers/HomeController.cs
public ActionResult Index()
{
Person model = new Person();
model.FirstName = "Jon";
model.LastName = "Doe";
return this.View(model);
}
/Views/Home/Index.cshtml
@model Project1.Models.Person
@Html.DisplayModel()
@Html.EditforModel()
/Views/Shared/DisplayTemplates/Person.cshtml
@model Project1.Models.Person
<div>@Html.LabelFor(x => x.FirstName) @Html.DisplayFor(x => x.FirstName)</div>
<div>@Html.LabelFor(x => x.LastName) @Html.DisplayFor(x => x.LastName)</div>
/Views/Shared/EditorTemplates/Person.cshtml
@model Project1.Models.Person
<div>@Html.LabelFor(x => x.FirstName) @Html.EditorFor(x => x.FirstName)</div>
<div>@Html.LabelFor(x => x.LastName) @Html.EditrorFor(x => x.LastName)</div>
私の見方では、データ入力用のフォームに変わる可能性のあるモデルは、おそらくテンプレートである必要があります。これは、モデルをカプセル化する方法です。以前に提供された拡張メソッドを使用すると、必要に応じて部分ビューとテンプレートの両方にインクルードをロードできます(現在、これを使用するために実際に必要なのは、それらのモデルの1つだけです)。
私の好みは、レンダリングされるページごとに(各Javascriptとスタイルの)最大3つのインクルードを持つことです。私は基本的にGlobal.css/js、コントローラーHome.css / js、そして可能な限りページIndex.css/jsを持っています。コントローラーを含めることはめったにありません。