Ajax.BeginForm OnSuccess не срабатывает

Я использую этот частичный вид

@model CreateConfigEntityModel

<div class="row">
@using (Ajax.BeginForm("AddElement", "MerchantSites", new { merchantId = @Model.MerchantId }, new AjaxOptions
{
  HttpMethod = "POST",
  OnSuccess = "alert('ok')"
},
new { id = "addConfigForm" }
))
{
  @Html.LabelFor(m => m.EntityName)
  @Html.TextBoxFor(m => m.EntityName)
  @Html.ValidationMessageFor(m => m.EntityName)

  @Html.LabelFor(m => m.DefaultValue)
  @Html.TextBoxFor(m => m.DefaultValue)
  @Html.ValidationMessageFor(m => m.DefaultValue)

  <input type="submit" value="Ajouter" class="tiny button" /> 
}
</div>

Контроллер

public JsonResult AddElement(CreateConfigEntityModel model)
{
    if (ModelState.IsValid)
    {
        _merchantSitesManager.AddEntity(model.EntityName, model.DefaultValue);
        return Json(new { code = 1 }, JsonRequestBehavior.AllowGet);
    }
    else
        return Json(new { code = 0 }, JsonRequestBehavior.AllowGet);
}

Это то, что отображается после отправки формы (элемент добавляется правильно)

введите здесь описание изображения

Не уверен, что я делаю неправильно.

Использование библиотеки JavaScript jQuery версии 2.1.1

У меня есть в моем web.config

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Я называю свое частичное представление так

@{ Html.RenderPartial("_CreateConfigEntity", new CreateConfigEntityModel(Model.MerchantId)); }

person ThunderDev    schedule 14.10.2014    source источник
comment
Где точка останова попадает в контроллер.   -  person Aravind Sivam    schedule 14.10.2014
comment
Контроллер вызывается с допустимым состоянием модели   -  person ThunderDev    schedule 14.10.2014
comment
Я проверил ваш код, он работает для меня.   -  person Aravind Sivam    schedule 14.10.2014
comment
пользовательский инструмент fiddler для проверки запроса и ответа на вызов ajax.   -  person Aravind Sivam    schedule 14.10.2014
comment
Проблема в том, что вся страница обновляется, URL меняется на AddElement. Я просто хочу вместо этого вызвать свой метод успеха.   -  person ThunderDev    schedule 14.10.2014


Ответы (4)


Предполагая, что у вас есть совершенно новый проект, вам нужно сделать следующие вещи, чтобы заставить его работать. Шаблон ASP.NET MVC не поддерживает ненавязчивый AJAX по умолчанию:

  1. Добавьте пакет "Microsoft.jQuery.Unobtrusive.Ajax" из Nuget. в свой проект. Вы можете сделать это, щелкнув проект правой кнопкой мыши и выбрав «Управление пакетами Nuget».
  2. Добавьте «jquery.unobtrusive-ajax.js» на свою страницу. Если вы используете функцию «связывания» в System.Web.Optimization, одним из простых способов было бы добавить ее в комплект jQuery:

    bundles.Add(new ScriptBundle("~/bundles/jquery")
        .Include("~/Scripts/jquery-{version}.js")
        .Include("~/Scripts/jquery.unobtrusive-ajax.js"));
    

    Вы также можете просто добавить тег <script>, указывающий на скрипт.

Предполагая, что страница загружает jQuery и jquery.unobtrusive-ajax.js, опубликованный вами код должен работать.

person Andrew Whitaker    schedule 14.10.2014
comment
Я уже сделал это и могу видеть оба файла при проверке источника моей страницы. - person ThunderDev; 14.10.2014
comment
Есть ли ошибки JavaScript на странице при нажатии на кнопку? Возможно, вам придется включить сохранение консоли браузера между запросами, так как в настоящее время вы делаете полный пост, и любые сообщения об ошибках исчезнут. - person Andrew Whitaker; 14.10.2014
comment
Плохо, у меня не было jquery.unobtrusive-ajax.js включено. Прости - person ThunderDev; 17.10.2014
comment
Черт. Я всегда забываю об этом nuget.package. Я считаю, что он должен быть добавлен по умолчанию в шаблон MVC! В любом случае, они должны поставить кнопку любви на stackoverflow... ‹3 - person Cătălin Rădoi; 03.02.2017
comment
У меня была такая же проблема, я забыл добавить ‹script src=~/Scripts/jquery.unobtrusive-ajax.min.js›‹/script› - person Ashley Kilgour; 05.04.2017

Добавьте ссылку на следующие библиотеки js:

  • jquery-{версия}.min.js
  • MicrosoftAjax.js
  • MicrosoftMvcAjax.js
  • jquery.validate.min.js
  • jquery.validate.unobtrusive.js
  • jquery.ненавязчивый-ajax.js
person Hamid Narikkoden    schedule 02.09.2015

Да, я знаю, почему эти методы не вызываются, вам всегда нужно ссылаться на ненавязчивый файл ajax: jquery.unobtrusive-ajax.min.js

person tika    schedule 04.04.2018

В дополнение к другим ответам стоит проверить, что в вашем файле web.config включены проверки и ненавязчивые компоненты:

<appSettings>
...
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
...
</appSettings>
person Anthony    schedule 06.11.2020