Develop Reference

Form within a foreach loop not posting the model back to the controller

I've searched around and can't find an answer to my problem.
I've got a View that takes accepts Foo in like so:
#model IEnumerable<MyApplication.Models.Foo>
Inside of the view I've got a table. I populate the the table just doing a simple foreach loop through my Foo model. I have added a column where a user can add details to each row in a text area and save.
So the view looks like this:
#foreach (var item in Model)
{
<tr>
<th>
#using (Html.BeginForm("AddDetails", "MyController", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(u => item.Id)
#Html.TextAreaFor(u => item.Details, new { #class = "form-control" })
<input type="submit" value="Save" class="btn btn-sm btn-default" />
}
</th>
</tr>
}
My controller is setup like this:
[HttpPost]
public ActionResult AddDetails(Foo foo)
{
}
When I set a breakpoint on that controller foo always has null values for the Details property and the Id is always 0. When it's passed into the view it's got all of the properties set to right, so I'm not sure why it is not posting back properly?
I've tried this:
#using (Html.BeginForm("AddDetails", "MyController", FormMethod.Post, new { foo = Model }))
I have also tried removing the foreach loop and changing it to pass in just a single Model to the View and for the View to accept just the single model instead of an IEnumerable. When I do this it posts back just fine.
And that does not work either. I'm wondering if it has something to do with the fact that my form is within a foreach loop and perhaps I need to do a little more work like add a data-id attribute to the element and just capture the click event on the button and do an AJAX call to the controller and pass the right values along that way?
EDIT Sorry I completely forgot the view model. Here is what that looks like:
public class Foo
{
public int Id { get; set; }
public string Details { get; set; }
}

Generally speaking it's bad form to post to a different model than what your form view is composed from. It makes a lot of things difficult, not the least of which is recovering from validation errors.
What you're doing here is looping through a list of Foo and creating multiple forms that will each submit only a single Foo to an action that takes only a single Foo. While the post itself is fine, using the *For helpers on a model that is not the same as what you're posting to will likely not generate the proper input names necessary for the modelbinder to bind the posted values onto that other model. At the very least, if you need to return to this view because of a validation error, you will not be able to keep the user's posted data, forcing them to repeat their efforts entirely.
Ideally, you should either post the entire list of Foo and have just one form that wraps the iteration (in which case, you would need to use for rather than foreach). Or you should simply list the Foos with a link to edit a particular Foo, where you would have a form for just one Foo.

try to do this.possible problems
form should outside the table
single form for whole table
wrap your column editor inside tbody not thead
#using (Html.BeginForm("AddDetails", "MyController", FormMethod.Post))
{
//thead and tbody
}

Since no answer was reported for testing the for loop instead of foreach.
I was stuck all day yesterday using foreach loop and always got 0 items in the post method. I changed to for loop and was able to receive the updated items in the post method.
For reference I am using asp.net core 3.2
This is the foreach loop:
#{
foreach(var role in #Model.RolesList)
{
<div class="btn-check m-1">
<input type="hidden" asp-for="#role.RoleId" />
<input type="hidden" asp-for="#role.RoleName" />
<input asp-for="#role.IsSelected" class="form-check-input" />
<label class="form-check-label" asp-for="#role.IsSelected">#role.RoleName</label>
</div>
}
}
This is the for loop:
#for(int i = 0;i< Model.`enter code here`RolesList.Count();i++)
{
<div class="btn-check m-1">
<input type="hidden" asp-for="RolesList[i].RoleId" />
<input type="hidden" asp-for="RolesList[i].RoleName" />
<input asp-for="RolesList[i].IsSelected" class="form-check-input" />
<label class="form-check-label" asp-for="RolesList[i].IsSelected">#Model.RolesList[i].RoleName</label>
</div>
}

MVC 4 Model binding with partial view

