MVC Loading Controller Action with Authorize Tag from Different View

Question

I have created a bootstrap modal which calls a controller action to load a view inside of the modal.

The controller action has an authorise tag which means whenever you load the default view (not the modal) it asks you to log in, The modal contains create new functionality which I don't want anonymous users to have access to hence the authorise tag.

But the users aren't able to access anything since the view is calling the Create controller action (which has the authorise tag) even though the modal hasn't been opened.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 70%;">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title text-center">Create New Connecting Rod</h3>
            </div>
            <div class="modal-body" id="createModal">
                @Html.Action("Create")
            </div>
        </div>
    </div>
</div>

The above code is the code which is used to call the create controller action, I only want the controller action to be called when the modal button has been clicked not when the page first loads.

[Authorize]
public ActionResult Create()
{
    return PartialView();
}

This is the only code in my Create Controller Action

I have tried using some JQuery to only load the Action once the button has been pressed but that didnt seem to work either.

$(document).on("click", "#createNew", function (e) {
    alert("hello");
    $('@Html.Action("Create")').appendTo('#createModal');
});

Answer 1

Don't load your authorized content on load of the page as user may be logged in or anonymous. Rather load the content when user clicks on a link or button which then call open modal dialog method.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 70%;">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title text-center">Create New Connecting Rod</h3>
            </div>
            <div class="modal-body" id="createModal">
                <!-- have some loading icon here by default -->
            </div>
        </div>
    </div>
</div>

Provided that you have a button which will open the dialog write following script

<script>
$(function{
 $("your_button").click(function(){

  // load content of your url @Url.Action("Create") in div "#createModal"
// and then open the dialog

     $.ajax({       
                    url: "@Url.Action("Create")",
                    cache: false,
                    dataType: "html",
                    success: function (data) {
                        $("#createModal").html(data);
                }
            });

            $("#myModal").modal().show();

     });
});
</script>