Dynamic Modal Popup

Hi Aman

  I have below User Control.How i can add your code here

Thanks

Hi Ramco,

Yes, you can create a dynamic modal popup that can be reused across different forms or pages, which will save you the hassle of defining it separately for each form. Here’s how you can achieve this in an ASP.NET WebForms application using JavaScript, jQuery, and a bit of C#.

Steps to Create a Dynamic Modal Popup:

1. Create a Reusable Modal Control in your Master Page or as a User Control:

   • Define a modal structure that will be common across your application. You can use Bootstrap for simplicity.

  

    

      

        
Modal title
        
          ×
        
      
      

        
      
      

        Close
        Save changes
      
    
  

Create a JavaScript Function to Show the Modal with Dynamic Content:

function showModal(title, bodyContent, saveButtonHandler) {
    $('#modalTitle').text(title);
    $('#modalBody').html(bodyContent);

    // Bind click event handler to the Save button
    $('#modalSaveButton').off('click').on('click', function () {
        if (saveButtonHandler && typeof saveButtonHandler === 'function') {
            saveButtonHandler();
        }
        $('#dynamicModal').modal('hide');
    });

    $('#dynamicModal').modal('show');
}

Trigger the Modal from Server-Side Code or Client-Side Events:

• From Server-Side (C#):

protected void ShowDynamicModal(string title, string content)
{
    string script = $"showModal('{title}', '{content}');";
    ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, true);
}

From Client-Side (JavaScript):

showModal('Dynamic Title', '
This is dynamic content.
', function() {
    alert('Save button clicked!');
});

1. Use the Modal Across Different Pages or Forms:

   • On any form or page, you can trigger the dynamic modal by calling the showModal function from either the client-side or the server-side. The content and behavior of the modal can be customized each time it is invoked.

Benefits:

• Reusability: The modal is defined once and can be reused across the application.
• Customizability: Each instance of the modal can have different content and behavior based on the context.
• Consistency: All forms use the same modal style, ensuring a consistent user experience.

If you need the modal to perform specific actions (like submitting a form or making an AJAX call), you can include the logic in the saveButtonHandler parameter or in other custom event handlers.

Using Asp.net & Javascript: -

define a master page: -

    
    
    


    

        

        
        

            

                

                    

                        
Modal Title
                        
                            ×
                        
                    
                    

                        
                    
                    

                        Close
                        Save changes
                    
                
            
        
    

    
    
    

Trigger the Modal with JavaScript

You can use JavaScript to dynamically load content into the modal and display it.

function showModal(title, content) {
    document.getElementById('exampleModalLabel').innerText = title;
    document.getElementById('modalBodyContent').innerHTML = content;
    $('#myModal').modal('show');
}

Now use the Modal in Your ASP.NET Pages

In any of your ASP.NET pages, you can now trigger this modal dynamically.

If you need to load the content of the modal dynamically (e.g., from a server-side script), you can use AJAX.

function showModalWithAjax(title, url) {
    document.getElementById('exampleModalLabel').innerText = title;

    // Load content via AJAX
    $.ajax({
        url: url,
        success: function(data) {
            document.getElementById('modalBodyContent').innerHTML = data;
            $('#myModal').modal('show');
        }
    });
}

Trigger Example: