将 HTML Div 代码转换为控件

Question

我有一堆 HTML 代码用于在我的控件上制作圆边框。有没有办法把这段代码变成某种控件或其他东西，这样我就不必在我所做的每件事周围粘贴 10 行 HTML 代码？

<div id="BottomBody">
    <div class="box1024" >
        <div class="content1024">
            <div class="top1024"></div>
            <h1>My Header Information</h1>
            <hr />
            <p>Some text for everyone!</p>
        </div>
        <div class="bottom1024">
            <div></div>
        </div>
    </div>
</div>

另外需要注意的是，在最里面的 DIV 中使用的数字 HTML 标签会根据我在网站中使用它的位置而改变。所以在某些情况下，我只会有 1 个标签和 1 个

标签，但在其他情况下，我可以有 1 个标签，1 个

标签、3 个标签和一个 HTML 表格。我怎样才能做到这一点？

Answer 1

是的，您正在考虑UserControl。提取相关的 HTML，将其粘贴到 UserControl .ascx 模板中。

现在，在您的情况下，您可能希望文本可自定义，对吗？因此，您需要将 <h1> 到 </p> 位替换为 ASP.NET 标签。生成的 .ascx HTML（不包括 @Control 指令）将如下所示：

<div id="BottomBody">
    <div class="box1024" >
        <div class="content1024">
            <div class="top1024"></div>
            <asp:Label runat="Server" id="label1" />
        </div>
        <div class="bottom1024">
            <div></div>
        </div>
    </div>
</div>

或者，您可以制作两个标签——一个用于标题，一个用于正文。或者甚至只是将标题设置为 runat="Server" 本身。

接下来，您将在 .ascx 代码隐藏文件中编写一些代码，以公开标签（或标签，视情况而定）Text 属性。这可能看起来像：

public string Text
{
    get { return label1.Text; }
    set { label1.Text = value; }
}

如果您在 ASP.NET MVC 世界中，请使用您的 Model 数据而不是标签，并传入所需的显示文本 string 作为模型数据。

编辑

解决问题的更新：

还有一点需要注意，即 内部使用的数字 HTML 标签 大多数 DIV 将根据 我在我的网站中使用它的地方。所以在一些 情况下我只有 1 个标签和 1 个

tag 但在其他情况下我可以有 1 标记，1

标签、3 个标签和一个 HTML 表格。怎么能 我能做到吗？

完全相同的技术，假设您所指的内容是 <div class="content1024"> 中的内容。标签的Text 属性可以包含任何所需的任意 HTML，当然，如果您使用 MVC，您可以将任意数量的 HTML 作为字符串传递给模型。

Answer 2

另一种左侧字段方法 - 创建一个用户控件，但为您使用 jQuery to round 角：

<div class="roundcorner">
    <h1>My Header Information</h1>
    <hr />
    <asp:Label runat="Server" id="label1" />
</div>

在 javascript 中发出以下命令：

$(document).ready(function(){
   $('div.roundedcorner').corner();
 });

这消除了所有额外的 div，并且您仍然可以在服务器上随意使用用户控件。

Answer 3

（我知道有人会为此惹上麻烦）

如果它只是静态内容，你可以把它放在一个单独的文件中，然后INCLUDE它

<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->

（文件名、扩展名和位置任意）