Form won’t bind to model on POST request

Here is my view:

<form asp-action="SaveAssignments">
    <input type="hidden" asp-for="@Model.CreatedUser" />
    <div class="card m-5">
        <div class="card-header">
            <div class="container d-md-inline-flex justify-content-between">
                <div class="form-group">
                    <h2><label asp-for="Stores" class="form-control-label"></label></h2>
                    <button data-toggle="dropdown" type="button" class="btn btn-lg btn-outline-secondary text-bold dropdown-toggle">@Model.Stores.FirstOrDefault(s => s.Value == Model.SelectedStoreId.ToString())?.Text<span class="caret"></span></button>
                    <div class="dropdown-menu">
                        @foreach (var item in Model.Stores)
                        {
                            <a class="dropdown-item" asp-controller="Web" asp-action="Assignments" asp-route-storeId="@item.Value" asp-route-groupId="@Model.SelectedGroupId">@item.Text</a>
                        }
                    </div>
                </div>
                <div class="form-group align-content-center">
                    <h2><label asp-for="Groups" class="form-control-label"></label></h2>
                    <button data-toggle="dropdown" type="button" class="btn btn-lg btn-outline-secondary text-bold dropdown-toggle">@Model.Groups.FirstOrDefault(s => s.Value == Model.SelectedGroupId.ToString())?.Text<span class="caret"></span></button>
                    <div class="dropdown-menu">
                        @foreach (var item in Model.Groups)
                        {
                            <a class="dropdown-item" asp-controller="Web" asp-action="Assignments" asp-route-storeId="@Model.SelectedStoreId" asp-route-groupId="@item.Value">@item.Text</a>
                        }
                    </div>
                </div>
                <div class="form-group align-self-end">
                    <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save"></i>&nbsp;Save</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-5">
                    <h2><label asp-for="ListZoneFrom" class="form-control-label"></label></h2>
                    <select id="from" asp-for="ListZoneFrom" asp-items="Model.ListZoneFrom" size="15" class="form-control" style="width:100%"></select>
                </div>
              
                <div class="form-group col-md-5">
                    <h2><label asp-for="ListZoneTo" class="form-control-label"></label></h2>
                    <select id="to" asp-for="SelectedZoneTo" asp-items="Model.ListZoneTo" size="15" class="form-control" style="width:100%"></select>
                </div>
            </div>
        </div>
    </div>
</form>

Here is my model:
 public class AssignmentsViewModel
    {
        public AssignmentsViewModel()
        {
            Groups = new List<SelectListItem>();
            ListZoneFrom = new List<SelectListItem>();
            SelectedZoneTo = new List<int>();
            ListZoneTo = new List<SelectListItem>();
        }
        public int SelectedStoreId { get; set; }
        public int SelectedGroupId { get; set; }
        public List<SelectListItem> Groups { get; set; }
        [Display(Name = "From: ")]
        public List<SelectListItem> ListZoneFrom { get; set; }
        [Display(Name = "To: ")]
        public List<SelectListItem> ListZoneTo { get; set; }
        public List<int> SelectedZoneTo { get; set; }
        public string CreatedUser { get; set; }
        public IEnumerable<SelectListItem> Stores {get; set;}    
    }

When I submit the form (HttpPost), the only parameter that gets bound is CreatedUser, the rest of them are either null or 0. My question is how do I bind the values in List ListZoneTo to List SelectedZoneTo? Everytime I post, I get0 items in that list. What am I doing wrong?
  <select id="to" asp-for="SelectedZoneTo" asp-items="Model.ListZoneTo" size="15" class="form-control" style="width:100%"></select>

Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I tested your codes, it works fine, I can bind the values in ListZoneTo to SelectedZoneTo.

The problem may be from your controller action, can you show us the codes?

Below is the test example:

View:

@model AssignmentsViewModel

<form asp-action="SaveAssignments" asp-controller="Web">
    <input type="hidden" asp-for="@Model.CreatedUser" />
    <div class="card m-5">
        <div class="card-header">
            <div class="container d-md-inline-flex justify-content-between">
                <div class="form-group">
                    <h2><label asp-for="Stores" class="form-control-label"></label></h2>
                    <button data-toggle="dropdown" type="button" class="btn btn-lg btn-outline-secondary text-bold dropdown-toggle">@Model.Stores.FirstOrDefault(s => s.Value == Model.SelectedStoreId.ToString())?.Text<span class="caret"></span></button>
                    <div class="dropdown-menu">
                        @foreach (var item in Model.Stores)
                        {
                            <a class="dropdown-item" asp-controller="Web" asp-action="Assignments" asp-route-storeId="@item.Value" asp-route-groupId="@Model.SelectedGroupId">@item.Text</a>
                        }
                    </div>
                </div>
                <div class="form-group align-content-center">
                    <h2><label asp-for="Groups" class="form-control-label"></label></h2>
                    <button data-toggle="dropdown" type="button" class="btn btn-lg btn-outline-secondary text-bold dropdown-toggle">@Model.Groups.FirstOrDefault(s => s.Value == Model.SelectedGroupId.ToString())?.Text<span class="caret"></span></button>
                    <div class="dropdown-menu">
                        @foreach (var item in Model.Groups)
                        {
                            <a class="dropdown-item" asp-controller="Web" asp-action="Assignments" asp-route-storeId="@Model.SelectedStoreId" asp-route-groupId="@item.Value">@item.Text</a>
                        }
                    </div>
                </div>
                <div class="form-group align-self-end">
                    <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save"></i>&nbsp;Save</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-5">
                    <h2><label asp-for="ListZoneFrom" class="form-control-label"></label></h2>
                    <select id="from" asp-for="ListZoneFrom" asp-items="Model.ListZoneFrom" size="15" class="form-control" style="width:100%"></select>
                </div>

                <div class="form-group col-md-5">
                    <h2><label asp-for="ListZoneTo" class="form-control-label"></label></h2>
                    <select id="to" asp-for="SelectedZoneTo" asp-items="Model.ListZoneTo" size="15" class="form-control" style="width:100%"></select>
                </div>
            </div>
        </div>
    </div>
</form>

Controller:
public IActionResult Index()
{
    var listZoneTo = new List<SelectListItem>
    {
        new SelectListItem{ Text = "AA", Value = "1"},
        new SelectListItem{ Text = "BB", Value = "2"},
        new SelectListItem{ Text = "CC", Value = "3"},
    };

    var listZoneFrom = new List<SelectListItem>
    {
        new SelectListItem{ Text = "aa", Value = "1"},
        new SelectListItem{ Text = "bb", Value = "2"},
        new SelectListItem{ Text = "cc", Value = "3"},
    };

    var stores = new List<SelectListItem>
    {
        new SelectListItem{ Text = "Store1", Value = "1"},
        new SelectListItem{ Text = "Store2", Value = "2"},
        new SelectListItem{ Text = "Store3", Value = "3"},
    };

    var groups = new List<SelectListItem>
    {
        new SelectListItem{ Text = "Group1", Value = "1"},
        new SelectListItem{ Text = "Group2", Value = "2"},
        new SelectListItem{ Text = "Group3", Value = "3"},
    };
    var model = new AssignmentsViewModel();
    model.CreatedUser = "ABC";
    model.SelectedStoreId = 1;
    model.SelectedGroupId = 2;
    model.ListZoneFrom = listZoneFrom;
    model.ListZoneTo = listZoneTo;
    model.Groups = groups;
    model.Stores = stores;
    return View(model);
}

[HttpPost]
public IActionResult SaveAssignments(AssignmentsViewModel model)
{
    return View();
}

Result:

Form won't bind to model on POST request


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x