ASP.NET Bootstrap模式弹出 - 当我点击按钮,Nothings(弹出)打开

问题描述:

我试图用bootstrap弹出。在我的“NoteListPartial.cshtml”页面;如果我点击编辑按钮,我想要弹出“Not.cshtml”打开。但是当我点击按钮时,没有任何反应。我的代码如下:ASP.NET Bootstrap模式弹出 - 当我点击按钮,Nothings(弹出)打开

这是我的 “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> 

这是因为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> 

尝试这个。