how to create multiple textbox with a list of obje

Question

hi folks i have to create a share stuff page where i have a contentitem to share, the user who share it and the recipients of the ppl he wants to share it with, but i want to do it dynamic, this is my domain model

public class ShareContentItemModel : BaseModel
{
    public ContentItem ContentItem { get; set; }
    public User User { get; set;}

    [Display(Name = "Recipients")]
    public List<Recipient> Recipients { get { return new List<Recipient> { new Recipient { Name = "Recipient name here", Email = "Write Recipient Email here" } }; } }

    [Required]
    [Display(Name = "Nachricht")]
    public string Message { get; set; }
}

public class Recipient{
    [Display(Name = "Recipient Name:")]
    public string Name  { get; set;}
    [Display(Name = "Recipient Email Address:")]
    public string Email { get; set;}
}

and this is my view

 @using (Html.BeginForm("Submit", "Contact", FormMethod.Post))
 { 
 <p>Hi: @Html.DisplayTextFor(m=>m.User.Salutation) @Html.DisplayTextFor(m=>m.User.Firstname) @Html.DisplayTextFor(m=>m.User.Lastname)</p>            
<table border="0" style="padding:5">
    <tr>
        <td class="editor-label">@Html.LabelFor(m => m.ContentItem.Title): </td>
        <td class="editor-field">@Html.DisplayTextFor(m => m.ContentItem.Title)
            <div>@Html.ValidationMessageFor(m => m.ContentItem.Title)</div>  
        </td>
    </tr>
    <tr> 
        <td class="editor-label">@Html.LabelFor(m => m.ContentItem.Description): </td>
        <td class="editor-field">@Html.DisplayTextFor(m => m.ContentItem.Description)
            <div>@Html.ValidationMessageFor(m => m.ContentItem.Title)</div>  
        </td>
    </tr>
    <tr><td colspan="2">Recipients:</td></tr>
    @foreach (var item in @Model.Recipients)
    {
    <tr>
        <td>@item.Name: @Html.TextBoxFor(/*Dont know what to put in here*/)</td>
        <td>@item.Email: @Html.TextBoxFor(/*Dont know what to put in here*/) </td>
    </tr>    
    }
    <tr>
        <td>   <a class="small button" href="#">Add Recipient:</a> </td>
        <td><input type="submit" class="button med primary" style="float: right;" value="ABSENDEN" /></td>
    </tr>
</table>

 }   

as you can see in the //Dont know what to put in here i cant use the item.name or item.email properties can you help me with this

p.d. the object is fine the cshtml is rendering fine, i just need to create this textboxes to start creating more recipients.

thank you very much

Answer 1

OK. So here is how you do it. You create an Editor template and use it.

Step 1) Create a folder called "EditorTemplates" in your View/yourViewFolderName

Step 2) Create a View called Receipent.cshtml

Add this code to that file

@model YourNameSpace.Models.Recipient
<p>
   @Html.EditorFor(x=>x.Name) : @Html.TextBoxFor(x=>x.Name)
</p>
<p>
   @Html.EditorFor(x=>x.Email) : @Html.TextBoxFor(x => x.Email)
</p>

Step 3) In your Main View, just call the editor template instead of the foreach loop code

@Html.EditorFor(x=>x.Recipients)

This should work fine. I tested with your models.

Keep your editor template name same as of your Property name which you want to show in a foreach. MVC will take care of the rest.