Использование AJAX для связи с методом на сервере

Question

Я хочу использовать ajax / вызов веб-метода в контроллере, нажав кнопку, которая находится в BeginForm

У меня есть кнопка отправки в Html.BeginForm.Нажатие на эту кнопку, как мы знаем, отправит информацию с модели на сервер.Вот упрощенный код.

        @using (Html.BeginForm()) 


     {
           ...
                <div class="form-group">
                    @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                        @Html.ValidationMessageFor(model => model.FirstName, "Navn skal angives", new { @class = "text-danger" })
                    </div>
                </div>
...

     <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Tilføj" class="btn btn-default" id="submitBut" />
                </div>
            </div>
    }

Соответствующий контроллер выглядит следующим образом:

 [HttpPost]
    public ActionResult AttachCard(Card model, int MemberID)
    { ... }

Мне нужно добавить аннотацию [WebMethod]

Моя проблема заключается в том, чтоЯ хочу использовать JQuery Dialog для уведомления клиента, когда карта добавлена.Для этого мне нужно истинное или ложное значение с сервера.Диалоговое сообщение будет зависеть от этого логического значения.

Я написал некоторый AJAX-код.Это еще не проверено, так как я застрял

    function attachCard(MemberID, action, controller) {
    var url = '/' + action + '/' + controller;

    $.ajax({
        type: "POST",
        url: url,
        data: $("form").serialize(),
        contentType: 'application/html; charset=utf-8',
        dataType: "html",
        success: function (status) {
            alert("Test from server: " + status);
        },
        error: function (msg) {
            alert("Error");
        }
    })
}

Я хочу, чтобы эта функция ajax запускалась, когда пользователь нажимает кнопку, которую вы видите в моем Html.BeginForm.Но возможно ли это?Если я добавлю прослушиватель onclick, пока он находится в BeginForm, то я думаю, что веб-метод будет вызываться дважды, и это приведет к исключению.Я думаю о том, чтобы переместить эту кнопку из BeginForm и добавить на кнопку событие onclick.Но тогда остальная информация из модели (в BeginForm) не будет отправлена.Как я могу это сделать?

Answer 1

Вместо этого вы можете использовать Ajax.BeginForm.Вот мой рабочий пример кода

@using (Ajax.BeginForm("CreateAndUpdate", "WidgetContent", new AjaxOptions
{
    OnSuccess = "GroupSubmitted",
    OnFailure = "GroupError",
}, new { role = "form", @id = "groupform" }))
{

}

И ваши функции обратного вызова Javascript

function GroupError(ajaxContext) {
    //Error message
}


function GroupSubmitted(result) {
  if (result.success) {

  }
  else {

  }
}