Asp .Net Core 3.1 Razor Page: Complex model binding

Question

I am struggeling with data binding and Razor pages

I was not able to find a solution. Propably I am asking not the right questions. So I hope you can help me out to point me to the right direction.

I want a page to create bookings to collect all necessary data to post it to a web api when everything is done.

On that page I want to collect necessary data for the wooking and want to add x Booking Details to the Booking.

Datamodel

public class Booking
{
   [Key]
   public int Id { get; set; }

   public string Reference { get; set; }

   public List<BookingDetail> BookingDetails { get; set; }
}
public class BookingDetail
{
   [Key]
   public int Id { get; set; }

   public int Pieces { get; set; }

   public string Marks { get; set; }
}

What I would like to to is to create a create page for a booking. So far I followed this instructions, which is working Link

This missing part is that I would like to add new Booking Details as well on the same Razor page.

So I want to see a list of all added booking Details and I want to have textboxes to add new booking Details.

My idea was to do the following, but I am receiving a System.NullReferenceException as Booking is null:

@page
@model Onlinebooking.Web.Pages.BookingModel
@{
    ViewData["Title"] = "Booking";
}

<h1>Booking4</h1>
<form method="post">
    Reference: <Input asp-for="Booking.Reference" /><br />
    Pieces: <input asp-for="Booking.BookingDetails[0].Pieces" /><br />
    Marks: <input asp-for="Booking.BookingDetails[0].Marks" /><br />
    <br />
    <input type="submit" value="submit" />
</form>

<form method="post" asp-page-handler="DeleteBookingDetails">
    @for (var i = 0; i < @Model.Booking.BookingDetails.Count(); i++)
    {
        @Html.LabelFor(x => x.Booking.BookingDetails[i].Pieces)
        @Html.LabelFor(x => x.Booking.BookingDetails[i].Marks)
    }
</form>

Is it even possible to do all that on one page or should I go in a different direction?

Thanks for your help!

This is possible; you can even use templates to define a proper EditorFor ... btw, why the -1 in @Model.Booking.BookingDetails.Count()-1? — Stefan
It's probably hard because you are trying to use your data model as a view model. They really should be different things (with probably many of the same properties). Everything you see on the UI/View should have a property in the ViewModel, but not all of those properties will end up in your database. — Neil
@Stefan I see that the -1 is a mistake and makes no sense. I edited the post. — Matze Donien

Cardi DeMonaco Jr Cardi DeMonaco Jr · Accepted Answer · 2020-07-27T18:46:31

There are a couple concepts I have had much difficulty with also in your question.

The first issue you are coming across is in the CSHTML.CS file. Initializing your variables will solve that problem.

public class BookingModel : PageModel
{
    private readonly DataDbContext _context;

    public BookingModel(DataDbContext context)
    {
        _context = context;
    }

    public List<Booking> Bookings { get; set; } = new List<Booking>();
    public Booking Booking { get; set; } = new Booking();
    public BookingDetail BookingDetail { get; set; } = new BookingDetail();

    public void OnGet()
    {
        Bookings = _context.Bookings.Include(x => x.BookingDetails).ToList();
    }
}

And on the CSHTML side I would slightly modify how you are referencing the labels and printing your FOR loops.

<form method="post" asp-page-handler="DeleteBookingDetails">
<table>
    <thead>
        <tr>
            <th><label asp-for="BookingDetail.Pieces" class="control-label"></label></th>
            <th><label asp-for="BookingDetail.Marks" class="control-label"></label></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var booking in Model.Bookings)
        {
            foreach (var bookingDetail in booking.BookingDetails)
            {
                <tr>
                    <td>@bookingDetail.Pieces</td>
                    <td>@bookingDetail.Marks</td>
                </tr>
            }
        }
    </tbody>
</table>

I have not modified Booking or BookingDetail.

I believe you will be able to figure out the rest of your functionality from here.

Asp .Net Core 3.1 Razor Page: Complex model binding

2 Answers