Is there any way for me to use ViewBag/ViewData property values as form input tag helper values? (ASP.NET MVC)

Question

In my controller, I have defined three different ViewBag properties.

ViewBag.Items = new String[] { "GroceryItem1", "GroceryItem2", ..., "GroceryItem25" };
ViewBag.Price = new String[] { "Price1", "Price2", ..., "Price25" };
ViewBag.Store = new String[] { "Store1", "Store2", ..., "Store25"};

All of the items in these arrays are objects in my Model.

For example,

[Required, Display(Name = "Grocery Item")]
public string GroceryItem1 { get; set; }

In my view, I want to have 75 input fields total - 25 for Grocery Items, 25 for Price, and 25 for Store.

Hardcoding 75 input tags and 75 span validation tags would be tedious, so I want to use a for loop and have the input/span fields inside of them, like so -

@for(int i = 0; i < 25; i++ {
     <input asp-for="@ViewBag.Items[i]" />
     <span asp-validation-for="@ViewBag.Items[i]"></span>

     <input asp-for="@ViewBag.Price[i]" />
     <span asp-validation-for="@ViewBag.Price[i]"></span>

     <input asp-for="@ViewBag.Store[i]" />
     <span asp-validation-for="@ViewBag.Store[i]"></span>
}

The code shown above is much cleaner and shorter than having 72 more input tags and 72 more span tags. However, it does not work. Any text being entered in the form fields are not saved in the model objects, and there is no validation being done.

I tried switching from ViewBag to ViewData in the controller and the View (with the proper syntax for that), but it didn't work either.

I am able to show the array contents inside a p, div, span, h1, or any tag, like so -

@for(int i = 0; i < 25; i++ {
     <p>@ViewBag.Items[i]</p>
     <p>@ViewBag.Price[i]</p>
     <p>@ViewBag.Store[i]</p>
}

How can I set the asp-for and asp-validation-for property values to the ViewBag/ViewData property values?

Answer 1

you just need to correct your code a little. Instead of ViewBag use ViewModel

public class ViewModel
{
  public string[] Items {get;set;}
 public string[] Prices {get;set;}
 public string[] Stores{get;set;}
}

and code you have to put in your Get action

var model= new ViewModel();
model.Items = new String[] { "GroceryItem1", "GroceryItem2", ..., "GroceryItem25" };
models.Prices = new String[] { "Price1", "Price2", ..., "Price25" };
model.Stores = new String[] { "Store1", "Store2", ..., "Store25"};

return View(model);

now view

@model ViewModel

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post))
{    
    
... 

@for(int i = 0; i < @Model.Items.Length; i++ )
{
     <input asp-for="@Model.Items[i]" />
     <span asp-validation-for="@Model.Items[i]"></span>

     <input asp-for="@Model.Prices[i]" />
     <span asp-validation-for="@Model.Prices[i]"></span>
      ....
}
<input type="submit" value="Submit Data" id="btnSubmit" />
}

and controller action

public IActionResult MyAction (ViewModel model)
{
     // your code here
}