model data list missing in the view on submit form

Question

Hi I'm trying to add a random amount of a partial views to my form However I never get any of the data when I come in to my controller, I get a null reference.

Index.cshtml

@using (Html.BeginForm("SendFamilyMembers", "ContactUs", FormMethod.Post))
{
   <div id="addMoreMembers" class="row">
                    </div>
   <div class="form-group col-sm-12">
      <div class="row">
         <div class="col-sm-12">
            <label id="LblAddFamilyMemberButton" class="btn btn-default btn-file">
               +Add Family Members
            </label>
         </div>
      </div>
   </div>
   <div class="form-group col-sm-12">
      <div class="row">
         <div class="col-sm-12">
            <input id="Send" type="submit" value="Send" class="btn btn-default" />
         </div>
      </div>
   </div>
}

the group of input fields that I'm trying to add Familymember.cshtml into the form in Index.cshtml

@model Contact_Portal.Models.ViewModel.FamilyMembersViewModel
<div class="form-group col-sm-6">
    <div class="row">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @for = "Name_" + Model.count, @class = "control-label col-md-2" })
        <div class="col-sm-6">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { id = "Name_" + Model.count, @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>
</div>
 <div class="form-group col-sm-6">
    <div class="row">
        @Html.LabelFor(model => model.Email, htmlAttributes: new { @for = "Email_" + Model.count, @class = "control-label col-md-2" })
        <div class="col-sm-6">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "Email_" + Model.count, @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

my view model for indexViewModel.cs

  public class AddFamilyMembersViewModel
{
    [Required()]
    [Display(Name = "Navn:")]
    public string Name { get; set; }

    [Display(Name = "Email:")]

        public string Email { get; set; }

        public List<FamilyMembersViewModel> FamilyMembers { get; set; } = new List<FamilyMembersViewModel>();
    }
in my layout I have the following javascript to take care of adding the amount of input fields the user would like.

_layout.cshtml

 $(document).on("click", "#LblAddFamilyMemberButton", function (e) {
                e.preventDefault();
                familyMemberCount = familyMemberCount + 1;
                $.ajax({
                    //  url: "/ContactUs/GetForm",
                    url: '@Url.Action("AddFamilyMember", "ContactUs")',
                    type: "POST",
                    data: { count: familyMemberCount } ,
                    async: true,
                    success: function (data) {
                        var element = document.getElementById("addMoreMembers");
                        $(element).append(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
                    }
                });
            });

viewmodel for my familyMembersViewModel.cs

 public class FamilyMembersViewModel
{
    public int count { get; set; }
    [Display(Name = "Navn:")]
    public string Name { get; set; }
    [Display(Name = "Email:")]
    public string Email { get; set; }
}

In my controller if I try to access the first position in the list I get a null reference because the list is empty. ContactUsController.cs

public ActionResult SendFamilyMembers(AddFamilyMembersViewModel model)
{
        logger.Trace(model.FamilyMembers[0].Name);//<----- Null reference
}

So what is my error ?

Your script is just adding a `FamilyMembersViewModel` `name` attributes that have no relationship at all to your model (you would need to create inputs with `name="FamilyMembers[0].Name"`, `name="FamilyMembers[1].Name"` etc. — , Jun 20 '18 at 22:40
@StephenMuecke thanks for showing the topic that you think was duplicate.I didn't see it when I searched for it.it helped me a lot to solve my issue even though there where some differences it did point me in a good direction. — Helbo, Jun 22 '18 at 05:27

Ramesh Malviya · Answer 1 · 2018-06-20T13:55:01.517

0

<div class="dropdown-list clearfix traveller-list">
<div class="pull-left">
    @Html.CheckBoxFor(m => m.DependentParents[i].IsSelected)
    <label for=@Model.DependentParents[i].DisplayText class="txtShdws">@Model.DependentParents[i].DisplayText</label>
</div>
<div class="pull-right age-dropdown">
    @Html.TextBoxFor(m => m.DependentParents[i].TravellerAge, new { @class = 
    "custom-form", @placeholder = "Age" })
 </div>
</div> 
@Html.ValidationMessageFor(m => m.DependentParents[i].TravellerAge)

You can see below image

edited Jun 20 '18 at 13:55

answered Jun 20 '18 at 13:23

Ramesh Malviya

64
1
6

I'm not sure I understand. you seem to be using the model like a list but the model is a view model I've been using. – Helbo Jun 20 '18 at 13:34
I mean to say your input type textbox name should be like FamilyMembers[0].name, FamilyMembers[1].name. – Ramesh Malviya Jun 20 '18 at 13:44

model data list missing in the view on submit form

1 Answers1