Question

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

我要做什么

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

我的尝试

我正在使用cshtml文件中的HTMLContent调用来创建Modal：

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

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

1 个答案: