[SOLVED] Razor pages: how to make a model with a foreign key

Issue

I’m doing a small project using Razor pages. It’s about cars. So I’ve created two scaffolded items from two classes: Maker and Model.

This is the Maker class

public class Maker
{
    public int Id { get; set; }
    public string Name { get; set; }
}

And this is the Model class

public class Model
{
    public int Id { get; set; }
    public Maker Maker { get; set; }
    public string Name { get; set; }
}

public class CreateModel : PageModel
{
    private readonly ArchivioItalianeDaCorsa.Data.ApplicationDbContext _context;
    public List<SelectListItem> makers { get; set; }

    public CreateModel(ArchivioItalianeDaCorsa.Data.ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        caseAutomobilistiche = _context.makers.Select(maker => new 
        SelectListItem
        {
            Text = maker.Name,
            Value = maker.Id.ToString()
        }).ToList();
        return Page();
    }

    [BindProperty]
    public Modello Modello { get; set; }

    // To protect from overposting attacks, see https://aka.ms/RazorPagesCRUD
    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        _context.Model.Add(Modello);

        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }
}

And last but not the least, the html

<h1>Create</h1>

<h4>Modello</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Model.Maker" class="control-label"></label>
                <select class="form-select" aria-label="Marca select" asp-items="Model.makers" asp-for="Model.Maker" name="Marca">
                   <option>Seleziona una marca</option>
                </select>
                <label asp-for="Model.Name" class="control-label"></label>
                <input asp-for="Model.Name" class="form-control" />
                <span asp-validation-for="Model.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

My problem appears when I try to create a new Model. In onGet I query the database to show all the possible makers in a select tag, but I can’t bind the choice to the object that needs to be saved.

Is the class Model wrong?

PS: the code was initially written in Italian, I’ve translated it while asking the question so if something is not clear let me know and I will fix the question

Solution

asp-items="Model.makers" asp-for="Model.Maker" name="Marca"

1.According to asp-items="Model.makers" in your html , you use makers to bind data. In your OnGet, change caseAutomobilistiche into makers

2.Delete name attribute , because asp-for will generate name to bind the data .

3.change asp-for="Model.Maker"into asp-for="Model.Maker.Id"

You can get MakerId,then do your other things.

Result:

enter image description here

Answered By – Qing Guo

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *