MVC5 Modal Partial View is not displayed

Question

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

Answer 1

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