Boostrap Modal無法在ASP.NET MVC上工作

我收到很多關於使用Boostrap模塊顯示MVC部分視圖的博客和文章。看起來，我在所諮詢的材料上看到了我所看到的，但仍然沒有顯示出該模式。我只需要以模式顯示具有「專輯」詳細信息的部分視圖。當我通過瀏覽器加載URL時，控制器工作正常。Boostrap Modal無法在ASP.NET MVC上工作

這是指數HTML代碼其中顯示的模式：

<tbody> 
      @foreach(var album in Model.Albums) 
      { 
       <tr data-toggle="modal" data-target="#albumModal" data-url="@Url.Action("Album", new { id = album.Id })"> 
        <td>@album.Title</td> 
        <td>@album.Artist</td> 
        <td>@album.Genre</td> 
        <td>@album.Year</td> 
       </tr> 
      } 
     </tbody>

管窺

<div class="modal fade" id="albumModal" tabindex="-1" role="dialog" aria-labelledby="albumModalLabel"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="albumModalLabel">Album Details</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <div class="row"> 
         <label>Album<input class="form-control" type="text" id="title" /></label> 
        </div> 
        <div class="row"> 
         <label>Artist <input class="form-control" type="text" id="artist" /></label> 
        </div> 
        <div class="row"> 
         <label>Genre <input class="form-control" type="text" id="genre" /></label> 
        </div> 
        <div class="row"> 
         <label>Year <input class="form-control" type="text" id="year" /></label> 
        </div> 
       </div> 
       <div class="col-md-8"> 
        <table class="table table-condensed table-striped"> 
         <thead> 
          <tr> 
           <th>Track</th> 
           <th>Song Title</th> 
           <th>Length</th> 
          </tr> 
         </thead> 
         <tbody class="tracks"></tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div>

的HomeController

[HttpGet] 
public ActionResult Album(int? id) 
{ 
    if (id == null) return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
    var albumInfo = _service.GetAlbumInfo((int) id); 
    if (albumInfo == null) return HttpNotFound(); 
    return PartialView("_Album", albumInfo); 
}

腳本

 $(document).ready(function() { 
     $('.list-element').click(function() { 
      debugger; 
      var $buttonClicked = $(this); 
      var url = $buttonClicked.attr('data-url'); 


      $.get(url, function (data) { 
       $('#albumContainer').html(data); 

       $('#albumModal').modal('show'); 
      }); 
     }); 
    });

在幾乎所有的counsulted的SO問題，他們並沒有使用數據的目標，但我。我需要修改哪些模式才能實現模態顯示？

來源

2017-02-23 javier_el_bene

不清楚是什麼你問。當你點擊一個表格行並用該行中相關表格單元格的值填充表格控件（在這種情況下，調用控制器方法不是必需的）時，是否要打開該模型？ –

您是否包含相關的javascript Bootstrap的參考？ –

Stephen。基本上，我希望表格的每一行都可以作爲顯示模式的鏈接。這就是爲什麼我擁有定義中所有與模態有關的代碼。由於專輯有更多信息，我不得不打電話給控制器。例如，一個軌道列表。布倫丹，我已經在RegisterBundles中註冊了所有的捆綁軟件。你是這個意思嗎？ –

VIEW

@model ShowModal 

<table> 
    <tbody> 
     <tr data-toggle="modal" data-target="#albumModal" data-url="@Url.Action("Album", new { id = album.Id })"> 
      <td>@album.Title</td> 
      <td>@album.Artist</td> 
      <td>@album.Genre</td> 
      <td>@album.Year</td> 
     </tr> 

    </tbody> 
</table> 

<!-- Modal --> 
<div class="modal" id="albumModal" tabindex="-1" role="dialog" aria-labelledby="albumModal"> 
    @Html.Partial("_albumPartial", Model) 
</div>

控制器

[HttpGet] 
public ActionResult Album(int? id) 
{ 
    ShowModal modal = new ShowModal(); 
    var albumInfo = _service.GetAlbumInfo((int) id); 

    modal.Info1 = albumInfo.Info1;//and other fields 
    return PartialView("_albumPartial", modal); 
}

SCRIPT

<script> 
    $(document).ready(function() { 
     $("#albumModal").on("show.bs.modal", function (e) { 
      var button = $(event.relatedTarget) // Button that triggered the modal 
      var url = button.data('url') // or button.attr("data-url") or get here just the id and create the URL here 


      $.get(url, function (data) { 
       $('#albumModal').html(data); 
       $('#albumModal').modal('show'); 
      }); 
     }); 
    }); 
</script>

來源

2017-02-23 05:45:54

Boostrap Modal無法在ASP.NET MVC上工作

回答

相關問題