jquery - 想要在 @Html.ActionLink 弹出的模式中打开 html 文件

Question

我想在@Html.ActionLink的模式弹出窗口中打开html文件。我在 ExampleUrl 中给出了从数据库获取的路径。我已经编写了 JQuery 来执行此操作，但 FileName 未定义。请任何人指导我。

 //My code

 @Html.ActionLink("Example", "#", new { FileName = item.ExampleUrl }, new { @data_toggle = "modal", @data_target = "#myModal" })

//JQuery

$('#myModal').on('show.bs.modal', function (e) {
            debugger;
            var dataURL = $(this).attr('data-FileName');
            $('.modal-body').load(dataURL, function () {
                $('#myModal').modal({ show: true });
            });

        });

我的模态

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               ...

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

我不知道您为什么使用 @Html.ActionLink 打开模型弹出窗口。最好使用普通按钮并避免一些额外的代码来调用服务器端方法，如下所示。

使用按钮触发模式

   <button type="button" class="btn btn-success openBtn" data-url="@item.ExampleUrl">Open Modal</button>

模态

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal with Dynamic Content</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

现在从 Bootstrap 模式弹出窗口中的外部 URL 加载内容。

<script>
$('.openBtn').on('click',function(){
    var url = $(this).attr("data-url") //your page url
    $('.modal-body').load(url,function(){
        $('#myModal').modal({show:true});
    });
});
</script>

编辑:如果您想将文件放在 View 文件夹中，只需将以下代码放入 web.config 文件中，该文件允许您访问 js 和 html 等静态资源。

<system.webServer>
<handlers>
  <add name="JavaScriptHandler" path="*.js" verb="*"
     preCondition="integratedMode" type="System.Web.StaticFileHandler" />      
  <add name="HtmlScriptHandler" path="*.html" verb="*"
     preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <remove name="BlockViewHandler"/>
  <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>