Models not collecting values from View to HttpPost Controller Method - asp.net-mvc

Question

I am currently trying to pass a list of models from my view to my controller. Currently, I am able to grab each model from the view and place them inside of a list and pass the list within the HttpPost controller ActionResult method. However when doing this, none of the models have their data within them as all of the models have their property values set to either 0 or null.
My code is as follows:
View:
#using (Html.BeginForm("SaveCarouselImageData", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="card shadow">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Homepage Carousel</h3>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th></th>
<th scope="col">Image</th>
<th scope="col">Order Num</th>
<th></th>
</tr>
</thead>
<tbody id="carousel-content">
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<th><input type="number" value="#Model[i].getId()" name="id" hidden readonly /></th>
<th scope="row">
<img src="#Url.Content(Model[i].getImgLoc())" name="imgLoc" class="carousel-img-thumbnail" alt="Image" />
</th>
<td>
#Html.TextBoxFor(model => model[i].orderNum, Model[i].getOrderNum().ToString(), new { type = "number", name = "orderNum" })
</td>
<td>
<a class="btn btn-danger btn-lg btn-block openDeleteModal" data-toggle="modal" href="#deleteImageModal" data-id="#Model[i].getId()">
DELETE
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row form-button-group">
<div class="col-md-6 col-sm-12 form-button-padding">
<button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#addImageModal">
+ Add New Image
</button>
</div>
<div class="col-md-6 col-sm-12 form-button-padding">
<button type="submit" class="btn btn-primary btn-lg btn-block">
Save Changes
</button>
</div>
</div>
}
Controller:
// POST: Saves Carousel Image Data
[HttpPost]
public ActionResult SaveCarouselImageData(List<CarouselModel> images)
{
if (!checkLoginCredentials())
{
return RedirectToAction("Login", "Home");
}
else
{
List<CarouselModel> updatedModels = new List<CarouselModel>();
foreach (CarouselModel img in images)
{
CarouselModel dbModal = siteServices.getCarouselImageById(img.getId());
dbModal.setOrderNum(img.getOrderNum());
}
int result = siteServices.updateCarouselTable(updatedModels);
return RedirectToAction("HomepageCarousel", "Admin");
}
}
Model:
public class CarouselModel
{
[Display(Name="id")]
private int id;
[Display(Name = "imgLoc")]
private string imgLoc;
[Display(Name = "orderNum")]
public int orderNum;
public int getId()
{
return this.id;
}
public string getImgLoc()
{
return this.imgLoc;
}
public int getOrderNum()
{
return this.orderNum;
}
public void setId(int id)
{
this.id = id;
}
public void setImgLoc(string imgLoc)
{
this.imgLoc = imgLoc;
}
public void setOrderNum(int orderNum)
{
this.orderNum = orderNum;
}
}
Again, the models themselves are currently getting passed from the View and into the List for the SaveCarouselImageData method, but all of their property values are null or 0.
Please assist.

Answer 1

all of their property values are null or 0.
I think that's because your CarouselModel's properties lack get;set; which the ASP.NET MVC Binding makes use of by default.
During POST, the binder will try to bind the form values to that of your model, but since it lacks accessors, it can't set any of the values that comes from the form.
Besides that, they're both specified to be Private which can only be accessed within the class, you should use Public if you want them to be set externally.
The easiest solution is to make them Public and add the accessors get;set;:
[Display(Name="id")]
public int id {get;set;}
[Display(Name = "imgLoc")]
public string imgLoc {get;set;}
[Display(Name = "orderNum")]
public int orderNum {get;set;}
If you still want ID and ImgLoc to remain Private then, you could do something like this;
private int _id {get;set;}
private string _imgLoc {get;set;}
[Display(Name = "orderNum")]
public int orderNum;
[Display(Name="id")]
public int id{
get{
return this._id;
}
set{
this._id = value;
}
}
[Display(Name = "imgLoc")]
public string imgLoc{
get{
return this._imgLoc;
}
set{
this._id = value;
}
}
Then change your HTML input fields to use the public properties.