ASP.NET Core Razor puslapių taisymas dėl AJAX 400 netinkamų užklausų klaidų

Alternatyvus metodas: 400 blogų užklausų klaidų derinimas AJAX naudojant ASP.NET Core

„JavaScript“ naudojimas su ASP.NET Core MVC AJAX tvarkymui

$("#sendButton").click(function(event) {
    event.preventDefault();
    var userId = $("#userId").val();
    var userName = $("#username").val();
    var message = $("#message").val();
    var groupId = $("#groupid").val();
    var attachFile = $("#f").get(0).files[0];
    var formData = new FormData();
    formData.append("FileAttach", attachFile);
    formData.append("UserId", userId);
    formData.append("UserName", userName);
    formData.append("Message", message);
    formData.append("GroupId", groupId);
    $.ajax({
        type: "POST",
        url: "/Index?handler=SendMessage",
        data: formData,
        enctype: "multipart/form-data",
        processData: false,
        contentType: false,
        success: function(response) {
            console.log("Message sent successfully");
            $("#message").val('').focus();
            document.getElementById("preChat").scrollIntoView({ block: "end" });
        },
        error: function(xhr, status, error) {
            console.error("Error occurred: ", error);
        }
    });
});

Sprendimas naudojant JSON serializavimą AJAX užklausoje

AJAX įdiegimas su JSON serializavimu, kad būtų pagerintas duomenų tvarkymas

$("#sendButton").click(function(event) {
    event.preventDefault();
    var requestData = {
        UserId: $("#userId").val(),
        UserName: $("#username").val(),
        Message: $("#message").val(),
        GroupId: $("#groupid").val(),
    };
    $.ajax({
        type: "POST",
        url: "/Index?handler=SendMessage",
        data: JSON.stringify(requestData),
        contentType: "application/json",
        success: function(response) {
            console.log("JSON data sent successfully");
            $("#message").val('').focus();
            document.getElementById("preChat").scrollIntoView({ block: "end" });
        },
        error: function(xhr, status, error) {
            console.error("Error occurred: ", error);
        }
    });
});

ASP.NET Core Handler Method FormData su JSON Binding

Užpakalinės tvarkyklės įdiegimas ASP.NET Core, kad gautų FormData iš AJAX užklausos

public class InsertChatViewModel {
    public string UserId { get; set; }
    public string GroupId { get; set; }
    public string Message { get; set; }
    public string UserName { get; set; }
    public IFormFile FileAttach { get; set; }
}

public IActionResult OnPostSendMessage([FromForm] InsertChatViewModel model) {
    if (ModelState.IsValid) {
        // Process the model data
        return new JsonResult(new { success = true });
    }
    return new JsonResult(new { success = false, message = "Invalid data" });
}

AJAX ir ASP.NET Core Handler vienetų testai

AJAX funkcionalumo patikrinimas naudojant priekinės ir užpakalinės sistemos vienetų testus

using Microsoft.VisualStudio.TestTools.UnitTesting;
using Moq;
using MyProject.Pages;

[TestClass]
public class AjaxHandlerTests {
    [TestMethod]
    public void SendMessageHandler_ValidModel_ReturnsSuccess() {
        var pageModel = new IndexModel();
        var result = pageModel.OnPostSendMessage(new InsertChatViewModel {
            UserId = "123",
            GroupId = "456",
            Message = "Test message",
            UserName = "TestUser"
        });
        Assert.IsInstanceOfType(result, typeof(JsonResult));
        Assert.AreEqual(true, ((JsonResult)result).Value.success);
    }
}

Pagrindiniai klausimai apie AJAX klaidų tvarkymą ASP.NET Core

1. Kas sukelia 400 „Bad Request“ klaidą AJAX skambučiuose?
2. The 400 Blogas prašymas klaida dažniausiai atsiranda dėl netinkamai suformatuotų užklausų, kai serveris negali interpretuoti siunčiamų duomenų. Tai dažnai atsitinka dėl netinkamo naudojimo FormData, processData, ir contentType AJAX skambučiuose.
3. Kaip į AJAX užklausą įtraukti failą?
4. Naudokite FormData ir pridėkite failą prie jo naudodami formData.append("FileAttach", file). Tada nustatykite processData ir contentType į false kad AJAX neperformatuotų duomenų.
5. Kodėl mano tvarkyklės metodas ASP.NET Core neiškviečiamas?
6. Jei tvarkytojas neiškviečiamas, patikrinkite, ar naudojote tinkamą formatą URL parametras AJAX, pvz “/Page?handler=YourMethod”ir kad metodo prieigos lygis atitinka.
7. Koks yra ModelState.IsValid tikslas ASP.NET Core?
8. ModelState.IsValid patikrina, ar gauti duomenys atitinka numatytą modelį. Tai būtina serverio patvirtinimui, kad duomenys būtų tinkami naudoti ir atitiktų reikalavimus prieš juos apdorojant.
9. Kaip galiu derinti 400 klaidas siunčiant AJAX užklausas?
10. Norėdami derinti, pirmiausia patikrinkite, ar konsolėje nėra klaidų AJAX užklausos sintaksėje, patikrinkite FormData konfigūraciją ir patikrinkite serverio žurnalą, kad pamatytumėte, ar nėra užregistruota kokia nors konkreti informacija apie užklausą.
11. Kokia yra JsonResult funkcija ASP.NET Core?
12. JsonResult grąžina duomenis kaip JSON iš valdiklio veiksmo, todėl puikiai tinka AJAX atsakymams. Pavyzdžiui, naudoti new JsonResult(new { success = true }) nurodyti sėkmingą apdorojimą.
13. Ar galiu siųsti duomenis kaip JSON, o ne „FormData“?
14. Taip, jei nėra failų. Tiesiog suskirstykite duomenis naudodami JSON.stringify() ir nustatyti contentType į application/json AJAX užklausoje.
15. Ką „processData: false“ veikia AJAX iškvietime?
16. Nustatymas processData į false užtikrina, kad duomenys išliktų pradiniame formate, reikalingam FormData su failais. Be to AJAX bandytų suskirstyti duomenis į užklausos eilutę.
17. Kaip po AJAX skambučio galiu slinkti puslapį iki konkretaus elemento?
18. Naudokite element.scrollIntoView() JavaScript. Pavyzdžiui, document.getElementById("elementId").scrollIntoView({ block: "end" }) slenka prie elemento, kai veiksmas bus baigtas.
19. Kas yra [FromForm] ASP.NET Core ir kada turėčiau jį naudoti?
20. The [FromForm] atributas susieja formos duomenis su veiksmo metodo parametru. Tai ypač naudinga dirbant su FormData AJAX ir įgalina teisingą duomenų susiejimą serverio pusėje.

Pagrindiniai AJAX užklausų trikčių šalinimo patarimai

Susidūrimas ir sprendimas AJAX užklausų klaidos yra vertinga patirtis, padedanti kūrėjams suprasti kliento ir serverio komunikacijos niuansus. Šiame vadove aprašomi svarbūs žingsniai, pvz., teisingi FormData konfigūracijos ir modelio susiejimas, užtikrinantis duomenų nuoseklumą tarp kliento ir serverio. Išmokę šiuos metodus galėsite patikimai tvarkyti duomenis ir išvengti dažnų klaidų.

Taikydami šią praktiką galite išvengti klaidų, tokių kaip 400 Blogas prašymas ir pagerinti vartotojo patirtį dinaminėse programose. Kai tobulinate savo požiūrį į klaidų tvarkymą ir duomenų susiejimą, AJAX tampa labai efektyviu įrankiu kuriant internetą. 🎉