c# - MVC5 模态局部视图不显示

Question

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

代码如下所示： 控制器：

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

Answer 1

尝试将控制器的结果呈现为 PartialView 而不是像它试图呈现整个页面那样简单的 View。所以在你的控制器中而不是

return View(questionaire);

写

return PartialView(questionaire);

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

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