停止在加载时调用 Html.Action

Question

I have below div inside a parent view and the below Html.Action returns a PartialView

<div id="preview" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        @Html.Action("GetPrintView", "Connector")
    </div>
</div>

I open the above modal using below jquery:

$("#printdoc").click(function(e) {
    e.preventDefault();
    $(this).attr('data-target', '#preview');
    $(this).attr('data-toggle', 'modal');
});

The issue is, whenever the parent .cshtml is loaded it calls the above Html.Action , but this should be only called when clicked on button. I tried using data-url for the div but still the action is being called repeatedly. Any help?

Answer 1

Html.Action will execute the action when view is loaded. Since you don't want this, You need load data asynchronously.

You can store URL in custom data-* attribute to generate the URL use Url.Action . On click of the button load the partial view using .load()

HTML

<div class="modal-content" data-url='@Url.Action("GetPrintView", "Connector")'>        
</div>

Script

$("#printdoc").click(function (e) {
    e.preventDefault();

    var modal = $("#preview .modal-content"); //Find the element
    $(modal).load(modal.data('url')); //Fetch url and load partial view

    $(this).attr('data-target', '#preview');
    $(this).attr('data-toggle', 'modal');
});