displaying the input box for a different model

Question

I have following two model classes:

public partial class EmployeeInfo

{

public string LastName { get; set; } = null!;

public string FirstName { get; set; } = null!;

public virtual ICollection<EmergencyInfo> EmergencyInfos { get; } = new List<EmergencyInfo>();

}

public partial class EmergencyInfo

{

 public string emailAddress { get; set; } = null!;

public string PhoneNumber { get; set; } = null!;

public virtual EmployeeInfo EmployeeInfo { get; set; } = null!;

}

My Razor view to create a new employee looks like this:

@model AckPackage.Models.EmployeeInfo

@{

ViewData["Title"] = "Create";

}

<div class="form-group row">

            <div class="col-sm-4">

                <label asp-for="LastName" class="control-label"></label>

                <input asp-for="LastName" class="form-control input-lg" />

                <span asp-validation-for="LastName" class="text-danger"></span>

            </div>

            <div class="col-sm-4">

                <label asp-for="FirstName" class="control-label"></label>

                <input asp-for="FirstName" class="form-control input-lg" />

                <span asp-validation-for="FirstName" class="text-danger"></span>

            </div>

</div>

Can I display the input box for emeregencyInfo, emailAddress and phone number in above view. I want to show both the input box for emailAddress and PhoneNumber so that

users can input their information.

Answer 1

Hi @Anjali Agarwal

Can I display the input box for emeregencyInfo, emailAddress and phone number in above view. I want to show both the input box for emailAddress and PhoneNumber

In the Create page, you can use the following code to display the EmergencyInfo properties:

@model WebApplication5.Models.EmployeeInfo

            @for (var i = 0; i< 2; i++)
            {
                <hr />
                <span>Emergency @i</span>
                <div class="form-group">
                    <label asp-for="@Model.EmergencyInfos.ToList()[i].EmailAddress" class="control-label"></label>
                    <input asp-for="@Model.EmergencyInfos.ToList()[i].EmailAddress" name="EmergencyInfos[@i].EmailAddress" class="form-control" />
                    <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].EmailAddress" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="@Model.EmergencyInfos.ToList()[i].PhoneNumber" class="control-label"></label>
                    <input asp-for="@Model.EmergencyInfos.ToList()[i].PhoneNumber" name="EmergencyInfos[@i].PhoneNumber" class="form-control" />
                    <span asp-validation-for="@Model.EmergencyInfos.ToList()[i].PhoneNumber" class="text-danger"></span>
                </div>
            }

The output as below: in this sample, one Employee has two Emergencies, if you want to add more Emergencies, you can change the for-loop condition.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

you can map to the first emergency info, but you will need a UI to add / remove additional:

       <input asp-for="EmergencyInfos[0].PhoneNumber" class="form-control input-lg" />