RadTabStrip with RadToolBar Button

1 Answer 15 Views
TabStrip ToolBar
Joe
Top achievements
Rank 1
Joe asked on 20 Jan 2025, 05:16 PM

My ASP.NET Web Form has a RadTabStrip with 3 different tabs. The first tab has the username and password, the second tab has the permissions, and the third tab has the clients. The username and password have RequiredFieldValidators on them.

I have noticed that whenever I go from one tab to another, the Windows TextBox Control txtPassword's Text field is getting reset, causing the page to not validate whenever tabs 2 or 3 are shown.

I created a hack to fix this:

Protected Sub RadTabStrip1_ClientTabSelecting(sender As Object, e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick
    Page.Validate()
    If Me.IsValid() Then
        If Not String.IsNullOrWhiteSpace(txtPassword.Text) Then
            ViewState("password") = txtPassword.Text
        End If
    Else
        If String.IsNullOrWhiteSpace(txtPassword.Text) Then
            txtPassword.Text = ViewState("password")
        End If
        If String.IsNullOrWhiteSpace(txtConfirmPassword.Text) Then
            txtConfirmPassword.Text = ViewState("password")
        End If
        Page.Validate()
        If Not IsValid() Then
            MultiView1.ActiveViewIndex = 1
            RadTabStrip1.SelectedIndex = 0
            RadMultiPage1.SelectedIndex = 0
        End If
    End If
End Sub

I do not like storing their password in the ViewState, but it works.

Almost.

The Submit button is on the bottom of the page, contained within a RadToolBar.

Protected Sub RadToolBar1_ButtonClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadToolBarEventArgs) Handles RadToolBar1.ButtonClick
    Dim rb As Telerik.Web.UI.RadToolBarButton = e.Item
    Dim clientList As List(Of Client) = ViewState("MyClientList")
    If rb.CommandName = "Save" Then

There is a breakpoint on that line of code, but Validation fails before that code is reached.

By this point, my customers are on Tab 3, and they have no way to tell that the txtPassword control has had their input deleted on Tab 1.

Has anyone ever experienced a Windows Control like this password getting cleared whenever the RadTabStrip Index changes?

How do I fix this?

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 23 Jan 2025, 09:09 AM

Hi Joe,

The behavior you're describing, where the password field is cleared upon navigating between tabs or during a postback, is a security feature implemented by browsers and web frameworks like ASP.NET. Browsers do not retain the value of <input type="password"> fields during postbacks or DOM updates to prevent unauthorized access to sensitive information. This means that, by default, password fields will be cleared to protect user data.

In ASP.NET, for instance, the framework does not store the values of password fields in ViewState for security reasons. As a result, when a postback occurs, the password field is cleared. While it's technically possible to retain the password by setting the value attribute of the password field during the page load event, this approach is generally discouraged. Retaining the password in the page's HTML can expose it to potential security risks, such as being visible in the page source or accessible through client-side scripts. Therefore, it's recommended to prompt users to re-enter their passwords when necessary, ensuring better security practices.

If you need to persist the password field for specific functionality, consider the following approach:

Use a Secure Session Variable
Store the password temporarily in a session variable during postbacks or tab navigation. This keeps it server-side, reducing the risk of exposure to client-side vulnerabilities.
Then repopulate the password field using server-side logic or client-side JavaScript whenever the tab is revisited. Ensure this operation is handled securely.

Here’s an example implementation:

Server-Side Logic:

Protected Sub RadTabStrip1_ClientTabSelecting(sender As Object, e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick
    If Not String.IsNullOrWhiteSpace(txtPassword.Text) Then
        Session("TempPassword") = txtPassword.Text
    End If
End Sub

Client-Side JavaScript:

<script>
function repopulatePassword() {
    var password = '<%= Session("TempPassword") %>';
    if (password) {
        document.getElementById('<%= txtPassword.ClientID %>').value = password;
        document.getElementById('<%= txtConfirmPassword.ClientID %>').value = password;
    }
}
</script>

Integration with RadTabStrip:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
    ValidationGroup="MemberGroup" CausesValidation="False" SelectedIndex="0"
    OnClientTabSelected="repopulatePassword">
    <Tabs>
        <telerik:RadTab Text="Details" Selected="True" />
        <telerik:RadTab Text="Roles" />
        <telerik:RadTab Text="Clients" />
    </Tabs>
</telerik:RadTabStrip>

For more detailed discussions on this topic, you can refer to the following Stack Overflow threads:

These discussions provide insights into the reasons behind this behavior and potential approaches, while emphasizing the importance of maintaining security best practices.

    Regards,
    Rumen
    Progress Telerik

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
    Tags
    TabStrip ToolBar
    Asked by
    Joe
    Top achievements
    Rank 1
    Answers by
    Rumen
    Telerik team
    Share this question
    or