Asp.net Core의 Ajax 도우미 태그 설명서

Asp.net Core의 Ajax 도우미 태그 설명서

Asp.net Core에 Ajax 도우미 태그 문서에 대한 링크가 있습니까?asp.net core로 아약스를 배우려고 하는데 문서가 없습니다.asp.net mvc에서 우리는 @Ajax를 사용합니다.Ajax에 대한 작업에 AjaxOptions 메서드를 생성한 다음 사용합니다.많은 시간을 검색한 후에 이 링크를 찾았습니다.https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/ 이 링크에는 asp.net core에서 ajax를 사용하여 작업하는 방법이 있습니다.저는 제 프로젝트에 그것을 구현하고 성공적입니다.그런 다음 문서를 검색했지만 아무것도 발견하지 못했습니다.나는 그것의 문서 링크를 원합니다.문서화를 위해 아무나 도와주세요.

쪽는없다습니미우도와 같은 @Ajax.FormASP는 코어입니다.NET 코어.당신은 아마도 비슷한 기능을 위해 당신만의 태그 도우미를 작성할 수 있을 것이지만, 나는 이것을 하는 사람을 본 적이 없습니다.일반적인 아이디어는 클라이언트 측 동작을 원할 때 실제 자바스크립트를 작성하는 것입니다.일반적으로 서버 측면 마법 뒤에 이러한 것들을 숨기는 것은 최선의 방법이 아닙니다.

jquery-ajax-unobtrusive 클라이언트측 동작을 추가하여 최종 렌더링 페이지에서 다양한 속성을 찾아 표준 양식 위에 기능을 추가하는 JavaScript 패키지입니다.따라서 이것은 완전한 자바스크립트 기반 솔루션이 될 것입니다.

안타깝게도, 그것에 대한 문서가 없는 것 같습니다.당신은 그것의 소스 코드를 보고 무엇이 가능한지 혹은 불가능한지 알아낼 수 있습니다.

---

jquery-ajax-unobtrusive

소스(Disclaimer: 직접 기능을 테스트하지 않고)를 간단히 살펴보니 패키지의 지원되는 데이터 속성과 사용 가능한 기능이 다음과 같습니다.

• data-ajax="true"양식에 대한 기능을 활성화합니다.
• data-ajax-update모드를 사용하여 AJAX 결과로 업데이트되는 요소의 선택기입니다.
• data-ajax-mode
  • data-ajax-mode="before"요소에 데이터를 추가합니다.
  • data-ajax-mode="after"요소에 데이터를 추가합니다.
  • data-ajax-mode="replace-with"요소를 데이터로 바꿉니다.
  • 그렇지 않으면 요소의 HTML 내용을 데이터로 설정합니다.
• data-ajax-confirm양식 제출을 확인하기 위해 사용자에게 표시되는 메시지입니다.
• data-ajax-loading로드하는 동안 표시되는 요소의 선택기입니다.
• data-ajax-loading-duration(기본값: 0) – 로드 요소를 표시/숨기기 위한 애니메이션 기간입니다.
• data-ajax-methodAJAX 요청에 대한 HTTP 메서드를 덮어쓸 수 있습니다.
• data-ajax-urlAJAX 요청의 URL을 덮어쓸 수 있습니다.
• data-ajax-cache다음 값으로 설정"true"jQuery AJAX 매개 변수를 사용하지 않도록 설정합니다.
• data-ajax-begin요청 시작 전 콜백 함수(인수:xhr)
• data-ajax-complete요청이 완료되면 콜백 함수(인수:xhr,status)
• data-ajax-success요청이 성공한 경우 콜백 함수(인수:data,status,xhr)
• data-ajax-failure요청 실패 시 콜백 함수(인수:xhr,status,error)

콜백 함수는 jQuery의 함수와 동일합니다.beforeSend,complete,success,그리고.failure보기에서 함수에 대한 JavaScript 개체 경로를 사용하여 콜백을 지정할 수 있습니다.

예를들면data-ajax-success="foo.bar.onSuccess"함수를 호출합니다.foo.bar.onSuccess()즉, 그것은 물체를 찾을 것입니다.foo에서window이해하다, 이해하다, 이해하다, 이해하다, 이해하다, 이해하다, 이해하다bar회원, 통화onSuccess그것에 관하여

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

아약스 태그 도우미

aspnet core에서 Tag Helper를 사용하여 링크 및 Ajax 양식을 사용하는 간단한 솔루션

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

둘째, wwwroot의 js 폴더에서 AjaxTagHelper.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>

Core에서 오래된 스타일의 Ajax 도우미를 찾고 있다면 이 Nuget 패키지가 도움이 될 수 있습니다.

AsNetCore.방해가 되지 않습니다. 에이잭스.

다음을 사용하여 설치할 수 있습니다.

PM> Install-Package AspNetCore.Unobtrusive.Ajax

이렇게 하면 다음과 같은 도우미를 사용할 수 있습니다.

@Html.AjaxActionLink()
@Html.AjaxBeginForm()
@Html.AjaxRouteLink()

Github에 대한 자세한 내용은 다음과 같습니다.더 많은 설명서를 찾을 수 있습니다.

프로젝트에 대한 Github URL

언급URL : https://stackoverflow.com/questions/50148418/ajax-helper-tags-documentation-in-asp-net-core