Как я могу заставить всплывающее окно закрываться при нажатии кнопки отправки вызова AJAX в ASP.NET MVC?

Question

У меня есть представление, которое перечисляет кучу предметов.Я пытаюсь сделать так, чтобы, когда пользователь нажимает на «Событие действия» для одного из этих элементов (из строки таблицы), появлялось всплывающее окно.Затем пользователь может обновить ту же информацию об этом элементе и либо отправить информацию, либо закрыть ее.Независимо от того, какой вариант они выбирают, я пытаюсь закрыть всплывающее окно.

Я на 90%, я просто не могу понять одну маленькую деталь - закрытие всплывающего окна.после нажатия кнопки отправки!Многие из решений, которые я видел, похоже, не работают, и у меня просто возникают проблемы с их настройкой для решения моей проблемы.Учитывая следующий код, какие изменения мне нужно сделать, чтобы сделать эту работу?

Вот что у меня есть:

Просмотр

Index.cshtml

<table>
@foreach (var item in Model)
    <tr>
        <td colspan="5" align="right">
                <a href="javascript:void(0);" class="anchorDetail" data-id="@item.AID">Action Event</a>
            </td>
        </tr>
    }
</table>


<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="myModalContent"></div>
        </div>
    </div>
</div>

<script>
    var TeamDetailPostBackURL = '/Database/Edit';
        $(function () {
                $(".anchorDetail").click(function () {
                        var $buttonClicked = $(this);
                        var id = $buttonClicked.attr('data-id');
                        var options = { "backdrop": "static", keyboard: true };
                        $.ajax({
                                type: "GET",
                                url: TeamDetailPostBackURL,
                                contentType: "application/json; charset=utf-8",
                                data: { "Id": id },
                                datatype: "json",
                                success: function (data) {
                                        $('#myModalContent').html(data);
                                        $('#myModal').modal(options);
                                        $('#myModal').modal('show');                   

                                },
                                error: function () {
                                        alert("Dynamic content load failed.");                    
                                }
                        });
                });
        });

</script>

Всплывающее окно

Edit.cshtml

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.AID)
        <table>
        <tr>
         <td>@Html.LabelFor(model => model.Comment)</td>
         <td>@Html.TextAreaFor(model => model.Comment, new { @class = "form-control", rows = "5" })</td>
        </tr>
        <tr>
         <td><input type="submit" value="Save" class="btn btn-primary" id="btnSave"/></td>
         <td><button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button></td>
        </tr>
    </table>
     </div>
}

Контроллер

DatabaseController.cs

    public ActionResult Index()
    {
        return View(db.ActionableEvents.ToList());
    }

    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        ActionableEvents actionableEvents = db.ActionableEvents.Find(id);
        if (actionableEvents == null)
        {
            return HttpNotFound();
        }
        return View(actionableEvents);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "AID,Comment")] ActionableEvents actionableEvents)
    {
        if (ModelState.IsValid)
        {
            db.Entry(actionableEvents).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(actionableEvents);
    }

Я видел этот ресурс здесь: asp.net кнопка отправки закрыть Jquery Ajax , но я просто не вижу, как я смогу настроить это на то, что у меня сейчас происходит.

Кнопка отмены, которая у меня сейчас есть, работает отлично.Есть ли какой-нибудь способ использовать отклонение данных для моей кнопки отправки и сохранить ли он данные, как у меня для кнопки отмены?Я также видел, что некоторые решения используют параметр onClick () в кнопке отправки, но тогда он будет использовать опцию window.close ().Я не хочу, чтобы все окно закрывалось, и при этом я не хочу, чтобы пользователь также запрашивал об этом.

Как можно решить эту проблему?Я хочу, чтобы кнопка отправки работала так же, как кнопка отмены, сохраняя только данные.Заранее спасибо за любой совет !!!

Answer 1

Можете ли вы попробовать следующее в Index.cshtml (убедитесь, что вы установили идентификатор для формы и исправили его ниже):

$("form").submit(function(){
   $('#modal').modal('toggle');
});

Если вы хотите сделать AJAX-запрос на сервер и сохранить данные, вы можете сделать это следующим образом (просто включите приведенный ниже код в событие щелчка на кнопке отклонения из модального окна):

$.ajax({
    type: "POST",
    url: "SaveData",
    content: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(data),
    success: function (result) {
        // do something
    },
    error: function (result) {
        // do something
    }
});

И иметь действие MVC, аналогичное:

[HttpPost]
public JsonResult SaveData()
{
    // save data
}

Редактировать : После повторного прочтения вашего вопроса вам нужно сделать Edit.cshtml частичным представлением, а затем на Index.cshtml включить ваше частичное представление в div для модального вида, например так:

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Partial("_EditView")
        </div>
    </div>
</div>

И ваш JS должен выглядеть так:

$("form").submit(function () {
    e.preventDefault();

    formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "SaveData",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: formData ,
        success: function (result) {
            // do something
        },
        error: function (result) {
            // do something
        }
    });

    $('#modal').modal('toggle');
});

JS должен быть в Index.cshtml, потому что там есть ваше частичное, попробуйте его, и вы увидите.

Answer 2

Итак, после долгих тренировок я смог найти следующее решение:

View

Index.cshtml

<table>
@foreach (var item in Model)
    <tr>
            <td>
                <button class="btn btn-primary" onclick="ActionAway(@item.AID)">Action Event</button>
            </td>
    </tr>
    }
        </tbody>
</table>

<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Action This Event</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">

            </div>
        </div>
    </div>
</div>
</div>

<script>
    var ActionAway = function (theid) {
        var url = "/Database/Edit?id=" + theid;

        $('#myModalBodyDiv1').load(url, function () {
            $('#myModal1').modal("show");
        })
    }

</script>

Всплывающее окно

Edit.cshtml

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.AID)
        <table>
        <tr>
         <td>@Html.LabelFor(model => model.Comment)</td>
         <td>@Html.TextAreaFor(model => model.Comment, new { @class = "form-control", rows = "5" })</td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Save" class="btn btn-primary" id="btnSave"/>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        </td>
        </tr>
    </table>
     </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $(document).ready(function () {
    $("#btnSave").click(function () {
        $.ajax({
            success: function () {
                $("#myModal").modal("hide");
            }
        })
    })
})
</script>

Контроллер, который мне удалось оставить без изменений. Еще раз спасибо за помощь!