This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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.
The community answered this question in your previous post.
https://learn.microsoft.com/en-us/answers/questions/1163580/two-models-in-same-razor-view
The key, which is illustrated in the previous post with a for loop, is properly naming the EmergencyInfos inputs. Is there some other problem?
Hello AgaveJoe,
Yes, like I mentioned in the comment section in my previous post. That for loop will run if there is data in EmergenyInfo table. I want to display the input box for an email even if there is no data in the email so that user can fill out the information for the first time. I also mentioned in the comment section that my question is not fully answered. I did not get any answer to my question so I rephrased the question and posted it again. I apologize for posting it again, but I explained very clearly in the last post that I need an input box too.
This is a very basic programming problem. Just write an "If"! If there are no EmergencyInfos then render an input.
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" />
Hello Bruce,
When I tried to write this code :
<input asp-for="EmergencyInfos[0].PhoneNumber" class="form-control input-lg" />
I got compilation error saying "Cannot apply indexing with [] to an expression of type 'ICollection<EmergencyInfo>' "
Please let me know if you need any additional information.
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
@Zhi Lv - MSFT,
I am getting an error saying "ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')" . What can I do to display an empty textbox for emailAddress and phoneNumber. I dont have any value in emergenyInfo table. I want the user to input the value first and then when the data is there in the table then display the data in tyhe ame view. I want both Edit/Create in the same view. You already told me how to display the existing data, but how can I display the empty text box for emailAddress and phoneNumber. I want to display the empty text box in the same view. You gave me the same answer in my previous post too:
[https://learn.microsoft.com/en-us/answers/questions/1163580/two-models-in-same-razor-view
I really need help with inputting the data for the first time for emergencyInfo. I dont need help with displaying the data because you already told me how to display the data.
Hi @Anjali Agarwal
In my previous reply, in the create page, the Emergency EmailAddress and phoneNumber textbox is empty when page load, because in the Create Get method I didn't set its value. Besides, you can also try to remove the asp-for attribute, it will also get the sample result, like this:
"ArgumentOutOfRangeException: Index was out of range.
About this error, which line of the code will show this error?
This is the screen shot of the error that I am getting:
I am getting this error if I put the code below code in my Razor view page:
@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].HomePhone" class="control-label"></label>
<input asp-for="@Model.EmergencyInfos.ToList()[i].HomePhone" name="EmergencyInfos[@i].PhoneNumber" class="form-control" />
<span asp-validation-for="@Model.EmergencyInfos.ToList()[i].HomePhone" class="text-danger"></span>
</div>
}
I attached my Razor View page with a txt extension.
As soon as I remove the above code, page does not throw any error.Create.txt
Try to use the following code: if there is any data in emergencyInfo table, it will display the database value, if the emergencyInfo table is empty, it will show the empty input text box.
@if (Model!=null && Model.EmergencyInfos!=null && Model.EmergencyInfos.ToList().Count>0)
{
var count = Model.EmergencyInfos.Count;
@for (var i = 0; i< count; i++)
{
<hr />
<span>Emergency @i</span>
<div class="form-group">
<label asp-for="@Model.EmergencyInfos.ToList()[i].EmailAddress" class="control-label"></label>
<input name="EmergencyInfos[@i].EmailAddress" value="@(string.IsNullOrEmpty(Model.EmergencyInfos.ToList()[i].EmailAddress)? "": @Model.EmergencyInfos.ToList()[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 name="EmergencyInfos[@i].PhoneNumber" value="@(string.IsNullOrEmpty(Model.EmergencyInfos.ToList()[i].PhoneNumber)? "": @Model.EmergencyInfos.ToList()[i].PhoneNumber)" class="form-control" />
<span asp-validation-for="@Model.EmergencyInfos.ToList()[i].PhoneNumber" class="text-danger"></span>
</div>
}
}
else
{
@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 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 name="EmergencyInfos[@i].PhoneNumber" class="form-control" />
<span asp-validation-for="@Model.EmergencyInfos.ToList()[i].PhoneNumber" class="text-danger"></span>
</div>
}
}