asp.net-coreroutesdropdownrazor-pagesviewdata

How to Post New Record to Table and Pass that ID to another page to Create a Related Record


I am trying to Add a New Client on the Add Client (Create) page of my razor app. After the user fills out that page and clicks "Add Client" to commit the data to the Client.db, I want my app to then navigate to the Add Attendance (Create) page for my Attendance.db. The Attendance Create page has a dropdown list to select the client's ID (so that this page can also be accessed independently of the Create Client page).

What I would like to have happen is that the newly created client's ID would be the default to show in the dropdown when the Create Attendance page opens (when accessed by the Submit from the Add Client page (otherwise there should be none selected). Currently, my Create Client page will create the client record, but I'm not getting something set correctly to make the dropdown default to that client id. Can someone please assist? I have read about the asp-route-value in MS documentation as well as the ViewData info, but do not completely understand it yet. So, not sure if it is that or if I need to set the default value of the dropdown?

Here is a summary of the applicable code I have so far:

My Create.cshtml for adding a client and navigating to the Create Attendance page:

        <div>
            <button type="submit" asp-route-clientid="@ViewData["clientid1"]" class="btn btn-primary" style="width:150px;">Add Client -> Go To Attendance</button>
            <a asp-page="Index" class="btn btn-secondary" style="width: 150px;">Back to Client List</a>
        </div>

My Create.cshtml.cs for my Create Client page

    public async Task<IActionResult> OnPost()
    {
        if (ModelState.IsValid)
        {
            _db.Client.Add(Client);
            await _db.Client.AddAsync(Client);
            await _db.SaveChangesAsync();
            TempData["success"] = "Client added successfully.";
            ViewData["clientid1"] = Client.Id;
            return RedirectToPage("/Attendances/Create");
        }
        return Page();
    }

The client dropdown from the Create Attendance record page:

                <td style="width: 25%">
                    <div class="mb-3">
                        <label asp-for="Attendance.ClientId"></label>
                        <select asp-for="Attendance.ClientId" id="Select1" name="clientid" class="form-select" asp-items="@(new SelectList(Model.DisplayClientData.OrderBy(x => x.ClientDisplayName),"Id", "ClientDisplayName"))"><option value="" selected disabled>---Select Client Id---</option></select>
                    </div>
                </td>

My Create.cshtml.cs for the Create Attendance page:

[BindProperties]

public class CreateModel : PageModel
{
    private readonly ApplicationDbContext _db;
    public Attendance Attendance { get; set; }
    public Client Client { get; set; }
    public CreateModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public IEnumerable<Panel> DisplayPanelData { get; set; }
    public IEnumerable<Client> DisplayClientData { get; set; }
    public IEnumerable<Status> DisplayStatusData { get; set; }

    public async Task OnGet(int clientid)
    {
        var clientid1 = clientid;

        await _db.Panel.Select(a => a.PanelName).ToListAsync();
        DisplayPanelData = await _db.Panel.ToListAsync();
        await _db.Client.Select(a => a.Id).ToListAsync();
        DisplayClientData = await _db.Client.ToListAsync();
        await _db.Status.Select(a => a.StatusDesc).ToListAsync();
        DisplayStatusData = await _db.Status.ToListAsync();
    }

    public async Task<IActionResult> OnPost()
    {
        if (ModelState.IsValid)
        {
            _db.Attendance.Add(Attendance);
            await _db.Attendance.AddAsync(Attendance);
            await _db.SaveChangesAsync();
            TempData["success"] = "Client Attendance added successfully.";
            return RedirectToPage("Index");
        }
        return Page()
}

Solution

  • A simple working demo you could follow:

    Client/Create.cshtml

    @page
    @model WebApplication1.Pages.Client.CreateModel
    
    <form method="post">
        <button type="submit" class="btn btn-primary" style="width:150px;">Add Client</button>
    </form>
    

    Client/Create.cshtml.cs

    public class CreateModel : PageModel
    {
        public IActionResult OnPost()
        {
            ViewData["clientid1"] = 3;
            return RedirectToPage("/Attendances/Create", new { clientid = ViewData["clientid1"] });
        }
    }
    

    Attendances/Create.cshtml

    @page
    @model WebApplication1.Pages.Attendances.CreateModel
    
    <select asp-for="Attendance.ClientId" id="Select1" name="clientid" class="form-select">
        <option value="" selected disabled>---Select Client Id---</option>
        <option value="1">client1</option>
        <option value="2">client2</option>
        <option value="3">client3</option>
    </select>
    

    Attendances/Create.cshtml.cs

    public class CreateModel : PageModel
    {
        public Attendance Attendance { get; set; } = new Attendance();
    
        public void OnGet(int clientid)
        {
            Attendance.ClientId=clientid;
        }
    }
    

    Result: enter image description here