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>
尝试这个。