通过jQuery将部分视图调用到Bootstrap Modal？

Question

我已经查看了 Stack 上关于这个问题的几个答案；但是，我发现的结果都没有解决我的问题。

我要做什么

我需要动态填充 Modal 的内容，但内容包含 Razor 函数（这就是我不使用 JS 填充 Modal 的原因）。我不能有单独的模态，因为如果我在页面上包含两个模态，Razor 函数会相互干扰（一个会被调用，而另一个不会）。模态的控制器与页面控制器不同（页面是索引页面，我使用单独的控制器来更加模块化）

我的尝试

我正在使用我的 cshtml 文件中的 HTMLContent 调用创建模态：

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>");
    }

这里在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()

页面加载后，在我的 Widgets.js 文件中，我将调用它：

 $("#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();
    });
});

那么应该指向这里：

        [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
        };
    }

但是，当addLineConfig() 返回时，它返回的是布局（即导航栏和页脚）而不是下面的部分页面。

<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>

我尝试使用$.ajax({}) 调用而不是$.get()，但是使用AJAX，部分页面不会呈现（我没有得到任何返回）。

Answer 1

您是否尝试过使用 $load()，过去它可以很好地为我简单地在 div 中放置一个部分。

这是一个例子。

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