我正在尝试向用户显示一个简单的模态对话框,但无法正常工作。 单击删除链接时应显示模态对话框,而页面将灰显。
代码如下所示: 财务主任:
[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">×</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
});
});
}
答案 0 :(得分:1)
尝试将控制器的结果作为PartialView渲染,而不是简单的View,因为它试图渲染整个页面。所以在你的控制器而不是
return View(questionaire);
写
return PartialView(questionaire);
我在我的项目中使用这种类型的答案
if (Request.IsAjaxRequest())
return PartialView(ViewModel);
return View(ViewModel);