#using (Html.BeginForm("PrintDoorSigns", "TimeTable", FormMethod.Post, new { id = "printDoorSigns" }))
{
<input type="hidden" id="doorSignDate" name="SelectedDate" />
<h3>Door Signs</h3>
<fieldset class="float-left">
<legend>Date</legend>
<div id="signsDate"></div>
</fieldset>
<div id="doorSignsRoomList" class="float-left">
#{Html.RenderAction("DoorSignsForm", new { date = DateTime.Now });}
</div>
<div>
<fieldset>
<legend>Options</legend>
<button id="SelectAllRooms">Select All</button>
<button id="RemoveAllRooms">Remove All</button>
</fieldset>
</div>
}
I have this form which renders this partial view:
#model WebUI.ViewModels.CalendarVM.DoorSignsFormVM
<fieldset>
<legend>Rooms</legend>
#{ var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 3, null, TextLayout.Default, TemplateIsUsed.No);
if (Model.Rooms.Count() > 0)
{
<div id="roomsWithBookings" class="CheckBoxList float-left">
#Html.CheckBoxList("SelectedRooms", model => model.Rooms, entity => entity.Value, entity => entity.Text, model => model.SelectedRooms, htmlListInfo)
</div>
}
}
</fieldset>
Controller action:
public ActionResult PrintDoorSigns(DateTime SelectedDate, DoorSignsFormVM Model)
when I submit the form, the hidden input "SelectedDate" gets passed back fine and the Model variable which contains two IEnumerable variables isn't null. One of the lists is null which I expect, as it shouldn't be passed back and the SelectedRooms variable which I expect to be populated is a new list with count 0.
I assume the binding is just wrong on this property but I don't understand why, any pointers? Thanks
EDIT:
public PartialViewResult DoorSignsForm(DateTime date)
{
var userID = _bookingService.GetCurrentUser(User.Identity.Name);
var model = new DoorSignsFormVM();
model.Rooms = _sharedService.GetRoomsWithBookings(date, userID.FirstOrDefault().DefSite);
return PartialView("_DoorSigns", model);
}
Here is the doorsignsform action that gets rendered in the form.

As you say, ASP.NET MVC is not recognizing the checkbox values as being part of the DoorSignsFormVM view model.
Given that your SelectedRooms property is a collection of SelectListItems, MVC is not recognizing how to bind the string values from the checkboxes to this property.
Try adding another property called SelectedRoomValues of type string[] to your viewmodel and change your checkbox code to
#Html.CheckBoxListFor(model => model.SelectedRoomValues, model => model.Rooms, entity => entity.Value, entity => entity.Text, model => model.SelectedRooms, htmlListInfo)
MVC will then know how to bind to this new property, which will be populated with the SelectListItem.Value values.

How to pass the text/Value of an Html element from view to controller

I want to access the value of button in controller and then pass it to the view as well.
But the value of "str" passed from view to controller is null.
Index.chtml
#{
var str = "Shoes";
}
<a href="~/Home/Products_By_Category/#str" target="_parent">
<input type="button" value="Shoes" class="btn"/>
</a>
/////////////////////////
<pre lang="c#">
public ActionResult Products_By_Category(string s)
{
ViewBag.category = s;
return View();
}

Have the same name s for your input also.
Use ViewBag.category in the client side. Since ViewBag is a dynamic entity.
Are you using form submit in which case MVC will automatically fill the value of the input for you.

Now I'm using
Index.cshtml
#{
var str="Shoes";
}
<form action="~/Home/Products_By_Category/#str" method="post">
<input type="submit" value="Shoes" class="btn"/>
</form>
/////////////
public ActionResult Products_By_Category(string s)
{
var context = new Shoe_StoreDBEntities();
var q = from p in context.Products
join c in context.Categories on p.CategoryId equals c.Id
where c.Name.Equals(s)
select new { p, c };
}
but still the value in "s" is still null

