c# - 多 View 刷新页面并丢失 ASP.NET Webform 中的数据

Question

我在 ASP.NET Web 表单中使用多 View 时遇到问题。我正在构建一个表单，在同一页面上，用户应在第一个表单中上传他的头像，在第二个表单上，用户应输入个人资料信息并上传文档。问题是当我在多 View 中的表单之间切换时，它会刷新我的页面，并且我会丢失所有数据。例如，如果用户上传他的头像并转到个人资料输入信息，然后突然决定他想要更改他的头像并切换回用户名选项卡，那么他已经上传的头像就会丢失。我尝试用 jQuery 选项卡解决这个问题，但没有得到想要的结果。另外，我尝试向多 View 和脚本管理器添加更新面板，但 id 对我不起作用。如果有人知道如何解决这个问题，我将非常感激!

这里是Designer.cs

<asp:MultiView ID="MultiView1" runat="server">
    <asp:View ID="ViewForm1" runat="server">
       <div class="multiviewButtons">                    
        <asp:Button ID="Button1" runat="server" Text="Username" OnClick="Button1_Click"/>
         <asp:Button ID="Button2" runat="server" Text="Profile" OnClick="Button2_Click"/>
      </div>
      <asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
      <asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>           
      <asp:FileUpload ID="uploadAvatar" runat="server"/>
    </asp:View>
    <asp:View ID="ViewForm2" runat="server">
      <div class="multiviewButtons">                              
        <asp:Button ID="Button3" runat="server" Text="Username" OnClick="Button1_Click"/>
         <asp:Button ID="Button4" runat="server" Text="Profile" OnClick="Button2_Click"/>
      </div>
      <asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
      <asp:Label ID="Profile" runat="server" Text="Insert your pdf document"></asp:Label>           
     <asp:FileUpload ID="uploadDocument" runat="server"/>
    </asp:View>
</asp:MultiView>

在我的 CodeBehind.cs 文件中

protected void Button1_Click(object sender, EventArgs e)
{
     MultiView1.ActiveViewIndex = 0;
}

protected void Button2_Click(object sender, EventArgs e)
{
     MultiView1.ActiveViewIndex = 1;
}

Answer 1

实际上，这是最好自己动手的情况之一!!

事实证明，在大多数情况下，它的工作量更少。

因此，将两个按钮移到两个“面板”之外。

事实上，让我们转储整个多 View ，并使用简单的标记。 在这种情况下，结果可能会减少工作量。

所以，这个标记:

        <asp:Button ID="Button1" runat="server" Text="Username" CssClass="btn"
            OnClientClick="myshow(1);return false;"/>
        <asp:Button ID="Button2" runat="server" 
            Text="Profile" CssClass="btn"
            Style="margin-left:15px"
            OnClientClick="myshow(2);return false"/>

        <script>
            function myshow(iMyShow) {

                if (iMyShow == 1) {
                    $('#View1').show()
                    $('#View2').hide()
                }

                if (iMyShow == 2) {
                    $('#View1').hide()
                    $('#View2').show()
                }

            }
        </script>

        <br />
        <br />

        <div id="View1" style="display:normal">
              <asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
              <asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>           
              <asp:FileUpload ID="uploadAvatar" runat="server"/>
        </div>

        <div id="View2" style="display:none">
            <asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
            <asp:Label ID="Profile2" runat="server" Text="Insert your pdf document"></asp:Label>           
            <asp:FileUpload ID="uploadDocument" runat="server"/>
        </div>
        <br />
        <asp:Button ID="cmdDone" runat="server" Text="Submit" CssClas="btn" />

所以，两个非常简单的 div 和两个简单​​的按钮。他们没有服务器端代码。

所以，你现在得到了这个:

由于我们使用一些简单的 js 代码(jQuery)隐藏/显示 div，因此上面的内容没有回发并且非常简单。

事实上，我使用了多年的良好触感？

那么，当您单击两个按钮之一来选择/显示简单的“div”时？

您常常无法辨别我们所在的“假标签”。

那么，用两个按钮代替吗？

放入单选按钮列表。再说一遍，我们不需要回发，但是单选按钮列表显示选择了哪个按钮，这真的很好!

因此，放入单选按钮列表中，输入两个按钮文本值(所有向导)。将布局设置为水平(而不是垂直)。

所以，现在我们有这个:

(使用向导编辑/添加项目，然后输入两个“假”选项卡控件名称

所以，我们现在有这个:

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
            RepeatDirection="Horizontal" CssClass="rMyChoice">
            <asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
            <asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
        </asp:RadioButtonList>

现在，我应该能够将 onclick 事件添加到 rb 列表中，但是渲染问题导致 rb 触发 2 次，因此，我们必须将 onclick (这是客户端)添加到每个选择中。

有了上面的内容，单选按钮就会显示所选择的选项 - 这对用户来说相当不错。

例如这个:

像任何东西一样，默认的 rblist 甚至间距看起来“可怕”。

但是，我们可以设置 rb 列表的样式。所以，这样说:

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
            RepeatDirection="Horizontal" CssClass="rMyChoice"  >
            <asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
            <asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
        </asp:RadioButtonList>

所以，现在我们得到了这个:

因此，一些简单的 div 往往会减少工作量。您可以如上所述放入两个按钮。

因此 rb 列表很好，因为它显示/提供有关选择 rb 列表中哪个选项的反馈。扔进样式表(即使带有您可能需要的原始按钮等)？

总而言之，我认为我们最终得到了更少的标记，没有服务器回发，事实上我对我的大部分页面都使用了上述技巧 - (非常像给定页面中的菜单)。因此，如果您有 3 或 5 个选择，此方法就有效。

至于 rb 列表的样式表。必须把它挖出来并打开它! - 好几年没看过了。

噢 - 超出预期，但 css 文件是这样的:

.rMyChoice h1 {
    color: hsla(215, 5%, 10%, 1);
    margin-bottom: 2rem;
}

.rMyChoice section {
    display: flex;
    flex-flow: row wrap;
}

section > div {
    flex: 1;
    padding: 0.5rem;
}

.rMyChoice input[type=radio], input[type=checkbox] {
    display: none;
    cursor: pointer;
}


.rMyChoice label {

    display: block;
    background: white;
    border: 2px solid hsla(150, 5%, 75%, 1);
    border-radius: 25px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    position: relative;
    margin-right: 9px;

}

.rMyChoice input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
    background: hsla(150, 5%, 75%, 1);
    color: hsla(215, 0%, 100%, 1);
    box-shadow: 0px 0px 20px hsla(150,5%, 75%, 0.75);
}

.rMyChoice input[type="radio"]#control_05:checked + label {
    background: red;
    border-color: red;
}

.rMyChoice p {
    font-weight: 900;
}