Creating Dynamic and Reusable Modal Popups in ASP.NET WebForms

Create a reusable dynamic modal popup in ASP.NET WebForms using JavaScript, jQuery, and Bootstrap. Define a common modal structure in a master page or user control, use JavaScript to show and customize the modal with dynamic content, and trigger it from server-side or client-side code.

We 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
 

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.

<!-- Bootstrap Modal Structure -->
<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- Modal Content Here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="modalSaveButton">Save changes</button>
      </div>
    </div>
  </div>
</div>

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', '<p>This is dynamic content.</p>', function() {
    alert('Save button clicked!');
});

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.