First. The controller passes data to the view. There is no other way around. It's because the basic nature of a webapplication.
Basically: Request -> controller -> select and render a view.
The view itself is not a known concept in the client browser. That is simple html/css/js.
Your view should looks like this:
#{
var str = "Shoes";
}
#using (Html.BeginForm("Products_By_Category"))
{
<input type="submit" name="s" id="s" value="#(str)"/>
}
Some note:
1) If you use a variable inside an html element attribute you have to bracket it.
2) You should use the builtin html helper whenever it's possible (beginform)
3) This example only work if you click the submit button to postback the data. If there is other submit button or initiate the postback from js, the button data is not included into the formdata. You should use a hidden field to store the str value and not dependent from the label of the button:
#{
var str = "Shoes";
}
#using (Html.BeginForm("Products_By_Category"))
{
<input type="hidden" id="s" name="s" value="#(str)"/>
<input type="submit" value="Do postback"/>
}

Display only x numbers of items in index.cshtml

I'm making a newsfeed project in Visual Studios, MVC 3, Razor engine and I'm trying only to display, let's say 10, number of feeds at once.
Currently while I was getting the database going I used this index.cshtml:
#model IEnumerable<NyjiGrunnur.Models.Article>
#{
ViewBag.Title = "NewsFeed";
}
<h2>#ViewBag.Message</h2>
#foreach (var item in Model)
{
<div id="eitt">
<fieldset>
<legend>#Html.ActionLink( item.Name, "Edit", new { id=item.Id } )</legend>
<div>#item.Subject, #item.Created</div>
<p>#Html.Raw(item.Content.Replace(Environment.NewLine, "<br/>"))</p>
</fieldset>
</div>
}
The foreach takes every single item and I was wondering if I could use a for loop or something similar to display only the 10 newest feeds.
Thanks in advance.

You can keep a counter variable and check it before displaying the data
#{
int counter=0;
}
foreach (var item in Model)
{
counter++;
if(counter<=10)
{
<div id="eitt">#item.Name</div>
}
}
But it is better to do this at your Action method and return only 10 items to the view so that you don't need to contaminate your view by adding the if statement. You can use the Take method from LINQ to get the 10 items.
public ActionResult Newsfeed()
{
List<Article> articleList=new List<Article>();
articleLsit=GetListOfItemsFromSomewhere();
//now get only 10. you may apply sorting if needed
articleList=articleList.Take(10);
return View(articleList);
}

it will be better
#foreach (var item in Model.Take(10))
{
<div id="eitt">
<fieldset>
<legend>#Html.ActionLink( item.Name, "Edit", new { id=item.Id } )</legend>
<div>#item.Subject, #item.Created</div>
<p>#Html.Raw(item.Content.Replace(Environment.NewLine, "<br/>"))</p>
</fieldset>
</div>
}

Model Binding with variable number of items in List<T>

I have a model that can have a variable amount of items in a List<T>
In my view I then have the following:
#using (Html.BeginForm())
{
int count = Model.Data.Filters.Count;
for(int i = 0; i < count; i++)
{
<div>
#Html.TextBox("filtervalue" + i)
#Html.DropDownList("filteroptions"+i,Model.Data.Filters[i].FilterOptions)
</div>
}
#Html.Hidden("LinkID", Url.RequestContext.RouteData.Values["id"])
}
Is there a way in my controller so I can set up the POST action method to bind to a model with variable items in it?
Also how would I construct the model to cope with this?
Thanks

You coud use editor templates, it will be much easier:
#using (Html.BeginForm())
{
#Html.EditorFor(x => x.Data.Filters)
#Html.Hidden("LinkID", Url.RequestContext.RouteData.Values["id"])
}
and inside the editor template (~/View/Shared/EditorTemplates/FilterModel.cshtml) which will be automatically rendered for each element of the Model.Data.Filters collection:
#model FilterModel
<div>
#Html.TextBoxFor(x => x.FilterValue)
#Html.DropDownListFor(x => x.SelectedFilterOption, Model.FilterOptions)
</div>
Now your POST controller action will simply look like this:
[HttpPost]
public ActionResult Foo(SomeViewModel model)
{
// model.Data.Filters will be properly bound here
...
}
Thanks to editor templates you no longer have to write any foreach loops in your views or worry about how to name your input fields, invent some indexed, ... so that the default model binder recognizes them on postback.