不显示MVC5模态局部视图(MVC5 Modal Partial View is not displayed)

不显示MVC5模态局部视图(MVC5 Modal Partial View is not displayed)

我试图向我的用户显示一个简单的模态对话框，它不能按预期工作。 单击删除链接时应显示模态对话框，而页面将灰显。

代码如下所示：控制器：

[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>

“删除”按钮的“部分视图”：此视图由Controller成功返回 - 因此它已交付。

@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">&times;</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 }); }); }

I am trying to show a simple modal Dialog to my users, which does not work as expected. The Modal Dialog should be displayed when the Delete-link is clicked, but instead the page greys out.

The code looks like this: The Controller:

[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); } }

The Index View, which enumerates all Questionaires:

@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>

The Partial View for the Delete button: This view is sucessfully returned by the Controller - so it is delivered.

@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">&times;</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 -->

And finally my little piece of Javascript: Which is also called without a problem.

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 }); }); }

最满意答案

尝试将控制器中的结果作为PartialView渲染，而不是简单的视图，因为它试图渲染整个页面。 所以在你的控制器而不是

return View(questionaire);

写

return PartialView(questionaire);

我在我的项目中使用这种类型的答案

if (Request.IsAjaxRequest()) return PartialView(ViewModel); return View(ViewModel);

try to render your result from the controller as a PartialView not as a simple View as it tries to to render an entire page. So in your controller instead of

return View(questionaire);

write

return PartialView(questionaire);

I use this type of answer in my projects

if (Request.IsAjaxRequest()) return PartialView(ViewModel); return View(ViewModel);