在 asp.net mvc (razor) 中重用组件作为自定义文本字段、跨度等答案

【问题标题】：Reusing components as custom text fields, spans etc in asp.net mvc (razor)在 asp.net mvc (razor) 中重用组件作为自定义文本字段、跨度等
【发布时间】：2013-11-20 06:50:54
【问题描述】：

我是一个团队的一员，在一个网站上工作，我们发现自己一遍又一遍地重复使用组件。一个例子是我们有一个用作警示灯的跨度。这背后有一些代码 (C#) 以及一些控制其颜色和文本的属性、一些 Javascript 以及一些自定义 css。

我注意到 Visual Studio 中有一个工具箱，其中包含一些可以拖到我的标记中的基本组件。这是要走的路吗，或者当涉及到这个“问题”时还有其他可能性吗？

如果可能的话，我们希望将一些可重用的组件构建到一个程序集中，以便在需要时在我们的项目中引用，我想分别包括 CSS 和 Javascript（？）

任何关于最佳实践/最实用解决方案/教程的建议都会有所帮助，因为我对 Asp.net MVC 主题相当陌生。

另外，如果这个问题指定不正确，请告诉我。就像我说的......这个世界的新手:)

【问题讨论】：

如果你使用一些现有的丰富的 mvc 控件而不是从头开始构建自己的 html 控件会很好..

标签： c# javascript css asp.net-mvc razor

【解决方案1】：

您可以根据需要选择或组合多种方式。

1。 ASP.NET MVC Html Helpers。

编写充满静态方法的静态类，然后您可以在视图中将其用作帮助器：

public static class HtmlExtensions
{
    public static IHtmlString ErrorMessage(this HtmlHelper html, string msg)
    {            
        return MvcHtmlString.Create("<span class=\"validation-summary-errors\">"+msg+"</span>");            
    }
}

温馨提示：如果您想使用更多 HTML 代码作为助手的输出，您可以对其使用部分视图并返回 if 从助手作为 return html.Partial("ErrorMessageTemplate", msg);

2。剃须刀助手

对于格式化一个视图范围内的特定内容很有用。如果您想要更多的可重用性，请改用 HTML 助手。见：http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

当然，在这两种情况下，您的 javascript 和 CSS 都放在单独的文件中，并通过 jQuery 将它们绑定到元素的类或 ID。忽略这种做法，你迟早会受苦:)

【讨论】：

谢谢！由于我们想做一种方法，有点像 Kendo / Telerik，这似乎是一个很好的起点。

【解决方案2】：

最初，工具箱包含为 ASP.NET 网络表单制作的项目，它们不是为 MVC 制作的。

重用组件：我认为 MVC 最常见的方式是使用局部视图。部分视图也是 cshtml 文件，它们类似于普通视图。可以创建部分视图，例如当您右键单击“视图”文件夹内的文件夹时，通过解决方案资源管理器中的上下文菜单，有一个复选框“创建为局部视图”。区别在于：

它们可以放置在“视图”文件夹中名为“共享”的文件夹中，因此可以在任何视图或操作中轻松重复使用。
他们不使用布局视图
如果操作返回部分视图，则操作的返回类型必须/应该是“PartialViewResult”
在视图中，您可以使用 Html-Helper @Html.Partial() 或 "@{ Html.RenderPartial("Menu");}" 调用它们
它们也可以是强类型的

我这个局部视图可以放置你的 HTML。 CSS 和 JS 代码我将放置在单独的 css 和 js 文件中，并将它们加载到调用局部视图的视图中。

由于您是 MVC 新手，因此我建议您阅读 this 之类的教程。

【讨论】：