2
votes

Pourquoi la valeur d'entrée est NULL lors de l'utilisation d'Ajax? (ASP.NET CORE)

Je n'ai pas accès aux valeurs d'entrée lorsque j'utilise Ajax dans View (MVC) mais j'ai accès aux valeurs d'entrée lorsque je n'utilise pas Ajax. en fait, les valeurs sont vides lorsque j'utilise Ajax

Quand j'utilise Ajax:

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

Script:

<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>

J'ai ajouté une balise helpers

<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>

La valeur est nulle avant d'entrer dans ajax, image:

json asp.net-core ajax

3 commentaires

Publier la méthode d'action du contrôleur

La valeur est nulle au-dessus de entrer dans ajax. @KirkLarkin

Vous devez sérialiser le formulaire dans l'événement de clic de bouton.

3 Réponses :

0
votes

Vos données sont définies lors du chargement du document, elles ne transmettront pas la valeur que vous entrez.

Pour une démonstration fonctionnelle, essayez le code ci-dessous:

<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>

0 commentaires

3
votes

Veuillez déplacer le

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

ci-dessous

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

En fait, votre code doit être:

<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>

Dans votre code data défini lors du chargement du document et pour cette raison la valeur est nul

0 commentaires

1
votes

Vous devez écrire comme ceci

@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>
}

And This ViewModel

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

Et enfin ceci est le code 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>
    <div class="form-group">
        <button id="ajax-button">Submit</button>
    </div>
</form>

0 commentaires