ASP.NET Bootstrap模式彈出 - 當我點擊按鈕，Nothings（彈出）打開

Question

我試圖用bootstrap彈出。在我的「NoteListPartial.cshtml」頁面;如果我點擊編輯按鈕，我想要彈出「Not.cshtml」打開。但是當我點擊按鈕時，沒有任何反應。我的代碼如下：

這是我的 「NoteListPartial.cshtml」：

<a href="@Url.Action("Note", "Project", new { ID = item.ID,ProjectID=item.ProjectID })" data-toggle="modal" data-target="#notedetailModal">Edit</a> 

這是我的 「Note.cshtml」：

<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby=""> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button> 
       <h4 class="modal-title" id="myModalLabel">Edit Note</h4> 
      </div> 
      <form method="post" role="form"> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label>Title:</label> 
         <input type="text" name="Name" value="@Model.Name" /> 
        </div> 
        <div class="form-group"> 
         <label>Content:</label> 
         <textarea name="Content">@Model.Content</textarea> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <input type="submit" class="btn btn-default" value="Update" /> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 1

這是因爲id="notedetailModal" DIV不在「NoteListPartial.cshtml」頁面上。就像把你的代碼

做出改變下面的代碼在你的「NoteListPartial.cshtml」頁面

<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby=""> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 

</div> 
    </div> 
</div> 

，並在你的「Note.cshtml」把代碼的其餘像

<div class="modal-header"> 
       <button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button> 
       <h4 class="modal-title" id="myModalLabel">Edit Note</h4> 
      </div> 
      <form method="post" role="form"> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label>Title:</label> 
         <input type="text" name="Name" value="@Model.Name" /> 
        </div> 
        <div class="form-group"> 
         <label>Content:</label> 
         <textarea name="Content">@Model.Content</textarea> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <input type="submit" class="btn btn-default" value="Update" /> 
       </div> 
      </form> 

嘗試這個。