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

#c# #asp.net

Вопрос:

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

 <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-е и StandardSelector 2-е место.
Вот так:

 <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 элемента управления вместо этого)

1. Используете ли вы ASP.NET MVC с представлениями Razor?

2. @Mads Taanquist — Нет

3. Используйте, например, JavaScript для управления контентом на вашей странице. Вы можете написать директиву, которая отображает содержимое так, как вы хотите, в зависимости от значения, возвращаемого контроллером. Существует много способов управления представлениями с использованием фреймворков на основе JS.

Ответ №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, "\$amp;");
        var regex = new RegExp("[?amp;]"   name   "(=([^amp;#]*)|amp;|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/ /g, " "));
    }

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

Ответ №2:

Один из способов — поместить их на панель и показать тот, который вы хотите, в соответствии со значением строки запроса 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;
            }
        }
    }

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

1. Я хочу поменять элементы управления. Это решение не решает мою проблему.

2. Действительно? Он работал именно так, как вы просили, когда я его запускал. Ваш вопрос — проблема презентации, а не динамическое написание кода.