Tuesday, July 28, 2020

Preventing Multiple Submit Button Clicks in C#

When handling form submissions, a common issue is users clicking the submit button multiple times, which can cause duplicate processing or other errors. Here are several approaches to prevent this:

Client-side Solutions

1. JavaScript Approach


// In your .aspx page or view:
<script type="text/javascript">
    function preventMultipleClicks(button) {
        // Disable the button
        button.disabled = true;
        button.value = "Processing...";
        
        // Submit the form
        return true;
    }
</script>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" 
    OnClientClick="return preventMultipleClicks(this);" 
    OnClick="btnSubmit_Click" />


2. Using jQuery

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var form = $("form");
        form.submit(function() {
            $(this).find(':submit').attr('disabled', 'disabled')
                .val('Processing...');
        });
    });
</script>


Server-side Solutions

1. Using a Flag in the Session or ViewState

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // Check if already processing
    if (ViewState["IsProcessing"] != null && (bool)ViewState["IsProcessing"])
    {
        // Already processing, ignore this click
        return;
    }

    try
    {
        // Set processing flag
        ViewState["IsProcessing"] = true;
        
        // Your processing logic here
        ProcessForm();
    }
    finally
    {
        // Reset flag when done
        ViewState["IsProcessing"] = false;
    }
}


2. Using Page.IsValid and Disabling Button

            
    protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        // Disable the button to prevent multiple clicks
        Button btn = (Button)sender;
        btn.Enabled = false;
        
        // Process form
        ProcessForm();
        
        // Optionally re-enable the button if staying on the same page
        // btn.Enabled = true;
    }
}

3. Using a Hidden Field to Track Submission

<asp:HiddenField ID="hdnSubmitted" runat="server" Value="false" />

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (hdnSubmitted.Value == "false")
    {
        hdnSubmitted.Value = "true";
        
        // Process form
        ProcessForm();
    }
    else
    {
        // Already submitted, ignore
    }
}

Best Practices

  • Combine client-side and server-side approaches for maximum reliability
  • Always include server-side validation as client-side can be bypassed
  • Consider adding a short timer to re-enable the button if appropriate
  • For AJAX forms, use a loading indicator to provide visual feedback

Explain the importance of NPM and Node_Modules folder?

NPM is a package manager which makes installation of Javascript framework easy.
"node_modules" is the folder where all the packages are installed.

Explain the different types of Angular directives?

There are 3 types of directives in angular.

i) Structural 
ii) Attribute 
iii) Component

Structural Directives :-Change the DOM layout by adding and removing elements.
Attribute Directives :-Change the appearance and behaviour of HTML elements.
Component Directive :-Directive with the templates.It's like user control.

What are directives in angular ?

Directives change the behavior of HTML DOM.

Sunday, July 26, 2020

What is Angular ?

Angular is a Javascript Binding Framework which binds the HTML UI and Javascript Model.
This helps you to reduce your efforts on writing thos lengthy lines of code for binding.

Adding to it, it also helps you to build SPA by using the concept of routing.
It also has lot of other features like HTTP,DI,Input output because of which you do not need other frameworks.