如何在客户端交换两个asp.net控件取决于情况？

Question

在我的项目中，我有一个名为EduStandardCoursManager的页面，它取决于发送到页面的查询字符串的类型，显示不同的反应。
在EduStandardCoursManager我们有两个控件(courseSelector,standardSelector)，如果发送了StandardID的查询字符串，我想StandardSelector放置第一个，CourseSelector放置第二个。
像这样：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果发送了CourseID的查询字符串，我想CourseSelector位于第1位，StandardSelector位于第2位。
像这样：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有没有办法根据查询字符串类型更改这些控件？
（我不会放置4个控件）

Answer 1

在这里，您可以更改HTML以将ID添加到您的行

<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时的结果：