How to read c# data object from server with AJAX and show its fields in html

Hi @Pablo The Tiger ,

Thanks for reaching out.

The issue here is that the line below is mixing server-side Razor/C# with client-side JavaScript, which won’t work:

@Model.car = JSON.parse(this.responseText);

@Model.car is evaluated on the server when the page is rendered, while JSON.parse(...) runs later in the browser after the AJAX request completes. By that time, the Razor code has already finished executing, so the browser cannot assign values back to the server-side model.

Instead, the approach is to parse the JSON response in JavaScript and then populate the input fields directly in the page (DOM).

For example:

xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var car = JSON.parse(this.responseText);

        document.querySelector("[name='car.Brand']").value = car.brand;
        document.querySelector("[name='car.Year']").value = car.year;
        document.querySelector("[name='car.Price']").value = car.price;
    }
};

Your handler (OnGetDataResponse) is already returning the Car object as JSON correctly, so once you parse the response and assign the values to the inputs on the client side, the fields should populate as expected.

Also, please treat the snippet above as a general reference. Depending on how your page is structured (input names, selectors, or layout), you may need to adjust the selectors or logic slightly to fit your project.

If you found my response helpful or informative in any way, I would greatly appreciate it if you could follow this guidance provide feedback. 

Thank you.

This time I'm trying to read an object from the server by AJAX and fill the inputs (textboxes) in the html ... but it does nothing.

I suggest that you use partial view to render html source in the div tag. In addition, although they are not the main issues in this question, please consider adding the id to the Car class and replace the XMLHttpRequest with the fetch API.

Shown below is working sample:

Ajax.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPages.Pages
{
    public class AjaxModel : PageModel
    {
        public void OnGet()
        {
        }

        public IActionResult OnGetDataResponse(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var cars = new List<Car>
            {
                new Car { Id = 1, Brand = "Ford", Year = 2022, Price = 20000 },
                new Car { Id = 2, Brand = "Renault", Year = 2019, Price = 25000 },
                new Car { Id = 3, Brand = "Audi", Year = 2025, Price = 40000 }
            };

            // returns default(Car) if not found. default(T) is null for reference types
            var car = cars.FirstOrDefault(c => c.Id == id);
            if (car == null)
            {
                return NotFound();
            }

            return Partial("_CarPartial", car);
        }
    }

    public class Car
    {
        // Add id
        public int Id { get; set; }
        public string? Brand { get; set; }
        public int Year { get; set; }
        public int Price { get; set; }
    }
}

_CarPartial.cshtml (Partial View)

@model RazorPages.Pages.Car

<label asp-for="Brand" class="form-label">Brand:</label>
<input type="text" asp-for="Brand" class="form-control" />
<label asp-for="Year" class="form-label">Year:</label>
<input type="text" asp-for="Year" class="form-control" />
<label asp-for="Price" class="form-label">Price:</label>
<input type="text" asp-for="Price" class="form-control" />

Result: