javascript - .load 开始新路径

Question

在我的项目中，我尝试将模态 Bootstrap 添加到我的 View 之一，并使用 .load() 加载该 View ，问题是当我尝试加载该 View 时，它只出现黑色，我尝试使用 console.log() 来观察错误，我看到了这个

http://localhost:38212/Desafios/Details/Solucoes/Details?id=14

当我单击 div 触发模式时，我位于 /Desafios/Details 中，并且我想要转到 /Solucoes/Details 而不是所有网址，我不想将 .load() url 添加到我之前的 url 中。我怎样才能做到这一点？

这是我的 jquery 函数

$("#VisualizarSolucao").click(function (event) {
    var id = $(this).attr("data-id");
    $("#modal").load("../Solucoes/Details?id=" + id, function () {
        $("#modal").modal();
    })
    event.preventDefault()
});

我正在外部文件中加载js，这里是在点击事件上调用的VisualizarSolucao id

<div class="col-md-10" style="border-left:2px solid black">
    <p style="text-align:left;padding-top:5px">
        <a href="" id="VisualizarSolucao" data-id="@i.SolucaoId" style="font-weight:900">@i.SolucaoTitulo</a>
    </p>
    <br />
    <div class="col-md-offset-4 col-md-8" style="text-align:right">
        <text>Criado por <a href="#">@i.User.UserName</a> no dia @i.DataCriacao</text>
    </div>
</div>

Answer 1

.load() 函数中的 url 需要为 "/Solucoes/Details?id="+ id，但是您应该始终使用 >@Url.Action() 方法确保您的网址正确生成。

由于脚本位于外部文件中，并且 razor 代码不会在外部文件中解析，因此请将 html 更改为

<a href="#" class="VisualizarSolucao" data-url="@Url.Action("Details", "Solucoes", new { id = i.SolucaoId })">

请注意，id 已更改为 class 名称(您在循环中生成重复的 id 属性，这是无效的 html)。您还应该删除内联样式并使用 css。

然后将脚本更改为(不需要 event.preventDefault())

$('.VisualizarSolucao').click(function() { // class name selector
    var url = $(this).data('url'); // use data(), not attr()
    $("#modal").load(url, function () {
        $("#modal").modal();
    })
});