制作一个简单的 Umbraco MVC 应用程序
4.50/5 (5投票s)
如何使用 Umbracos CMS。
引言
这是一个关于如何使用一些基本数据模型制作一个基本CMS应用程序的基本教程。
背景
我在工作时接到一项任务，学习一个开源的CMS框架。我发现Umbraco是在Visual Studio中设置最简单的。
使用代码
代码将向您展示如何从Nuget获取Umbraco，在解决方案中设置必要的文件夹，以及如何使用Umbraco的后端。我选择制作一个涵盖元素周期表中元素的应用程序。选择元素周期表的原因是我可以设置一些类和类列表作为模型中的数据。我可能在分类超铀锕系元素时犯了一些错误，但我从来都不是化学专业的！
Start
程序的第一个部分是在Visual Studio中加载一个空的Web应用程序。
打开空解决方案后，您需要转到“工具”菜单，打开“Nuget包管理器”，运行“包管理器控制台”，并在控制台行中输入以下代码行。
Install-Package UmbracoCms -Version 7.4.3
这将加载Umbraco所需的内容。解决方案看起来仍然是空白的，或者您可能只看到您的引用增加了。停止应用程序并转到解决方案资源管理器，单击“显示所有文件”。解决方案资源管理器应该看起来有点像下面的图片。
在项目中包含App_Data和两个Umbraco文件夹。为了良好的实践，为Umbraco创建一个数据库，因为您需要在设置中配置一个数据库。我刚刚将一个'mdf'文件添加到App Data文件夹中。添加数据库并包含两个Umbraco文件夹后，重新启动项目。
解决方案文件夹
Umbraco登录
重启后，第一个屏幕将是如下所示的登录屏幕
在此屏幕上创建您的登录详细信息，然后按“自定义”，您将进入数据库屏幕，并使用连接字符串选项输入您的数据库连接字符串。
Umbraco数据库设置
设置数据库后，您将看到一个安装入门工具包的屏幕。是否选择安装完全由您决定。建议您在第一个应用程序中使用其中一个入门工具包，因为您会得到一个非常简单的应用程序，您可以拆解并重新构建，从而了解这个框架是如何工作的。
通过使用入门套件，组件已就位，您可以从此处开始构建。
对应用程序外观最关键的文件夹在Views文件夹中。
视图文件夹
Master是您的主要html模板文件，该master渲染两个局部视图，分别用于顶部导航栏和底部导航栏（如上所示）。
如果您选择了Fanoe Starter Kit，主页面会相当大，页面顶部看起来像这样
主页和局部视图
在局部视图中渲染的底部导航栏看起来像这样。
上面的页面是主页，要编辑此页面并创建新的主页，我们现在需要访问我们的设置和内容区域。
要访问内容和设置，您需要在浏览器地址栏中添加对Umbraco目录的引用来更改地址。地址栏应如下所示：https://:'您的端口号'/umbraco。
您的设置屏幕最初看起来像这样
内容页面
Umbraco导航
在侧边导航栏上，我有所有选项来创建和管理内容，橙色的“U”是修改用户Umbraco设置的区域。
页面图标是应用程序的内容面板。用户将在此处创建内容。
在“内容”下方是“媒体”面板，用户可以在其中为应用程序内容添加必要的媒体。
在“媒体”下方是扳手/扳手图标，它是“设置”区域。这是用户可以创建我们希望创建的内容的文档类型和模板的地方。
齿轮/齿轮图标是一个开发者区域，本文不予介绍。
人物图标是用户区域，允许管理员为那些设置为使用内容管理系统的人设置用户设置。
在安装时，您默认被设置为管理员。用户部分将允许您设置希望对用户施加的权限和限制。
最后两个图标是“成员”和“表单”，超出了本文的范围。
内容编辑
在内容面板上，有两个列表项，一个是回收站，另一个是主页项。点击主页图标后，主页内容会显示并变得可编辑。下图显示了一个横幅对象和两个富文本编辑器，其中包含应用程序提供的给定内容。
清除所有内容，只留下横幅对象的空框架。要删除或更改内容，只需单击您希望修改的区域，内容对象和删除框就会出现。最后一个内容对象下方还有一个加号图标，允许您添加更多行内容。
修改后的内容
如果您预览更改，新内容应该看起来像这样。
内容已渲染
我们上面看到的内容是我们的两个导航渲染视图和我们的主要内容，我们正在慢慢将其剥离以进行重建。下一个任务是为主页添加一些内容，然后修改导航栏。
更改导航栏
修改主页内容后，我需要访问内容面板上的主页，并删除主页下方的所有内容，以便应用程序只剩一个页面。您只需将鼠标悬停在主页下方的页面上，右键单击最右侧的设置点，然后按删除，页面就会消失，菜单也会变为空白。
在主页上，您可能会注意到一张背景图片，这可以通过回到主页横幅对象的内容区域，点击横幅对象上的设置齿轮来移除，图片会在屏幕的最右侧。有一个红色的“X”图标，点击它即可移除图片。现在页面应该有一个纯白色的背景。
主页清理的最后一部分是整理底部导航中的“查找我们”内容。此内容位于底部导航局部视图中。Div的内容应该被删除；这可以在“视图”文件夹下的“局部视图”子文件夹中完成，或者在“设置”面板下的“局部视图”中完成。
<div class="col-xs-6 col-sm-3">
<strong>Find us</strong>
<ul>
<li>
<a href="https://twitter.com/umbracoproject" target="_blank">Twitter</a>
</li>
<li>
<a href="https://#/Umbraco" target="_blank">Facebook</a>
</li>
<li>
<a href="http://umbraco.com/?utm_source=core&utm_medium=starterkit&utm_content=topic-link&utm_campaign=fanoe" target="_blank">Umbraco.com</a>
</li>
</ul>
</div>
主页
对于主页，我将描述元素周期表的元素类别。我使用了来自洛斯阿拉莫斯实验室的每个类别的描述。
网址在此：http://periodic.lanl.gov/index.shtml
在横幅标题中添加一个标题，只需点击标题即可。在标题下方的3列中，我添加了一些富文本编辑器，并放入了每种元素类型的描述。我参考了这里的描述。加载页面后，图像将具有一个CSS类，转到浏览器中的检查元素并记下CSS类及其行号。您可以在设置的“样式表”部分或应用程序的CSS文件夹中找到CSS文件。使用此方法，您可以在CSS中导航以进一步自定义应用程序。
http://periodic.lanl.gov/metal.shtml
将内容添加到Banner列后，需要点击Banner对象下方的添加按钮，并根据需要不断添加内容格式。在此应用程序中，我将重复三列的行内容，直到包含所有元素类型的描述。
设置添加页面
上方的菜单是添加页面的关键，这些页面会成为内容。“主页”文档类型已设置为根目录。设置为根目录后，我可以将此文档类型及其子节点添加为内容。
创建子页面
在“设置”菜单中，我需要右键单击“主页”右侧的三个点，然后按“创建”，并选择“文档类型”。这将创建一个带有网格布局、模板和相应cshtml文件的页面。
模板出现后，转到页面顶部并为页面命名。
命名文档后，保存文档类型。然后我们需要转到Home文档类型权限区域，并将此页面添加为Home的子页面。
在此之后，需要返回“内容”区域，右键单击“主页”旁边的三个点，然后打开“创建”选项。您应该能够在“内容”中创建此文档类型的实例。
点击新的文档类型，您应该会看到下面的屏幕。
这应该重复，直到您涵盖元素周期表的所有元素类型。
您应该会剩下很多空白的局部视图。这些局部视图现在将用于从模型和控制器中继数据以显示元素类型。为此，我们需要创建我们的模型和控制器。
模型
对于模型，我需要在应用程序中添加一个文件夹，控制器也是如此。
为此，创建了3个元素类别，第一个类别称为“化学”，如下所示。该类别只包含一些关于元素的基本信息。之所以有额外的类别，是因为当我处理较重的元素时，其中一些属性不存在。由此产生了AtomTM类别。锕系元素类别也被分为两部分，因为它有一些较重的元素不具备所有其他元素的全部属性，此外，某些元素具有超铀特性，而另一些则没有。
namespace periodicTable.Models
{
public class Chemical
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public double atomicRadius { get; set; }
public double meltingPoint { get; set; }
public double boilingPoint { get; set; }
public string radioactive { get; set; }
}
}
namespace periodicTable.Models
{
public class Actinides
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public double atomicRadius { get; set; }
public double meltingPoint { get; set; }
public double boilingPoint { get; set; }
public string radioactive { get; set; }
public string transuranium { get; set; }
}
}
namespace periodicTable.Models
{
public class AtomTM
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public string transUranium { get; set; }
}
}
在类之后，我创建了另外两个类，它们是类的列表，为视图中的表格提供数据。这些列表成为模型，并为表格提供数据。
public List<Chemical> GetAlkMetal()
{
var elements = new List<Chemical>
{
new Chemical
{
name = "Lithium",
atomicNumber = 3,
atomicSymbol = "Li",
atomicWeight = 6.94,
atomicRadius = 181,
meltingPoint = 180.5,
boilingPoint = 1342,
radioactive = "No"
},
new Chemical
{
name = "Sodium",
atomicNumber = 11,
atomicSymbol = "Na",
atomicWeight = 22.99,
atomicRadius = 227,
meltingPoint = 97.8,
boilingPoint = 883,
radioactive = "No"
},
new Chemical
{
name = "Potassium",
atomicNumber = 19,
atomicSymbol = "K",
atomicWeight = 39.10,
atomicRadius = 275,
meltingPoint = 65.5,
boilingPoint = 759.0,
radioactive = "No"
},
new Chemical
{
name = "Rubidium",
atomicNumber = 37,
atomicSymbol = "Rb",
atomicWeight = 85.47,
atomicRadius = 303,
meltingPoint = 39.3,
boilingPoint = 688,
radioactive = "No"
},
new Chemical
{
name = "Cesium",
atomicNumber = 55,
atomicSymbol = "Cs",
atomicWeight = 132.9,
atomicRadius = 343,
meltingPoint = 28.5,
boilingPoint = 671.0,
radioactive = "No"
},
new Chemical
{
name = "Francium",
atomicNumber = 87,
atomicSymbol = "Fr",
atomicWeight = 223.0,
atomicRadius = 348,
meltingPoint = 27.0,
boilingPoint = 677.0,
radioactive = "Yes"
}
};
return elements;
}
public List<Actinides> GetActinides()
{
var elements = new List<Actinides>
{
new Actinides
{
name = "Actinium",
atomicNumber = 89,
atomicSymbol = "Ac",
atomicWeight = 227.0,
atomicRadius = 260,
meltingPoint = 1051.0,
boilingPoint = 3198.0,
radioactive = "Yes",
transuranium ="No"
},
new Actinides
{
name = "Thorium",
atomicNumber = 90,
atomicSymbol = "Th",
atomicWeight = 232.0,
atomicRadius = 237,
meltingPoint = 1750.0,
boilingPoint = 4788.0,
radioactive = "Yes",
transuranium ="No"
};
return elements;
}
public List<AtomTM> getTransUAnticide()
{
var elements = new List<AtomTM> {
new AtomTM {
name = "Einsteinium",
atomicNumber = 99,
atomicSymbol = "Es",
atomicWeight = 252.0,
transUranium = "Yes"
},
new AtomTM {
name = "Fermium",
atomicNumber = 100,
atomicSymbol = "Fm",
atomicWeight = 257.0,
transUranium = "Yes"
},
new AtomTM {
name = "Mendelevium",
atomicNumber = 101,
atomicSymbol = "Md",
atomicWeight = 258.0,
transUranium = "Yes"
},
new AtomTM {
name = "Nobelium",
atomicNumber = 102,
atomicSymbol = "No",
atomicWeight = 259.0,
transUranium = "Yes"
},
new AtomTM {
name = "Lawrencium",
atomicNumber = 103,
atomicSymbol = "Lr",
atomicWeight = 262.0,
transUranium = "Yes"
}
};
return elements;
}
控制器 (Controller)
控制器与常规控制器有一个主要区别，即我们不是从Asp.net继承Controller类，而是从Umbraco继承Surface Controller。每个元素类型都有一个ActionResult，所有这些都返回一个Partial View到页面。返回有两个参数，第一个是Partial View的名称，第二个是将发送到Partial View的模型。
using periodicTable.Models;
using Umbraco.Web.Mvc;
namespace periodicTable.Controllers
{
public class ChemicalController : SurfaceController
{
// GET: Chemical
public ActionResult Actinides()
{
Elements list = new Elements();
List<Actinides> actinides = list.GetActinides();
return PartialView("actinideTable", actinides);
}
public ActionResult SynthActinides()
{
atomicTMElements list = new atomicTMElements();
List<AtomTM> synthAnticides = list.getTransUAnticide();
return PartialView("artAnticideTable", synthAnticides);
}
}
}
视图
该视图是在我创建文档类型时生成的，它使用主页面并包含一个HTML动作，用于将局部视图放置到页面中。布局使用主文件，这样我们就可以在整个网站中进行导航。我还必须添加对控制器的访问。当页面首次创建时，UmbracoTemplate会添加对模型对象的引用，格式为<'ContentModels.xxxx'>。
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.AlkaliMetals>
在此项目中，<'ContentModels.xxxx'>可以删除。
此外，我们没有在视图中使用网格布局，因为我们没有调用主页中调用的@CurrentPage.GetGridHtml("content", "fanoe")。如果需要添加网格内容，可以调用此方法，但在本应用程序中不需要，因为我们正在渲染局部视图作为内容。
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using periodicTable.Controllers
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = "Master.cshtml";
}
<div class="container">
<h1>Actinides</h1>
@Html.Action("Actinides", "Chemical")
<h3>Synthetic Actinides</h3>
@Html.Action("SynthActinides", "Chemical")
</div>
部分视图
//Actinide Table
@using periodicTable.Models
<table class="elementsTable">
<tr>
<th>Element Name</th>
<th>Atomic Symbol</th>
<th>Atomic Number</th>
<th>Atomic Weight</th>
<th>Atomic Radius</th>
<th>Melting Point</th>
<th>Boiling Point</th>
<th>Radioactivity</th>
<th>Transuranium</th>
</tr>
@foreach (var chem in @Model)
{
<tr>
<td class="elD">@chem.name</td>
<td>@chem.atomicSymbol</td>
<td>@chem.atomicNumber</td>
<td>@chem.atomicWeight</td>
<td>@chem.atomicRadius pm </td>
<td>@chem.meltingPoint C</td>
<td>@chem.boilingPoint C</td>
<td>@chem.radioactive</td>
<td>@chem.transuranium</td>
</tr>
}
</table>
//synthetic anticide table
@using periodicTable.Models
<table class="elementsTable">
<tr>
<th>Element Name</th>
<th>Atomic Symbol</th>
<th>Atomic Number</th>
<th>Atomic Weight</th>
<th>Transuranium</th>
</tr>
@foreach (var chem in @Model)
{
<tr>
<td class="elD">@chem.name</td>
<td>@chem.atomicSymbol</td>
<td>@chem.atomicNumber</td>
<td>@chem.atomicWeight</td>
<td>@chem.transUranium</td>
</tr>
}
</table>
//
除了主页，代码是通过将数据引入应用程序而生成的。应用程序真正需要的只是来自用户的模型和控制器代码，然后生成的数据可以在Umbraco框架内使用。
//
参考文献
https://www.youtube.com/watch?v=e7UeXUtpjck&list=PLLYO0Qmbv5pvGjpI6Cyg3mVBoYtG_LK63&index=9
http://umbraco.com/
关注点
我了解到，在Visual Studio中，与Orchard和DotNetNuke相比，这是最容易设置的CMS系统。
历史
在此处保持您所做的任何更改或改进的实时更新。