Search code examples
asp.net-corevariablesparameter-passingviewmodelrazor-pages

Pass Data From One Razor Page to Another Razor Page

I need some assistance please. I have not done this before and I'm not entirely sure what to add where. Basically, I am working on an app to house historical data. There is no create, edit or delete needed. It is to print Rabies Certificates for Pets.

I have a pet view page which has the vaccinations the pets have had. I have a button next to each vaccination. I would like this button to link to a rabies certificate page and fill the certificate (so it can be printed) with the data for that pet and that particular vaccine. One pet may have had several vaccines over the years.

Here is what I have so far (I have eliminated extra fields to condense post):

My Pet Detail Page:

@page
@using RabiesClinics.Model
@model RabiesClinics.Pages.Pets.DetailsModel

<form method="post">
    <div class="border p-3 mt-4">
        <div class="row pb-2">
            <h2 class="text-primary pl-3">Pet Details <img src="~/Images/PawPrints.png" /></h2>
            <hr />
        </div>
        <table class="table table-borderless" style="width:100%">
        <tr>
            <td style="width: 20%">
                <div class="mb-3">
                    <label asp-for="Pet.OwnerId"></label>
                    <input asp-for="Pet.OwnerId" disabled class="form-control" />
                </div>
            </td>
            <td style="width: 20%">
                <div class="mb-3">
                    <label asp-for="Pet.PetId"></label>
                    <input asp-for="Pet.PetId" disabled class="form-control" />
                </div>
            </td>
            <td style="width: 40%">
                <div class="mb-3">
                    <label asp-for="Pet.PetName"></label>
                    <input asp-for="Pet.PetName" type="text" disabled class="form-control"/>
                </div>
            </td>
            <td style="width: 20%">
                <div class="form-group, mb-3">
                    <label asp-for="Pet.Status"></label>
                    <br />
                    @foreach (var item1 in Html.GetEnumSelectList<Status>())
                    {
                        <input type="radio" disabled asp-for="Pet.Status" value="@item1.Text" />
                    @item1.Text
                    }
                </div>
            </td>
        </tr>
    </table>

        <hr />
        <h4>Vaccines</h4>
        <br />
        <table class="table table-bordered table-striped width:100%">
            <thead>
                <tr>
                    <th>
                        Date Vaxxed
                    </th>
                    <th>
                        Vax Expires
                    </th>
                    <th>
                        Vet Name
                    </th>
                    <th>
                        Print Rabies Certificate
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (var i = 0; i < Model.Pet.Vaccines.Count; i++)
                {
                    <tr>
                        <td style="width: 10%">
                            <div class="mb-3">
                                <input asp-for="Pet.Vaccines[i].DateVaccinated" type="text" readonly class="form-control-plaintext" />
                            </div>
                        </td>
                        <td style="width: 10%">
                            <div class="mb-3">
                                <input asp-for="Pet.Vaccines[i].VaccinationExpiration" type="text" readonly class="form-control-plaintext" />
                            </div>
                        </td>
                        <td style="width: 20%">
                            <div class="mb-3">
                                <input asp-for="Pet.Vaccines[i].VetName" type="text" readonly class="form-control-plaintext" />
                            </div>
                        </td>
                        <td width="10%">
                            <div class="w-75 btn-group" role="group">
                                <a asp-page="/RabiesCertificates/Details" class="btn btn-primary mx-2">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
        </table>
        <div>
            <a asp-page="Index" class="btn btn-secondary" style="width: 150px;">Back to List</a>
        </div>
    </div>
</form>

@section Scripts{
    <partial name="_ValidationScriptsPartial"/>
}

Here is the .cs for the Pet Details page:

using RabiesClinics.Data;
using RabiesClinics.Model;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;

namespace RabiesClinics.Pages.Pets;

[BindProperties]

public class DetailsModel : PageModel
{
    private readonly ApplicationDbContext _db;
    
    public Pet Pet { get; set; }
    public Vaccine Vaccine { get; set; }
    
    public DetailsModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public void OnGet(string Id)
    {
        Pet = _db.Pet
            .Include(pet => pet.Vaccines).FirstOrDefault(pet => pet.PetId == Id);

        var petid1 = Pet.PetId;
        var vaxdate1 = Vaccine.DateVaccinated;

    }

}

Here is the start of the Rabies Certificate page:

@page
@using RabiesClinics.Model
@model RabiesClinics.Pages.RabiesCertificates.DetailsModel

<div id="RabiesCertificateReports" class="container p-3">
    <div class="row pt-4">
        <div class="col-6">
            <h2 class="text-primary">Rabies Certificate</h2>
        </div>
    </div>

    <br /><br />

    <form asp-page="./Details" method="get">
        <div class="form-actions no-color">
            <p>
                <h5>Report Date Range</h5>
                For Pet Id: <input type="text" name="petid" value="" /> and Vaccine Date:<input type="date" name="vaxdate" value="" />
                <input type="submit" value="Filter Report" class="btn btn-primary mx-2" />
                <a asp-page="./Pets/Detail" class="btn btn-link mx-2">Return to Pet Detail</a>
            </p>
        </div>
        <div id="RabiesCertificate" class="row pt-4">
            <div class="col-25">
                <h2 class="text-primary; text-capitalize" align="center">RABIES VACCINATION CERTIFICATE</h2>
                <h3 class="text-primary; text-capitalize" align="center" style="font-style:italic">ADAPTED NASPHV FORM 51</h3>
                <h3 class="text-primary" align="center">Human Postexposure Rabies Treatment</h3>
                <h5 class="text-primary" align="center">@ViewData["endingparameter"]</h5>
            </div>

            <table class="table table-borderless" style="width:100%">
                <tr>
                    @foreach (var obj in Model.Filter)
                    {
                    <td style="width: 20%">
                        <div class="mb-3">
                            <label asp-for="@obj.LastName"></label>
                            <input asp-for="@obj.LastName" disabled class="form-control" />
                        </div>
                    </td>
                    <td style="width: 20%">
                        <div class="mb-3">
                            <label asp-for="@obj.FirstName"></label>
                            <input asp-for="@obj.FirstName" disabled class="form-control" />
                        </div>
                    </td>
                    <td style="width: 20%">
                        <div class="mb-3">
                            <label asp-for="@obj.Telephone"></label>
                            <input asp-for="@obj.Telephone" disabled class="form-control" />
                        </div>
                    </td>
                    }
                </tr>
            </table>
        </div>
    </form>
</div>

<button type="submit" onclick="printDiv('RabiesCertificate')" class="btn btn-primary" style="width:300px;">Print Rabies Certificate</button>

@section Scripts
    {
    <style>
        tr{
            text-align:right;
        }
    </style>

    <script language="javascript">
        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
        }
    </script>
    }

