通过jQuery将部分视图调用到Bootstrap模式中？

Question

I've viewed several of the answers on Stack about this problem; however, none of the results I've found have solved my problem.

What I'm trying to do

I need to dynamically populate a Modal's content but the content contains Razor functions (which is the reason I'm not using JS to populate the Modal). I can't have separate modals because the Razor functions will interfere with each other (one will be called while the other will not be) if I include both Modals on the page. The Controller for the Modals is different from the Page Controller (The page is the Index page & I'm using a separate controller to be more modular)

My attempt

I am creating the Modal using an HTMLContent call in my cshtml file:

Widgets.cs

        public static IHtmlContent ConfigWidgetModal()
    {

        return new HtmlString("<div class='modal fade' id='configure-widget' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'>" +
                                    $"<div class='modal-dialog modal-lg' role='document'>"+
                                        $"<div class='modal-content'>" +
                                            $"<div class='modal-header'>" +
                                                $"<h5 class='modal-title'>Select Widget Information</h5>"+
                                                $"<button type = 'button' class='close' data-dismiss='modal'>&times;</button>"+
                                            $"</div>"+

                                            $"<div class='modal-body' id='ConfigureBody'>" +
                                                //JavaScript will set the Body depending on the widget type being selected
                                            $"</div>" +
                                            $"<div class='modal-footer'>" +

                                            $"</div>" +
                                        $"</div>" +
                                    $"</div>" +
                                $"</div>");
    }

It is called here in Index.cshtml

<div>... Index body up here </div>

@*Grid for Widgets*@
@Widgets.Dashboard()

@*Edit/Add/Stop Editing Widget Buttons*@
@Widgets.AddEditButtons()

@* Initial Widget Popup *@
@{ string pagetype = "LP"; }
@Widgets.AddWidgetModal(pagetype)

@* Widget Configuration Popup*@
@Widgets.ConfigWidgetModal()

Once the page loads, in my Widgets.js file I'm calling this:

 $("#addLine").on('click', function () {
    var url = "/Widgets?handler=TrendConfig";
    var addLineConfig = function () {
        var url = "/Widgets?handler=TrendConfig";
        return $.get(url, function (data) {
            $("#ConfigureBody").html(data);
        });
    }
    addLineConfig().done(function () {
        makeLineWidget();
    });
});

Which then should be directing here:

        [HttpGet]
    public ActionResult TrendConfig(string adid)
    {
        ViewData["adid"] = adid;
        var myViewData = new Microsoft.AspNetCore.Mvc.ViewFeatures.ViewDataDictionary(ViewData);
        return new PartialViewResult
        {
            ViewName = "/Partials/Widgets/TrendGraphWidget",
            ViewData = myViewData
        };
    }

However, when addLineConfig() returns, it is returning the Layout (ie the Navbar and the Footer) not the Partial page below.

<script>
//Changes plot options for Line Graph dependent on Activity selection
...some script here about the dropdowns...
</script>
<div class="form-row justify-content-center">
<div class="col-md-3">
    @MyGlobalDropdowns.FinCenter()
</div>
<div class="col-md-3">
    @MyGlobalDropdowns.Client()
</div>

I've tried using an $.ajax({}) call instead of the $.get() but with AJAX, the partial page doesn't render (I don't get anything returned).

Answer 1

Have you tried using $load(), it has worked well for simply placing a partial in a div for me in the past.

here is an example.

$("#ConfigureBody").load("/Controller/TrendConfig/?adid=value");