Passing Data to a Bootstrap Modal in .NET MVC with Code Example

Bootstrap modals are an essential feature in web applications for displaying dynamic information and performing actions based on user interactions. In .NET MVC, passing data to a modal can be achieved using a Modal class. This approach enables you to define the data you want to display and pass it from the controller to the view. In this blog post, we will explore how to pass data to a Bootstrap modal in .NET MVC using a Modal class, including a code example to help you understand the process.

The Modal Class

To pass data to a Bootstrap modal, we can create a Modal class that represents the data we want to display. This class can have properties that correspond to the information we need to show in the modal. Let's say we want to display a user's details in the modal. Our Modal class could look something like this:

public class UserDetailsModal
{
    public string UserName { get; set; }
    public string Email { get; set; }
    // Other properties...
}

You can customize this class based on your specific requirements. It's essential to include the properties you need to populate the modal.

Code Example

Now let's see how we can pass data from the controller to the Bootstrap modal in our .NET MVC application.

Step 1: Create the Modal

First, we need to create an instance of our Modal class in the controller action that renders the view with the Bootstrap modal. Set the appropriate properties on the Modal object based on the data you want to display.

public ActionResult UserDetails()
{
    UserDetailsModal modal = new UserDetailsModal
    {
        UserName = "John Doe",
        Email = "[email protected]"
    };

    return View(modal);
}

Step 2: Render the View

In the view associated with the UserDetails action, you can access the Modal object and its properties to populate the modal.

@model UserDetailsModal

<!-- Bootstrap modal code -->
<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="userDetailsModalLabel">User Details</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Username:</strong> @Model.UserName</p>
                <p><strong>Email:</strong> @Model.Email</p>
                <!-- Other modal content here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Note how we access the Modal object's properties using @Model.PropertyName syntax. Replace the "Your HTML code here" and "Your remaining HTML code here" placeholders with your actual HTML content.

Step 3: Trigger the Modal

Finally, you need to add a trigger element, such as a button or a link, that will open the modal. In this example, I'll use a button with the data-target attribute set to the ID of the modal.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal">
    Show User Details
</button>

Clicking the "Show User Details" button will open the Bootstrap modal, displaying the user's details that we passed through the Modal class.

Passing data to a Bootstrap modal in .NET MVC is a convenient way to display dynamic information to users. By creating a Modal class and populating its properties in the controller, you can easily pass data to the modal and render it in the view.