How to use Modal in a view?

Question

How to use Modal in a view?

Coreysan 1,816

I learned to build my first web store with MVC. When a customer wants detail information on a particular product, I used the controller/action method and view technique, where I pass the product ID to a new view, using asp-route-id. Works great.

Now I want to try it differently. I have some HTML that displays the product, and when you click on a details button or icon, it calls modal, from the same html page.

I'd like to see if I can emulate that in MVC. I would need to pass the selected product information to the modal code (div).

Can that be done? I know how to code the basics in C# for MVC, and I know a small amount of Javascript. Learning as I go! Anything I can read/study online?

SurferOnWww 4,951 Reputation points

2023-11-07T01:28:09.2266667+00:00

Which do you use, .NET Framework or .NET/.NET Core? What is the version?
lukaroshop 0 Reputation points

2023-11-07T01:56:06.99+00:00
It's great to hear about your progress in learning web development with MVC! It sounds like you've already gained a good understanding of how to display product details using the controller/action method and view technique. Now, you're interested in trying a different approach by using a modal to display product details directly from the HTML page.

Yes, you can certainly achieve this in MVC. To pass the selected product information to the modal code (div), you can use JavaScript. Since you mentioned you have some knowledge of JavaScript, this should be within your reach.

Here's a high-level approach you can follow:

Create an HTML element (e.g., a button or icon) on your page to trigger the modal.

Attach a JavaScript event handler to that element so that when it's clicked, it opens the modal.

In the event handler, you can use JavaScript to fetch the selected product's information (you might need an AJAX request to your server or simply retrieve it from the existing HTML) and populate the modal's
Coreysan 1,816 Reputation points

2023-11-07T18:58:05.7833333+00:00

@lukaroshop Thanks for your response! I appreciate that. I'll look into coding Javascript. Since my store can be accessed all around the world, is Javascript considered a best practice for what I want to do?

I know that using ASP.NET Core 3.1 can do all the work, but I like the behavior of passing data to a modal. It looks sharp when the background fades, and the modal pops up to the foreground.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Answer accepted by question author

0 additional answers

Your answer

SurferOnWww 4,951 Reputation points

2023-11-07T01:28:09.2266667+00:00

Which do you use, .NET Framework or .NET/.NET Core? What is the version?
lukaroshop 0 Reputation points

2023-11-07T01:56:06.99+00:00

It's great to hear about your progress in learning web development with MVC! It sounds like you've already gained a good understanding of how to display product details using the controller/action method and view technique. Now, you're interested in trying a different approach by using a modal to display product details directly from the HTML page.

Yes, you can certainly achieve this in MVC. To pass the selected product information to the modal code (div), you can use JavaScript. Since you mentioned you have some knowledge of JavaScript, this should be within your reach.

Here's a high-level approach you can follow:

Create an HTML element (e.g., a button or icon) on your page to trigger the modal.

Attach a JavaScript event handler to that element so that when it's clicked, it opens the modal.

In the event handler, you can use JavaScript to fetch the selected product's information (you might need an AJAX request to your server or simply retrieve it from the existing HTML) and populate the modal's
Coreysan 1,816 Reputation points

2023-11-07T18:58:05.7833333+00:00

@lukaroshop Thanks for your response! I appreciate that. I'll look into coding Javascript. Since my store can be accessed all around the world, is Javascript considered a best practice for what I want to do?

I know that using ASP.NET Core 3.1 can do all the work, but I like the behavior of passing data to a modal. It looks sharp when the background fades, and the modal pops up to the foreground.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Answer 1

QiYou-MSFT 4,341 Microsoft External Staff

Hi @Coreysan

You can use Bootstrap's modal. You can name a button your item to achieve the function you want.

<button type="button" data-toggle="modal" data-target="#ProductModal">
  Product1
</button>

<div class="modal fade" id="ProductModal" tabindex="-1" role="dialog" aria-labelledby="ProductModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      ....
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        ....
      </div>
    </div>
  </div>
</div>

I think this document is of great help to you:

Modal.BootStrap

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Coreysan 1,816 Reputation points

2023-11-07T18:55:49.9233333+00:00

@QiYou-MSFT

Thank you for your response. Right now, I have all the HTML code I need for a modal. I understand how it works, but I'm not sure how to pass the product information in the database to it.

Right now I use ASP.NET Core 3.1, and when a user clicks a details button for a product, I get the Product ID, and pass it along to a new view, to show all the details. That all works good.

However, I'd like to see if I can have the user click a button, and when the modal is called, the modal receives all the specific product details to display. I just don't know how to get the product information to the modal.

The contributor "lukaroshop" suggested using Javascript to pass the product info to the modal.

Would that be considered a best practice for what I want to do?

AgaveJoe 1,510

The Bootstrap Modal documentation covers the basics.


@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="content">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>
        var myModalEl = document.getElementById('exampleModal')
        myModalEl.addEventListener('show.bs.modal', function (event) {
            $("#content").load("/modal/GetDetails/10");
        })
    </script>
}

    public class ModalController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult GetDetails (int id)
        {
            ViewBag.Id = id;
            return PartialView();
        }
    }

Partial

<div>
    Detials for Id @ViewBag.Id
</div>

Coreysan 1,816 Reputation points

2023-11-08T01:37:24.8+00:00

AgaveJoe

Ahhh - this is great. Thanks so much! :)

Now back to building my new Les Paul kit!

Share via

How to use Modal in a view?

0 additional answers

Your answer