Почему входное значение NULL при использовании Ajax? (ASP.NET CORE)

Question

У меня нет доступа к входным значениям при использовании Ajax в View (MVC), но у меня есть доступ к входным значениям, когда не используется Ajax. на самом деле значения пустые при использовании Ajax

Когда я использую Ajax:

<form id="Form1" asp-action="Register" asp-controller="UserPanel" method="post">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-12 col-12  .sm-right" id="margin-top">
            <span>Name:</span>
            <input type="text" asp-for="Name" class="form-control">
        </div>
        <div>
            <span>Number:</span>
            <input type="text" asp-for="Number" class="form-control">
        </div>
    </div>
    <input type="reset" value="send" id="ajax-button" class="btn btn-success btn-sm waves-effect waves-light submit-btn" />
</form>

Сценарий:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        var data = $('#Form1').serialize();
        $('#ajax-button').click(function () {
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

Я добавил тег помощников

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, SmsWebClient
@using Microsoft.AspNetCore.Razor.TagHelpers;

Значение равно нулю до ввода в ajax, изображение:

Answer 1

Пожалуйста, переместите

var data = $ ('# Form1'). Serialize ();

ниже

$ ('# ajax-button'). click (function () {

Фактически, ваш код должен быть:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        $('#ajax-button').click(function () {
        var data = $('#Form1').serialize();
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

В вашем коде data устанавливается при загрузке документа и по этой причине значение равно нулю

Answer 2

Вы должны написать так

<form id="Form1" asp-action="Register" asp-controller="UserPanel" method="post">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-12 col-12  .sm-right" id="margin-top">
            <span>Name:</span>
            <input type="text" asp-for="Name" class="form-control">
        </div>
        <div>
            <span>Number:</span>
            <input type="text" asp-for="Number" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <button id="ajax-button">Submit</button>
    </div>
</form>

И эта модель представления

 public class RegisterVm
    {
        public string Name { get; set; }
        public string Number { get; set; }
    }

И, наконец, это код Ajax

@section Scripts{
    <script>
        $(document).ready(function () {

            var url = $('#Form1').attr("action");

            var model = $('#Form1').serialize();

            var token = $('input[name=__RequestVerificationToken]').val();

            model.__RequestVerificationToken = token;

            $('#ajax-button').click(function () {
                $.ajax({
                    type: $('#Form1').attr("method"),
                    data: model,
                    url: url,
                    success: function (result) {
                        alert('Done');
                    },
                    error: function () {
                        alert("error");
                    }
                });
            })
        })
    </script>
}

Answer 3

Ваш data установлен при загрузке документа, он не пропустит введенное вами значение.

Для рабочей демонстрации попробуйте код ниже:

<script>
    $(document).ready(function () {
        $('#ajax-button').click(function () {
            var url = '@Url.Action("Register", "Home")';
            var data = new FormData();
            data.append('Name', $('#Name').val());
            data.append('Number', $('#Number').val());

            $.ajax({
                type: "POST",
                data: data,
                url: url,
                processData: false,
                contentType: false,
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>