ユーザーに単純なモーダル ダイアログを表示しようとしていますが、期待どおりに動作しません。削除リンクをクリックするとモーダル ダイアログが表示されるはずですが、代わりにページがグレー表示されます。
コードは次のようになります。
[Authorize]
public class QuestionaireController : Controller
{
// GET: /Questionaire/Delete/5
public ActionResult Delete(int? QuestionaireID)
{
if (QuestionaireID == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Questionaire questionaire = this.repository.Questionaires.Where(q => q.QuestionaireID == QuestionaireID.Value && q.IsDeleted == false).FirstOrDefault();
if (questionaire == null)
{
return HttpNotFound();
}
this.PopulateQuestionaireQuestionsList(questionaire);
return View(questionaire);
}
}
すべてのアンケートを列挙するインデックス ビュー:
@model IEnumerable<Domain.Entities.Question>
@{
ViewBag.Title = "Liste der Fragen";
}
@{ Html.RenderPartial("MessageElement"); }
<div class="row">
<div class="col-lg-10">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th class="text-left">
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<div class="btn-group ">
<button class="btn btn-primary btn-xs" data-toggle="modal" onclick="showModal('#deleteModalContainerID', '#deleteContainerBodyID', @item.QuestionID)" title="Delete">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
}
</table>
</div>
<p>
@Html.ActionLink("Add Question", "Create")
</p>
</div>
</div>
<div id="deleteModalContainerID" class="modal fade" data-url="@Url.Action("Delete", "Question" )">
<div id="deleteContainerBodyID">
</div>
</div>
[削除] ボタンの部分ビュー: このビューはコントローラーによって正常に返されたため、配信されます。
@model Domain.Entities.Question
@{
ViewBag.Title = "Lösche " + Model.Name + " ?";
}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wirklich löschen?</h4>
</div>
<div class="modal-body">
<p>Wollen Sie d
ie Frage @Model.Name wirklich löschen?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Abbrechen</button>
@using (Html.BeginForm("DeleteConfirmed", "Question"))
{
@Html.Hidden("QuestionID", Model.QuestionID)
<button class="btn btn-default pull-left" title="Löschen" type="submit"></button>
}
<button type="button" class="btn btn-danger pull-right">Löschen</button>
</div>
</div><!-- /.modal-content -->
</div>
</div><!-- /.modal -->
最後に、Javascript の小さな部分: これも問題なく呼び出されます。
function showModal(modalContainerID, containerBodyID, questionID) {
var url = $(modalContainerID).data('url');
$.get(url, { questionID: questionID }, function (data) {
$(containerBodyID).html(data);
$(modalContainerID).modal({
backdrop: true,
keyboard: false,
show: true
});
});
}