Dynamicaly Настройка пользовательского интерфейса пользовательского элемента управления

Question

Я хочу изменить положение элементов в пользовательском интерфейсе пользовательского интерфейса ASP.NET динамически на основе состояния. Например: Вот нормальный макет моего пользовательского контроля

Теперь я хочу переместить кнопку «Изменить», как показано ниже, на основе условия.

Я могу думать о следующих подходах, но не уверен, что они являются хорошим и лучшим способом сделать это.

1. Мы можем создать кнопку в нужном месте моего пользовательского элемента управления, а затем Показать эту кнопку на основе этого условия и скрыть исходную кнопку. Таким образом, пользовательский элемент управления будет иметь две кнопки в пользовательском интерфейсе (один Inline и другой в новой строке). Исходя из моего состояния, я показываю или скрываю их соответственно.
2. Создайте еще один элемент управления пользователями и используйте его.

Но я думаю, для этого небольшого изменения в своем роде, самоубийственной Есть ли какие наиболее известные методы/лучшее решение там обрабатывать такого рода, чем то, что я могу думать о Любой конструктивный вклад поможет.

Answer 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"; 
      } 

Другим решением является изменение 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 = ""; 
      } 

Надеюсь, что эта работа.