1

Bootstrap モーダル ウィンドウに表示される部分的なビューがあります。ビューは、オブジェクトのインスタンスを作成するために使用される Ajax フォームです。

保存ボタンをクリックすると、オブジェクトはデータベースに正しく追加されますが、モーダルは開いたままです。保存ボタンがクリックされたときにモーダルを閉じたい。

モーダルのボタン:

<div class="modal-footer">
    <button class="btn btn-inverse" type="submit" id="btn-create-property-save">Save</button>
</div>

次に、スクリプトファイルで：

$('#btn-create-property-save').click(function(e) {
    e.preventDefault();
    $('#create-residential-property-modal').modal('hide');
    return false;
});

ボタンをクリックしても、モーダルは開いたままです。

私がよくわからないことの 1 つは、問題を引き起こしている可能性があることですが、CreateObjectコントローラー アクションで何を返すかです。現時点では、私はちょうど持っていreturn PartialView();ます。上記のシナリオを考えると、ここで何を返す必要がありますか?

編集:モーダルがどのように読み込まれるかを示すコードを追加しました。

<div class="modal hide fade in" id="create-residential-property-modal" data-url="@Url.Action("LandlordProperties", "Landlords")">
    <div id="create-property-container"></div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#show-create-property-modal').click(function () {
            var url = $('#create-residential-property-modal').data('url');

            $.get(url, function (data) {
                $('#create-property-container').html(data);

                $('#create-residential-property-modal').modal('show');
            });
        });
    });
</script>
4

1 に答える 1

1

Here is how I've done this in the past.

Step 1, submit the form using Ajax:

@using (Ajax.BeginForm("Create", new AjaxOptions()
                      {
                          OnFailure = "Modal.onAjaxFailure",
                          OnSuccess = "Modal.onAjaxSuccess"
                      }))
    {     
        <div class="form-body">
            @Html.TextAreaFor(model => model.Text, new { rows = "3" })
        </div>
        <div class="form-footer">
            @Html.ValidationMessageFor(model => model.Text)
            @Html.ValidationSummary(true)
            @CustomHelpers.SubmitButton("Add Comemnt")
        </div>
    }

Step 2, return JSON result to display success/fail message:

    [HttpPost]
    public ActionResult Create(CommentCreateModel model)
    {
        if (ModelState.IsValid)
        {
           //Do your database insert etc here...

            return Json(new { error = false, message = "Comment added" });
        }
        else
        {
            return Json(new { error = true, message = "The values entered are not valid" });
        }
    }

Step 3, handle the response (my example is in TypeScript):

export function onAjaxFailure(xhr, status, error) {
    //Show notifications for AJAX errors
    $.notify({
        type: "error",
        text: error
    });
}

export function onAjaxSuccess(data, status, xhr) {
    if (data.error) {
        $.notify({
            type: "error",
            text: data.message
        });
    }
    else {
        $('.modal').modal('hide'); //Hides modal window
        //Show message/anything else here
    }
}
于 2013-04-06T18:34:58.377 に答える