javascript - .load start new path -

in project im trying add modal bootstrap 1 of views , use .load() load view, thing when try load view appears black, tried use console.log() watch errors , saw

http://localhost:38212/desafios/details/solucoes/details?id=14

when click div trigger modal, in /desafios/details, , want go /solucoes/details , not url, don't want add .load() url previous url had. how can that?

here jquery function

$("#visualizarsolucao").click(function (event) {     var id = $(this).attr("data-id");     $("#modal").load("../solucoes/details?id=" + id, function () {         $("#modal").modal();     })     event.preventdefault() }); 

i loading js in external file, here visualizarsolucao id called on click event

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

the url in .load() function need "/solucoes/details?id=" + id, should use @url.action() method ensure url's correctly generated.

since script in external file, , razor code not parsed in external files, change html to

<a href="#" class="visualizarsolucao" data-url="@url.action("details", "solucoes", new { id = i.solucaoid })"> 

note id changed class name (your generating duplicate id attributes in loop invalid html). should remove inline styles , use css instead.

then change script (no need event.preventdefault())

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