c# - 通过jQuery将部分视图调用到Bootstrap Modal?
问题描述
我已经在 Stack 上查看了有关此问题的几个答案;但是,我发现的结果都没有解决我的问题。
我正在尝试做的事情
我需要动态填充 Modal 的内容,但内容包含 Razor 函数(这就是我不使用 JS 填充 Modal 的原因)。我不能有单独的模态,因为如果我在页面上包含两个模态,Razor 函数会相互干扰(一个会被调用,而另一个不会被调用)。模态控制器与页面控制器不同(页面是索引页面,我使用单独的控制器来更加模块化)
我的尝试
我正在使用我的 cshtml 文件中的 HTMLContent 调用创建模态:
小部件.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'>×</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,但部分页面不会呈现(我没有得到任何返回)。
解决方案
您是否尝试过使用 $load(),它在过去为我简单地将一个部分放在一个 div 中效果很好。
这是一个例子。
$("#ConfigureBody").load("/Controller/TrendConfig/?adid=value");
推荐阅读
- tensorflow - 导入 tensorflow 1.5.0 时 Jupyter Notebook 内核死机
- mysql - 存储过程函数中的过早循环退出正常工作,但并非针对所有变量运行
- python - 如何使用 Kivy 模块让动画一个接一个地播放
- jenkins - jenkins gradle 集成需要一些帮助
- mysql - 我的服务器不支持 mysql 中的 JSON 字段
- angular - 从 Angular 2.2 到 Angular 6.0 的角度更新
- python - 我正在使用 python3,我有字典列表
- javascript - 通过动态枚举其他对象的键来创建新对象
- c - 如何将字符串从函数返回到 main()?
- java - 在 Json 反序列化期间维护类字段的顺序