Pass Data Via Ajax to the ASP.NET CORE C#MVC Controller

Question

Hello, I’m beginner in programming, and I’m trying to pass data via Ajax to my Controller, to be honest I’m just studying so I don’t even know for sure understand the advantages of Jquery for this...

Following some examples, I did it as follows:

var nome = document.getElementById("Nome").value;
var sobrenome = document.getElementById("Sobrenome").value;
var email = document.getElementById("Email").value;
var senha = document.getElementById("Senha").value;

    if (nome == null || nome == "") {
        return alert("FALTA INFORMAÇÃO");
    }
    if (sobrenome == null || sobrenome == "") {
        return alert("FALTA INFORMAÇÃO");
    }
    if (email == null || email == "") {
        return alert("FALTA INFORMAÇÃO");
    }
    if (senha == null || senha == "") {
        return alert("FALTA INFORMAÇÃO");
    }

    $.ajax({
        type: 'POST',
        url: '../VerificaDuplicidadeCadastro/Home=email?' + email,            
        //data: email,

Well, I left commented the 'date' because in the examples everyone uses it, but I honestly do not understand how it works, so I tried to pass the email through the same URL, but in my controller I am receiving the null value.

Follow the controller:

public IActionResult VerificaDuplicidadeCadastro(string email)
    {

        var con = new Conexao();

        con.OpenConnection();

        con.CloseConnection();

        return Json(true);

    }

How can I do it properly?

Thank you.

Answer 1

Hello, good morning.

You can find some information about the advantages and disadvantages of using Ajax in this publication.

When you pass on information "by the same URL", the term we use is to pass parameters via Query String.

To perform the passing of parameters via Query String, we need to obey the following syntax:

Urlbase? Chave1=value1&Chave2=value2

You can find more information about the Query String syntax through the following link: What is the correct syntax for query strings?

That is, in your Ajax call, you are giving the url this way:

$.ajax({
   type: "POST",
   url: "../VerificaDuplicidadeCadastro/Home=email?" + email,            
   //data: email,

Notice that you are reversing the signals in the syntax, where Corret

$.ajax({
   type: "POST",
   url: "../VerificaDuplicidadeCadastro/Home?email=" + email,            
   //data: email,

Do a test and see if it solves the problem. And if it does not solve, let us know that we continue the analysis.

--

What about the use of date in the call Ajax, you can find more information on own Jquery.AJAX API. You will find that you can pass the values using the JSON format:

$.ajax({
   type: "POST",
   url: "../VerificaDuplicidadeCadastro/Home",            
   data: { "email": email },

Answer 2

In the example below I have a selector that when changing the selected item activates ajax.

No . cshtml

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="idSelecao" class="form-control">
        <option>--- Selecione um item---</option>
        <option value="exemplo">exemplo</option>
    </select>
    
    
            <script>
        $(document).ready(function () {
            $("#idSelecao").on("change", function () {
                var val = $('#idSelecao').val();
                var url = "/SeuController/NoController";
                alert(val);
                $.post(url, { parametro: val }, function (data) {
                   //--
                });
            });
        });
    </script>

On the controller

    [HttpPost]
    public void NoController(string parametro)
    {
        if (!string.IsNullOrEmpty(parametro))
        {
            TempData["parametro"] = parametro;
        }
    }