And the .cs for the Rabies Certificate page:

using RabiesClinics.Data;
using RabiesClinics.Model;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;

namespace RabiesClinics.Pages.RabiesCertificates
{
    public class DetailsModel : PageModel
    {   
        private readonly ApplicationDbContext _db;

        public DetailsModel(ApplicationDbContext db)
        {
            _db = db;
        }

        public IEnumerable<Filter> Filter { get; set; }

        public async Task OnGetAsync(string petid, DateTime vaxdate)
        {
            var petid1 = petid;
            var vaxdate1 = vaxdate.ToShortDateString();

            ViewData["endingparameter"] = $"For Vaccination Date: {vaxdate1} and Pet Id: {petid1}";

            Filter = await (from x in _db.Owner
                            join y in _db.Pet on x.OwnerId equals y.OwnerId
                            join z in _db.Vaccine on x.OwnerId equals z.OwnerId
                            where y.PetId == petid && z.DateVaccinated == vaxdate
                            select new Filter
                            {
                                OwnerId = x.OwnerId,
                                PetId = y.PetId,
                                LastName = x.LastName,
                                FirstName = x.FirstName,
                                Telephone = x.Telephone,
                                Addr1 = x.Addr1,
                                Addr2 = x.Addr2,
                                City = x.City,
                                State = x.State,
                                Zip = x.Zip,
                                Species = y.Species,
                                Gender = y.Gender,
                                Altered = y.Altered,
                                Age = y.Age,
                                Breed = y.Breed,
                                PetName = y.PetName,
                                Colors = y.Colors,
                                DateVaccinated = (DateTime)z.DateVaccinated,
                                VaccinationExpiration = (DateTime)z.VaccinationExpiration,
                                ProducerId = z.ProducerId,
                                Duration = z.Duration,
                                VaccineLotNo = z.VaccineLotNo,
                                LotExpirationDate = (DateTime)z.LotExpirationDate,
                                VetLicenseNo = z.VetLicenseNo,
                                VetName = z.VetName,
                                VetAddress = z.VetAddress,
                            }).ToListAsync();
        }

    }
}

I've looked at several other posts here, but don't understand the replies/answers well enough to know what to put where in my own code.

Thank you!!

Solution

  • You can use ViewData["petid1"] in your Pets details.cs:

     ViewData["petid1"] = Pet.PetId;

    Then try <a> with asp-route-{value} as below code:

    <a  asp-page="/RabiesCertificates/Details" class="btn btn-primary mx-2" asp-route-petid="@ViewData["petid1"]" asp-route-vaxdate="@Model.Pet.Vaccines[i].DateVaccinated">
    <i class="bi bi-printer"></i>
</a>

    result: enter image description here You can read asp-route-{value} to know more.