Как поменять местами два элемента управления asp.net на стороне клиента зависят от ситуаций?

Question

В моем проекте у меня есть страница с именем EduStandardCoursManager, которые зависят от типа строки запроса, отправленной на страницу, показывают другую реакцию.
В EduStandardCoursManager у нас есть два элемента управления (courseSelector,standardSelector) что если строка запроса отправлена ​​StandardID Я хочу StandardSelector место 1-го и CourseSelector место 2nd.
Как это:

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="type" name="standardSelector" placeholder="StandardSelector" value="" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="type" name="courseSelector" placeholder="CourseSelector" value="" /> 
 
    </td> 
 
    </tr> 
 
</table>

И если строка запроса отправлено CourseID Я хочу CourseSelector место 1-го и 2-го StandardSelector место.
Как это:

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="type" name="courseSelector" placeholder="CourseSelector" value="" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="type" name="standardSelector" placeholder="StandardSelector" value="" /> 
 

 
    </td> 
 
    </tr> 
 
</table>

Есть ли способ, чтобы изменить эти элементы управления зависят от типа строки запроса?
(вместо этого я не буду устанавливать 4 управления)

Answer 1

Здесь вы идете, изменение ваш HTML для добавления идентификатора в ваши строки

<table> 
    <tr id="courseSelectorRow"> 
     <td> 
      Course<input type="text" name="courseSelector" placeholder="CourseSelector" value="" /> 
     </td> 
    </tr> 
    <tr id="standardSelectorRow"> 
     <td> 
      Standard<input type="text" name="standardSelector" placeholder="StandardSelector" value="" /> 
     </td> 
    </tr> 
</table> 

И добавить этот фрагмент кода JavaScript, вы должны иметь JQuery ссылки на страницу

<script> 
    function getParameterByName(name, url) { 
     if (!url) url = window.location.href; 
     name = name.replace(/[\[\]]/g, "\\$&"); 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
      results = regex.exec(url); 
     if (!results) return null; 
     if (!results[2]) return ''; 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
    } 

    var standardID = getParameterByName('StandardID'); 
    if(standardID && standardID != '') 
    { 
     $("#standardSelectorRow").insertBefore("#courseSelectorRow"); 
    } 
</script> 

Answer 2

Один из способов - поместить их в панель и отобразить нужную в соответствии с значением QueryString OnLoad.

 <asp:Panel ID="StandardID" runat="server" Visible="false"> 

      <table> 

       <tr> 
        <td> 
         <input type="type" name="standardSelector" placeholder="StandardSelector" value="" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="type" name="courseSelector" placeholder="CourseSelector" value="" /> 
        </td> 
       </tr> 
      </table> 
     </asp:Panel> 

     <asp:Panel ID="CourseID" runat="server" Visible="false"> 
      <table> 
       <tr> 
        <td> 
         <input type="type" name="courseSelector" placeholder="CourseSelector" value="" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="type" name="standardSelector" placeholder="StandardSelector" value="" /> 
        </td> 
       </tr> 
      </table> 
     </asp:Panel> 

А вот код позади:

public string foobar; 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     if (Request.QueryString["foo"] != null) 
     { 
      foobar = Request.QueryString["foo"]; 

      if (foobar == "CourseID") 
      { 
       StandardID.Visible = false; 
       CourseID.Visible = true; 
      } 
      else 
      { 
       StandardID.Visible = true; 
       CourseID.Visible = false; 
      } 
     } 
    } 

Вот результаты при изменении QueryString: