내장된 기능을 사용하여 MVC6의 JQuery AJAX를 사용하여 면도기 양식 제출

내장된 기능을 사용하여 MVC6의 JQuery AJAX를 사용하여 면도기 양식 제출

MVC6의 jQuery AJAX를 사용하여 ASP의 자동 바인딩 기능을 사용하여 폼을 제출할 수 있는 특별한 방법이 있는지 알고 싶습니다.NET MVC. MVC의 다른 버전에서는 jquery.unoblusive-ajax를 사용하여 간단히 사용할 수 있습니다.

@using (Ajax.BeginForm("SaveData", new AjaxOptions(){}

MVC6에서는 변경사항이 있기 때문에 폼이 송신되었을 때 서버에 통상적인 AJAX 투고를 하는 것 외에 새로운 권장방법이 무엇인지 궁금합니다.즉, 각 입력 필드의 값을 수동으로 가져와 JSON으로 변환한 후 컨트롤러로 전송하면 모든 것이 ViewModel에 바인딩됩니다.

다음 JavaScript for AJAX를 사용하면 AJAX 폼 설정이 중요합니까?

$('form').submit(function () {
    $.ajax({
        type: "POST",
        url: "/Products/Create/",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
});

Ajax도 같은 방법으로 동작하지만 @Ajax 도우미 대신 새로운 MVC 6 태그 도우미를 사용합니다('jquery' 및 'jquery.unoblusive-ajax' 스크립트를 참조하는 것을 잊지 마십시오).

JQuery Untruptive Ajax가 ASP에 있습니다.Net GitHub repo는 Bower를 끌어당길 수 있습니다.

새로운 MVC TagHelpers를 사용하면 다음과 같이 폼을 선언할 수 있습니다.

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
...
</form>

이전 버전의 MVC에서 Ajax Helper에 존재하던AjaxOptions를 사용하려면 이러한 속성을 추가하면 다음과 같이 폼태그를 실행할 수 있습니다.

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content">
...
</form>
<div id="content"></div>

양식에서 사용할 수 있는 HTML 속성(이전 AjaxOptions)은 다음과 같습니다(원본 원본).

+------------------------+-----------------------------+
|      AjaxOptions       |       HTML attribute        |
+------------------------+-----------------------------+
| Confirm                | data-ajax-confirm           |
| HttpMethod             | data-ajax-method            |
| InsertionMode          | data-ajax-mode              |
| LoadingElementDuration | data-ajax-loading-duration  |
| LoadingElementId       | data-ajax-loading           |
| OnBegin                | data-ajax-begin             |
| OnComplete             | data-ajax-complete          |
| OnFailure              | data-ajax-failure           |
| OnSuccess              | data-ajax-success           |
| UpdateTargetId         | data-ajax-update            |
| Url                    | data-ajax-url               |
+------------------------+-----------------------------+

또 하나의 중요한 변경은 요구가 실제로 AJAX 요청인지 서버 측에서 확인하는 방법입니다.이전 버전에서는 단순히Request.IsAjaxRequest().

MVC6에서는 이전 MVC 버전(원래 소스)에 존재했던 것과 같은 옵션을 추가하려면 단순 확장을 작성해야 합니다.

/// <summary>
/// Determines whether the specified HTTP request is an AJAX request.
/// </summary>
/// 
/// <returns>
/// true if the specified HTTP request is an AJAX request; otherwise, false.
/// </returns>
/// <param name="request">The HTTP request.</param><exception cref="T:System.ArgumentNullException">The <paramref name="request"/> parameter is null (Nothing in Visual Basic).</exception>
public static bool IsAjaxRequest(this HttpRequest request)
{
  if (request == null)
    throw new ArgumentNullException("request");

  if (request.Headers != null)
    return request.Headers["X-Requested-With"] == "XMLHttpRequest";
  return false;
}

여기 AJAX 폼에 관한 유튜브 튜토리얼이 있습니다.이 GitHub 링크에서 프로젝트를 다운로드 할 수 있습니다.여기에는 AJAX에 사용할 스크립트가 포함되어 있습니다.

위 프로젝트에서 복사한 샘플 스타일:

<form asp-controller="Home1" asp-action="SaveForm" 
      data-ajax="true" 
      data-ajax-method="POST"
      data-ajax-mode="replace" 
      data-ajax-update="#content"
      data-ajax-loading  ="#divloading"
      data-ajax-success="Success"
      data-ajax-failure ="Failure">
    <div class="form-group">
        <div>  <h4>@Html.Label("Name")</h4> </div>
        <div>  @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div>
    </div>
    <div class="form-group">
        <div><h4>@Html.Label("Age")</h4></div>
        <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div>
    </div>
    <br/>
    <input type="submit" name="Submit"  class="btn btn-block btn-success" />
</form>

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

aspnet core에서 Tag Helper를 사용하여 링크 및 Ajax 폼을 사용하기 위한 간단한 솔루션

먼저 확장 폴더에서 프로젝트에 AjaxTagHelper 클래스를 복사합니다.

다음으로 AjaxTagHelper.js 파일을 wwwroot의 js 폴더에서 복사하여 프로젝트에 추가합니다.

그런 다음 다음을 수행합니다.viewImports 파일을 열고 다음 코드를 추가합니다.

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

Action Ajax를 사용하려면 태그 대신 다음 코드를 추가합니다.

  <ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
                 class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
        Delete
    </ajax-action>

다음 코드를 사용하여 AJAX를 사용하여 양식을 서버로 보냅니다.

<div class="row">
    <form id="frmCreate" class="col-sm-9">
        <div class="row">
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Name" name="Name" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Family" name="Family" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Email@site.com " name="Email" class="input-group" type="email" />
            </div>
        </div>
    </form>
    <div class="col-sm-3">
        <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
                     class="btn btn-sm btn-success">
            Create
        </ajax-button>
    </div>
</div>

마지막으로 표시에 필요한 스크립트를 추가하고 아래 코드를 확인합니다.

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>

언급URL : https://stackoverflow.com/questions/35202804/submitting-a-razor-form-using-jquery-ajax-in-mvc6-using-the-built-in-functionali