将引导设计添加到 Web 表单

Question

我有一个用 asp webforms (.net 4.0) 编写的相当古老的项目。它使用不同的 webforms 服务器控件，如 TextBox 等。

有一个用 Bootstrap 编写的设计。

而客户想要将“webforms 上的旧项目”与“bootstrap design”结合起来。

有可能吗？我这里看到一个问题：webforms服务器控件生成自己的html代码，所以不能直接使用类似bootstrap的设计。问题是——如何处理这个问题，如何克服这个问题？

我没有看到一个好的解决方案，只有在它们不适合引导程序需要时才重写服务器控件。是否有任何广泛使用的类似 Bootstrap 的 Web 表单控件？

Answer 1

要问的第一个问题是客户希望使用 Bootstrap 的哪一部分？

引导网格

• 这可能是整合到现有系统中最简单的部分。由于大多数现有的 Web 表单项目都使用表格进行布局，您可以看看使用响应式表格来控制表格的布局。
• 或者，您可以考虑使用 Bootstrap Grid 类重写表格以实现基础布局。

HTML 输入字段

• 对于<input>, <textarea>, and <select> 输入字段，我建议您在基本页面中创建一个函数，该函数会自动将所需的引导类添加到控件中。默认情况下，这将是“表单控制”类。作为起点，您可以考虑在 Page.Init 事件期间执行此操作。

• 您也可以对按钮执行类似操作，但您的选择范围更大。

• 对于复选框和单选按钮，确实没有自动执行此操作的好方法。您必须手动修改这些控件的 HTML。

即使有上述选项，每个页面都会有一定程度的手动编辑。

这是我们目前要在一个新项目上实施的计划，所以我祝你好运。

---

编辑 cmets 中的问题

修改复选框和单选按钮的 HTML。我的意思是，您至少必须添加一个<div class="checkbox"></div> 来环绕<asp:checkbox> 控件。下面是 Bootstrap 推荐的 html。

  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>

请注意，我不建议您编写自己的服务器控件，尽管这始终是一种选择。

是的，使用 Page_Init 就可以了。在代码方面，我会使用以下内容

For each control in this.Controls
   if control is textbox or control is textarea or control is select then
      control.CssClass = "form-control"
  end if
Next

对于像 GridView 或 ListView 这样的控件，它们会生成 html 表格。因此，您可以为它们使用 Bootstrap 的响应式表格控件。