基于C#网页开发：如何通过母版页按钮切换表单？

嘿，我懂你这种卡在母版页按钮切换表单的郁闷！之前帮好几个开发者排查过类似问题，给你几个实用的实现方案，你可以根据自己的需求挑：

如果你的表单是在不同的ASPX页面里，直接通过母版页按钮的点击事件触发页面跳转就行，简单直接：

母版页前端代码： #

<asp:Button ID="btnGoToForm1" runat="server" Text="切换到表单1" OnClick="btnGoToForm1_Click" />
<asp:Button ID="btnGoToForm2" runat="server" Text="切换到表单2" OnClick="btnGoToForm2_Click" />

母版页后台C#代码： #

protected void btnGoToForm1_Click(object sender, EventArgs e)
{
    // 跳转到表单1页面
    Response.Redirect("Form1.aspx");
}

protected void btnGoToForm2_Click(object sender, EventArgs e)
{
    // 跳转到表单2页面
    Response.Redirect("Form2.aspx");
}

如果所有表单都在同一个内容页里，用JavaScript直接控制表单容器的显示/隐藏，不用回发服务器，体验更好：

母版页前端按钮： #

<button onclick="switchToForm('form1-container')">切换到表单1</button>
<button onclick="switchToForm('form2-container')">切换到表单2</button>

母版页/内容页的JavaScript： #

function switchToForm(targetId) {
    // 先隐藏所有表单容器
    document.querySelectorAll('.form-container').forEach(container => {
        container.style.display = 'none';
    });
    // 显示目标表单
    document.getElementById(targetId).style.display = 'block';
}

内容页的表单容器： #

<div class="form-container" id="form1-container">
    <!-- 表单1的所有控件 -->
    <asp:TextBox ID="txtName1" runat="server"></asp:TextBox>
    <asp:Button ID="btnSubmit1" runat="server" Text="提交表单1" />
</div>

<div class="form-container" id="form2-container" style="display:none;">
    <!-- 表单2的所有控件 -->
    <asp:TextBox ID="txtName2" runat="server"></asp:TextBox>
    <asp:Button ID="btnSubmit2" runat="server" Text="提交表单2" />
</div>

注意：如果内容页的控件是服务器控件（带runat="server"），渲染后的ID会被ASP.NET修改，你可以用<%= txtName1.ClientID %>来获取真实的前端ID，或者在ASP.NET 4.0+里设置ClientIDMode="Static"让ID保持不变。

ASP.NET自带的MultiView控件专门用来做页面内的视图切换，配合母版页按钮非常方便：

内容页的MultiView代码： #

<asp:MultiView ID="mvForms" runat="server" ActiveViewIndex="0">
    <!-- 第一个视图：表单1 -->
    <asp:View ID="ViewForm1" runat="server">
        <h3>表单1</h3>
        <asp:TextBox ID="txtForm1Input" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmitForm1" runat="server" Text="提交" />
    </asp:View>
    <!-- 第二个视图：表单2 -->
    <asp:View ID="ViewForm2" runat="server">
        <h3>表单2</h3>
        <asp:TextBox ID="txtForm2Input" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmitForm2" runat="server" Text="提交" />
    </asp:View>
</asp:MultiView>

母版页按钮及后台代码： #

<asp:Button ID="btnSwitchToForm1" runat="server" Text="切换到表单1" OnClick="btnSwitchToForm1_Click" />
<asp:Button ID="btnSwitchToForm2" runat="server" Text="切换到表单2" OnClick="btnSwitchToForm2_Click" />

protected void btnSwitchToForm1_Click(object sender, EventArgs e)
{
    // 找到内容页的ContentPlaceHolder容器
    ContentPlaceHolder contentHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
    if (contentHolder != null)
    {
        // 找到MultiView控件
        MultiView formViews = contentHolder.FindControl("mvForms") as MultiView;
        if (formViews != null)
        {
            // 切换到第一个视图（索引从0开始）
            formViews.ActiveViewIndex = 0;
        }
    }
}

protected void btnSwitchToForm2_Click(object sender, EventArgs e)
{
    ContentPlaceHolder contentHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
    if (contentHolder != null)
    {
        MultiView formViews = contentHolder.FindControl("mvForms") as MultiView;
        if (formViews != null)
        {
            formViews.ActiveViewIndex = 1;
        }
    }
}

关键提醒：一定要通过ContentPlaceHolder去查找内容页的控件，因为母版页和内容页的控件不在同一个命名容器里，直接找mvForms会返回null哦！

内容的提问来源于stack exchange，提问作者Matt