twitter-bootstrap 用于 Visual Studio 2012 的 Bootstrap MVC4 脚手架

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15076612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:29:53  来源:igfitidea点击:

Bootstrap MVC4 scaffolding for Visual Studio 2012

twitter-bootstrapasp.net-mvc-4visual-studio-2012

提问by Rosdi Kasim

I am developing a ASP.NET MVC4 application in Visual Studio 2012. I am also using twitter bootstrap.

我正在 Visual Studio 2012 中开发 ASP.NET MVC4 应用程序。我也在使用 twitter bootstrap。

Whenever I generate a new Controller, VS2012 will automatically generate default CRUD pages for me, which is nice.

每当我生成一个新的 Controller 时,VS2012 都会自动为我生成默认的 CRUD 页面,这很好。

However I am getting tired modifying the pages so that the DIVs are laid out the way bootstrap needs it.

但是,我已经厌倦了修改页面,以便按照引导程序需要的方式布置 DIV。

Is there a VS2012 plugin that help generate these views the way bootstrap expects it to be?

是否有 VS2012 插件可以帮助按照引导程序期望的方式生成这些视图?

Here is a sample div generated by VS2012.

这是 VS2012 生成的示例 div。

<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

.. and I will manually change it to be...

.. 我会手动将其更改为...

<div class="editor-label control-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
    <div class="editor-field controls">
        @Html.EditorFor( model => model.Name, "CustomTemplate", 
                                     new { @class = "input-xlarge" })
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

回答by nemesv

ASP.NET MVC uses T4 templatesto scaffold Views (and also Controllers) through the Add View and Add Controller dialogs.

ASP.NET MVC 使用T4 模板通过添加视图和添加控制器对话框来搭建视图(以及控制器)。

You can easilly customize these templates with your custom Bootsrtap markup.

您可以使用自定义 Bootsrtap 标记轻松自定义这些模板。

You just need to copy the CodeTemplatesdirectory from (the path can be different on your machine depending on the installed OS, VS, and ASP.NET MVC version)

您只需要从中复制CodeTemplates目录(根据安装的操作系统、VS 和 ASP.NET MVC 版本,您的机器上的路径可能会有所不同)

c:\Program Files (x86)\
    Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4

Inside your MVC project under a CodeTemplatesdirectory and they are ready for customization.

CodeTemplates目录下的 MVC 项目中,它们已准备好进行自定义。

Here is good step by step guide on the process: Modifying the default code generation/scaffolding templates in ASP.NET MVC

以下是该过程的分步指南:修改 ASP.NET MVC 中的默认代码生成/脚手架模板

If you want to take the scaffolding one step further I suggest that you check out the MVC.Scaffoldingproject which has more features than the built in one.

如果您想将脚手架更进一步,我建议您查看MVC.Scaffolding项目,该项目比内置的功能更多。

Or because you are looking for customization targeting Bootstrap you can check out the twitter.bootstrap.mvcproject (intro blog post)

或者因为您正在寻找针对 Bootstrap 的自定义,您可以查看twitter.bootstrap.mvc项目(介绍博客文章

Some of its features:

它的一些特点

  • Runtime Scaffolding – default Index, Edit and Detail views.. You provide the POCOs and we will render the CRUD views.
  • MVC code templates to generate new views from the mvc add view / add controller dialogs
  • 运行时脚手架——默认的索引、编辑和细节视图。您提供 POCO,我们将呈现 CRUD 视图。
  • MVC 代码模板从 mvc 添加视图/添加控制器对话框生成新视图

The custom MVC Code Templates (still a work in progress) are available in a separate nuget packge:

自定义 MVC 代码模板(仍在进行中)在单独的 nuget 包中可用:

PM> Install-Package twitter.bootstrap.mvc4.templates