Ajax.BeginForm은 Ajax 스크립트를 실행하지 않고 포스트백으로 뒤로 넘어갑니다.

Ajax.BeginForm은 Ajax 스크립트를 실행하지 않고 포스트백으로 뒤로 넘어갑니다.

이 문제를 해결책으로 업데이트하겠습니다, 스택 오버플로우에서 찾을 수 없어서 제 문제와 해결책을 포함하고 싶었습니다.솔루션에 참여하고 싶으시면 자유롭게 참여하세요.

Visual Studio 2013을 사용하여 새로 만든 'Empty' MVC5 프로젝트가 있습니다.나는 가능하면 AJAX의 행동을 원했고 원했습니다.아약스 사용.BeginForm은 MVC3에서 항상 간단해서 MVC5에서도 그럴 줄 알았습니다.

그러나 AjaxOptions 내부의 OnBegin, OnFailure 또는 OnSuccess에서 지정한 자바스크립트 기능은 제출 버튼을 클릭하면 호출되지 않습니다.Ajaxless post가 서버로 전송되는 대신 Request를 조사하면 이는 사실로 나타납니다.거짓을 반환하는 AjaxRequest입니다.

그렇다면 어떤 이유에서인지 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();
    }

저는 이 문제에 대한 다른 게시물을 확인했지만 해결책을 찾지 못했습니다.일부에서는 가능한 해결책을 제시했지만, 저는 마이크로소프트 CDN(http://www.asp.net/ajaxlibrary/cdn.ashx) 에 혼란을 겪었습니다.

마이크로소프트 CDN에는 다음과 같은 섹션이 있습니다.

다음 ASP.NET MVC JavaScript 파일은 다음 CDN에서 호스팅됩니다.

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 

그들은 당신이 MVC5에 필요한 유일한 스크립트는 jquery.validate.unobrusive뿐이라고 제안할 것입니다.

MVC 프로젝트의 일부로 로컬 복사본을 가져오려면 VS2013에서 MVC 5 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 "Manage NuGet Packages"를 선택합니다."Online"을 선택하고 "jquery.unobjective-ajax"를 검색한 다음 "Microsoft"를 설치합니다.jQuery.눈에 거슬리지 않습니다.아약스."

더미 MVC5 프로젝트에 대해서도 같은 이슈가 있었습니다.

BundleConfig에 추가

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

레이아웃에 추가합니다.cshtml

@Scripts.Render("~/bundles/jqueryval")

제 프로젝트에 새로운 파일을 추가하지 않았기 때문에 MVC 4 또는 5 웹 프로젝트가 있다면 js 파일을 추가해야 하는지 의문입니다.

제 문제가 해결됐어요.잘 해결됐으면 좋겠네요.

다음 스크립트를 레이아웃에 포함시킨 이후로 모든 것이 작동하기 시작했습니다.

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

마이크로소프트 CDN에서는 이 스크립트가 MVC3에 특화된 것처럼 보입니다.

가능하면 더 나은 방법을 제공하거나 "이 스크립트가 MVC 프로젝트 템플릿(VS2013)에 포함되지 않는 이유는 무엇입니까?"라는 질문에 답하십시오.

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>

은 실제로 순서로 있는지 으로는 ,@Scripts.Render("~/bundles/jquery") 앞에 @Scripts.Render("~/bundles/jqueryval"))

어떤 이유에서인지 새 프로젝트를 만들고 nuget 패키지를 추가할 때 기본적으로 그렇지 않았습니다.

jquery.unobrusive-ajax.js라는 javascript 파일에 대한 참조를 추가하는 것이 저에게 효과가 있었습니다.

나에게 그것은 약간 이상하고 직관에 어긋나는 것이었습니다.

사용자 지정 경로 속성과 함께 컨트롤러에서 페이지가 표시되었습니다.

[Route("contact")]
[HttpGet]
public ActionResult Contact()
{
    return this.View();
}

그러나 AjaxRequest를 처리하는 POST 조치는 [Route("contact")] 속성이 없었기 때문에 작동하지 않았습니다.

Changing 는 을 하는 이었습니다 이었습니다 : <a href="#" onclick="$('form')[0].submit(); return false;">Submit</a>안으로<button type="submit" value="">Submit</button>내 문제를 해결했습니다.

언급URL : https://stackoverflow.com/questions/21831451/ajax-beginform-doesnt-fire-ajax-script-falls-back-on-postback