Wątek przeniesiony 2021-06-19 15:33 z C# i .NET przez somekind.

Odpowiednik fetch tego skryptu jQuery (AJAX call z controllera)

0

Witam, nie trybie tego AJAXu z controllera, ale w końcu z tego poradnika:

https://www.aspsnippets.com/Articles/ASPNet-Core-Call-Controller-using-jQuery-AJAX-in-ASPNet-Core-MVC.aspx

z tą różnicą, że mam tak w startupie: ```
services.AddControllersWithViews().AddNewtonsoftJson(options => { options.SerializerSettings.ContractResolver = new DefaultContractResolver(); });

Widzę, że jest to stara biblioteczka jQuery a i jQuery nie chce używać```
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Mógłby ktoś pomóc jak takie 1:1 co zrobić w fetch, no może zamiast alerta dać console.log. Pls bez hejtu, nie wiedziałem że użycie AJAXu w aplikacji Core sprawi mi tyle problemów. Nie umiem np, przekazać argumentów, nie wiem czy jeśli tak screenshot-20210618184448.png
to muszę w data dać np.

name: "examplestring";

czy

"name":  "examplestring";

Pozdrawiam.

2
document.getElementById('btnGet').addEventListener('click', async () => {
  try {
    const response  = await fetch('/Home/AjaxMethod', {
      method: 'POST', 
      body: { name: document.getElementById('txtName').value },
    });
    const data = await response.json();
    console.log(`Hello: ${data.Name}.\nCurrent Date and Time: ${data.DateTime}`);
  } catch (e) {
    console.log(e);
  }
});

Jakoś tak.

I nie ten dział, bo to nie ma nic wspólnego z C# :P

0

Niestety, natknąłem na problem znowu, i nie wiem czemu ten pierwszy skrypt nie bangla. To z jQuery działa, ale nie moge przekazać parametru name do kontrolera w opcji Fetch.
W pierwszym przypadku jeśli zostawię żeby zwrócił sam obiekt, to zwróci (czyli działa, ale już nie przekazuje name) - ale bez ustawieniu parametru name. Do rzeczy, kod wygląda tak: czemu pierwszy nie działa (fetch) a drugi (jQuery) tak?:


<script type="text/javascript">

    function ConsoleTextTest() {
        console.log("It's working")
    }

    document.getElementById('btnGet').addEventListener('click', async () => {
        try {
            const response = await fetch('/Games/AjaxMethod2', {               
                method: 'POST',
                body: { name: document.getElementById('txtName').value },
            });
            const data = await response.json();
            console.log(data.Name); //dając (data) zwraca obiekt Game, date.Name zwraca null
        } catch (e) {
            console.log(e);
        }
    });


    $(function () {
        $("#btnGetJquery").click(function () {
            $.ajax({
                type: "POST",
                url: "/Games/AjaxMethod",
                data: { "name": $("#txtName").val() },
                success: function (response) {
                    alert("Hello: " + response.Name);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });

  


</script>

Kontroller:

   [HttpPost]
        public JsonResult AjaxMethod(string name)
        {
            Game game = new Game
            {
                GameId = 1,
                Name = name
            };

            return Json(game);
        }


        [HttpPost]
        public JsonResult AjaxMethod2(string name)
        {
            Game game = new Game
            {
                GameId = 1,
                Name = name
            };

            return Json(game);
        }

No i html:

<input type="text" id="txtName" />
<input type="button" id="btnGet" value="Ajax Test" />
<input type="button" id="btnGetJquery" value="Ajax jQuery Test" />

1 użytkowników online, w tym zalogowanych: 0, gości: 1