MVC5 Modal部分視圖不顯示

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

Index視圖，其中列舉了所有問卷調查：

@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而不是簡單視圖，因爲它試圖呈現整個頁面。因此，在您的控制器，而不是

return View(questionaire); 

寫

return PartialView(questionaire); 

我使用這種類型的答案在我的項目

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