Ajax.BeginForm не запускает AJAX script, возвращается к обратной передаче
Я обновлю эту проблему с помощью решения, я хотел бы включить мою проблему и решение, поскольку я не смог найти ее в Stackoverflow. Если вы хотите перейти с помощью решения, не стесняйтесь.
У меня есть недавно созданный проект "Пустой" MVC5, созданный с использованием Visual Studio 2013. Мне было необходимо, чтобы по возможности было и нужно поведение AJAX. Использование Ajax.BeginForm всегда было прямым в MVC3, поэтому я думал, что это будет и в MVC5.
Однако ни одна из функций javascript, которые я указал в OnBegin, OnFailure или OnSuccess внутри AjaxOptions, не вызывается, когда я нажимаю кнопку отправки. Вместо этого сообщение Ajaxless отправляется на сервер, это показало, что это правда, рассматривая Request.IsAjaxRequest, который возвращает false.
Я пришел к выводу, что по какой-то причине ajax вообще не используется. Я проверил ряд вещей, таких как web.config, мои сценарии макета и т.д.
Мой макет включает следующие скрипты:
<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
В моем web.config есть:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
</configuration>
Мой взгляд:
@model ContactEnquiryViewModel
@{
AjaxOptions ContactOptions = new AjaxOptions()
{
OnBegin = "OnConactFormBegin()",
OnSuccess = "OnContactFormSuccess()",
OnFailure = "OnContactFormFailure()"
};
}
<div id="EnquiryFormContainer">
@using (Ajax.BeginForm("Contact", "Home", new { formName = "EnquiryForm" }, ContactOptions))
{
@Html.HiddenFor(m => m.Subject)
<div class="field">
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName)
<div class="validation">
@Html.ValidationMessageFor(m => m.FirstName)
</div>
</div>
<div class="field">
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName)
<div class="validation">
@Html.ValidationMessageFor(m => m.LastName)
</div>
</div>
<div class="field">
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
<div class="validation">
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="field">
@Html.LabelFor(m => m.PhoneNumber)
@Html.TextBoxFor(m => m.PhoneNumber)
<div class="validation">
@Html.ValidationMessageFor(m => m.PhoneNumber)
</div>
</div>
<div class="field">
@Html.LabelFor(m => m.Comments)
@Html.TextAreaFor(m => m.Comments)
<div class="validation">
@Html.ValidationMessageFor(m => m.Comments)
</div>
</div>
<div id="submitButtonContainer">
<input type="submit" value="Submit" name="submit" />
</div>
}
</div>
Мое действие контроллера (незавершенное):
[HttpPost]
public ActionResult Contact(ContactViewModel viewModel, String formName = "")
{
if (Request.IsAjaxRequest())
{
return new EmptyResult();
}
return new EmptyResult();
}
Я проверил несколько других сообщений по этой проблеме и не смог найти решение. Хотя некоторые намекали на возможное решение, я был смущен Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx).
В Microsoft CDN они имеют следующий раздел:
В этом CDN размещены следующие файлы JavaScript ASP.NET MVC:
ASP.NET MVC 5.0
http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js
ASP.NET MVC 4.0
http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js
ASP.NET MVC 3.0
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js
ASP.NET MVC 2.0
http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.debug.js
ASP.NET MVC 1.0
http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js
Кажется, они предлагают только script, который вам понадобится для MVC5, это jquery.validate.unobtrusive.
Ответы
Ответ 1
Все началось, так как я включил в свой макет следующий script:
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
В Microsoft CDN это выглядит так, как будто этот script является MVC3.
Не стесняйтесь, если это возможно, внести более эффективные способы или ответить на вопрос: "Почему этот script не включен в шаблон проекта MVC (VS2013)?"
Ответ 2
Чтобы получить локальную копию как часть вашего проекта MVC "Из VS2013, щелкните правой кнопкой мыши по проекту MVC 5, выберите" Управление пакетами NuGet".
Выберите "Интернет" и найдите "jquery.unobtrusive-ajax",
Затем установите "Microsoft.jQuery.Unobtrusive.Ajax".
Ответ 3
У меня была такая же проблема с манекеном MVC5.
Добавьте это в свой BundleConfig
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
Добавьте это в свой layout.cshtml
@Scripts.Render("~/bundles/jqueryval")
Я не добавлял никаких новых файлов в свои проекты, поэтому, если у вас есть веб-проект MVC 4 или 5, я сомневаюсь, что вам нужно будет добавить дополнительные js файлы.
Это решило мою проблему. Надеюсь, он решает вашу проблему.
Ответ 4
У меня была такая же проблема, и на самом деле решение заключалось в том, чтобы ссылки script находились в правильном порядке (в частности, что @Scripts.Render("~/bundles/jquery")
появляется перед @Scripts.Render("~/bundles/jqueryval")
)
По какой-то причине это было не так по умолчанию при создании нового проекта и добавлении пакетов nuget
Ответ 5
Вы проверили, содержит ли ваш файл web.config
<appSettings>
<!-- this one is for client side validation -->
<add key="ClientValidationEnabled" value="true" />
<!-- this is for unobtrusive ajax -->
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>