How to create Modal as a view and call it from Header in the shared folder in MVC

Question

I have a modal which can be viewed by button click but I need to make it display on Url.Action as a part of the header file in that way it will display on all pages.

I followed some tutorials but non of them worked for me as they represented different scenarios that do not apply to mine.

Below is Rolles.cshtml code for the modal

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
 }
  @{
ViewBag.Title = "Rolles";
 }
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
     labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">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">
                ...BLABLA
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-
                        dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">Save 
       changes</button>
            </div>
        </div>
    </div>
   </div>

Below is the controller code

 public ActionResult Betingelser()
    {
        return PartialView("Rolles");

    }

Below is the Head.cshtml code where I call the Modal to display.

  header class="header" role="banner">   
@section scripts
{
    <script>
        $(function () {
            $('#btnTrigger').unbind();
            $('#btnTrigger').on('click', function () {
                $.ajax({
                    url: '@Url.Action("Betingelser", "Betingelser")', 
                    type: 'POST',
                    data: { },

                    success: function (arr) {
                        $('#divContainer').html(arr); //Load your HTML to 
                DivContainer
                        $('#exampleModal').modal('show'); //Once loaded, 
                  show the modal
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            });
        });
    </script>
    }
<div class="portal-header">
    <div class="container portal-header-inner">
        <!-- 1B: Portal header: info + actions-->       
    </div>
</div>
<!--2A: Solutiuon header -->
<div class="solution-header">
    <div class="container solution-header-inner">

    <div class="overlay"></div>
    <nav role="navigation" class=" nav">


            <ul class="nav-primary">
                <a class="nav-link" id="btnTrigger" href="#"> 
        <span>Betingelser</span></a>                 
            </ul>
            <div id="divContainer"></div>
        </div>
    </div>

I want to be able to click on the the rolles Url.Action to display the modal from any page in my solution. What am I missing here?

Answer 1

I see you are just throwing the html to the view with the ActionResult, and after i guess you are going to change the values with JS or Jquery... Why dont you transfer the modal to the view directly and show it with jquery instead?

It could be more easy to do, and practical.

Answer 2

It would be hard to trigger a modal since Url.Action will redirect you to a new page. The best way to do this is to use AJAX.

First create a container where your partial view or HTML elements will be loaded. On this case, I created a div here namely divContainer where I will put the HTML contents once someone has triggered the button namely btnTrigger.

<ul class="nav-primary">
<li>
    <a class="nav-link" id="btnTrigger" href="#"><span>Rolles</span></a>
</li>
</ul>
<div id="divContainer"></div>

Then on the same page where you place this code, add a script which will contain your AJAX functionality. What it does is that when someone clicks your link, on this case btnTrigger (with the code above), this will call the Betingelser ActionResult and will load your Rolles.cshtml which contains your Modal HTML code.

@section scripts
{
<script>
    $(function () {
        $('#btnTrigger').unbind();
        $('#btnTrigger').on('click', function () {
            $.ajax({
                url: '@Url.Action("Betingelser", "Rolles")', 
                type: 'POST',
                data: { },

                success: function (arr) {
                    $('#divContainer').html(arr); //Load your HTML to DivContainer
                    $('#exampleModal').modal('show'); //Once loaded, show the modal
                },
                error: function (err) {
                    console.log(err);
                }
            });
        });
    });
</script>
}

Then on your Rolles.cshtml, I edited your Modal based on Bootstrap documentation, you can edit this if you want:

@{
    ViewBag.Title = "Rolles";
}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">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">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
                dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
</div>

Your controller code is still the same:

public ActionResult Betingelser()
    {
        return PartialView("Rolles");

    }