动态自定义用户控件的 UI答案

【问题标题】：Dynamicaly Customize the UI of a User Control动态自定义用户控件的 UI
【发布时间】：2015-08-14 22:34:36
【问题描述】：

我想根据条件动态更改 ASP.NET 用户控件 UI 中元素的位置。例如：- 这是我的用户控件的正常布局@

现在我想根据条件重新定位编辑按钮，如下所示。

我可以考虑以下方法，但不确定它们是否是最好的方法。

我们可以在我的用户控件的所需位置创建一个按钮，然后根据此条件显示该按钮并隐藏原始按钮。所以用户控件将在 UI 中有两个按钮（一个内联，另一个在新行中）。根据我的情况，我分别显示或隐藏它们。
创建另一个用户控件并使用它。

但我想这个小小的改动有点矫枉过正有没有比我能想到的最知名的方法/更好的解决方案来处理这种类型任何建设性的意见都会有所帮助。

【问题讨论】：

标签： c# asp.net user-controls

【解决方案1】：

您可以创建两个按钮，一个在我的用户控件的所需位置，一个在目标位置。第一个按钮默认显示为块，第二个按钮默认显示为无。根据您的情况，您可以更改第一个按钮和第二个按钮的类以使第一个按钮隐藏，第二个按钮将显示为块。这是一个例子：

来源：

<style>
    .HideButton {
        display: none;
    }

    .ShowButton {
        display: block;
    }
</style>

<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                <td>
                    <asp:Button ID="Button1" runat="server"  Text="Button" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button CssClass="HideButton" ID="Button2" runat="server" Text="Button />
                </td>
                <td">&nbsp;</td>
            </tr>
        </table>
    </div>     
</form>

在后面的代码中：

if (something)
            {
                Button1.CssClass = "HideButton";
                Button2.CssClass = "ShowButton";
            }

另一种解决方案是更改 td 标签的 innerHTML 如下：

来源：

<form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                    <td id="DesiredLocation" runat="server"><input type="button" value="button1" /></td>
                </tr>
                <tr>
                    <td id="TargetLocation" runat="server"></td>
                    <td"></td>
                </tr>
            </table>
        </div>     
    </form>

在 aspx 代码中：

if (something)
            {
            TargetLocation.InnerHtml = DesiredLocation.InnerHtml;
            DesiredLocation.InnerHtml = "";
            }

希望这项工作。

【讨论】：

顺便说一句，我在帖子中显示的下拉菜单和按钮不在连续的新行中，那里几乎没有隐藏的 div。其次，我只想按照 IF 语句而不是事件中的描述更改 UI。
思路是一样的。您可以使用 if 语句代替事件。我会更新答案。
:"You can use one button" 你指的是编辑按钮还是一个全新的按钮？如果它是一个新的，那么它类似于我的方法 1，而不是我们使用样式，对吗？如果它是一个现有的，这个CSS如何找出现有按钮的目标位置。
不只是使用一个按钮。不要创建新的。这个想法很简单。使用一个按钮并根据您想要的条件将位置更改为您想要的任何位置。使用 element 的 ID 将使 css 能够找到你想要的元素并添加你想要的样式
这里Button是一个元素，我们需要放置按钮的表格单元格就是目标位置。我们可以根据 ID 向元素添加样式，但是 CSS 如何将按钮（元素）从一个位置移动到另一个位置，这让我感到困惑