将bootstrap设计添加到webforms

Question

我有一个用asp webforms(.net 4.0)编写的旧项目.它使用不同的webforms服务器控件,如TextBox等.

有一个用Bootstrap编写的设计.

客户希望将"webforms上的旧项目"与"bootstrap design"结合起来.

可能吗？我在这里看到一个问题:webforms服务器控件生成自己的html代码,因此无法直接使用类似bootstrap的设计.问题是 - 如何处理这个问题,如何克服这个问题？

我没有看到一个很好的解决方案,只有重写服务器控件,如果它们不适合自举需求.是否有任何广泛使用的类似Bootstrap的Web窗体控件？

Answer 1

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

Bootstrap网格

• 这可能是整合到现有系统中最简单的部分.由于大多数现有Web窗体项目都使用表格进行布局,因此您可以查看使用响应表来控制表格的布局.
• 或者,您可以使用Bootstrap Grid类为基于布局重写表.

HTML输入字段

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

• 您也可以为按钮执行此类操作,但您的选项范围更广.

• 对于Checkboxes和Radiobuttons,确实没有一种好的方法可以自动执行此操作.您必须手动修改这些控件的HTML.

即使使用上述选项,每页也会进行一定程度的手动编辑.

这是我们目前要在新项目上实施的计划,所以祝你好运.

编辑评论中的问题

修改复选框和单选按钮的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的响应表控件.