1

ユーザーに単純なモーダル ダイアログを表示しようとしていますが、期待どおりに動作しません。削除リンクをクリックするとモーダル ダイアログが表示されるはずですが、代わりにページがグレー表示されます。

コードは次のようになります。

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

1 に答える 1

1

ページ全体をレンダリングしようとするため、コントローラーからの結果を単純なビューとしてではなく、PartialView としてレンダリングしてみてください。したがって、代わりにコントローラーで

return View(questionaire);

書きます

return PartialView(questionaire);

私は自分のプロジェクトでこのタイプの回答を使用しています

if (Request.IsAjaxRequest())
    return PartialView(ViewModel);
return View(ViewModel);
于 2013-11-01T13:46:13.677 に答える