Modal popup for MVC applications

Modal popup is a good way to interact with the end user. In a way we can show notifications or any UI components to the end users using popups. However its very simple to implement a modal popup for MVC applications.

First we will create a MVC solution in Visual Studio and run the project. After that without doing much extra things will directly go to the implementation of Modal popup for MVC applications.

Go to the Index.cshtml view inside Views->Home

Then copy and paste below content at the bottom of the index view.

This is the modal popup we are going to show when click on a button.

<div id="popupModel" class="modal fade " role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Sample Popup</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div style="padding:5px;">
                <div>
                    Test content
                </div>
                <br />
                <div>
                    <img src="~/Content/Capture.PNG" />
                </div>
            </div>
        </div>
    </div>
</div>

Now we have to add a button to fire the popup event.

Therefore we need to add below code inside Index.cshtml. This is the code for link button to show in the page itself.

<div>
    <a href="#popupModel" role="button" id="ShowPopup" data-toggle="modal">Show Popup</a>
</div>

That’s it and we are ready to run the project. Very simple isn’t it?

Now run and see in the home page, the link button should be there.

When you click on the button it should show the Modal popup window.

Modal popup for MVC applications
Modal popup

Below is the full HTML code of index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>
<div>
    <a href="#popupModel" role="button" id="ShowPopup" data-toggle="modal">Show Popup</a>
</div>

<div id="popupModel" class="modal fade " role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Sample Popup</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div style="padding:5px;">
                <div>
                    Test content
                </div>
                <br />
                <div>
                    <img src="~/Content/Capture.PNG" />
                </div>
            </div>
        </div>
    </div>
</div>

We can customize this popup as we wish, since this is just a div. Using bootstrap we can change the look and feel also. Please refer below link for bootstrap

https://getbootstrap.com/docs/4.0/components/modal/

Sajith Dilhan on Linkedin
Sajith Dilhan
Software Developer at Sana Commerce

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.