Using Checkbox in mvc

Question

public class ProdList
    {
        public int ProdId { get; set; }

        [DisplayName("Name")]
        public string ProdName { get; set; }

        [DisplayName("Price")]
        public double? ProdPrice { get; set; }

        [DisplayName("Description")]
        public string ProdDesc { get; set; }

        [DisplayName("Image")]
        public string ImageVal { get; set; }

        [DisplayName("Category Name")]
        public string CateName { get; set; }
    }

I have this class in my ProductListController. Using the following Action, I am populating my above class and passing it to the View.

  public ActionResult ProdList()
        {
            Context con = new Context();
            var prodlist = from p in con.Proddb join c in con.Catdb on p.CategoryID equals c.CategoryID select new ProdList() { ProdId=p.ProductID, ProdName = p.ProductName, ProdPrice = p.UnitPrice, ProdDesc=p.Description, CateName=c.CategoryName, ImageVal= "~/Image/"+p.ImagePath };
            List<ProdList> prodlst = prodlist.ToList<ProdList>();
            var categories = con.Catdb.ToList<Category>();
            ViewBag.Categories = categories;
            return View("ProdListView", prodlst);  
        }  

My ProdListView includes the following list where I am printing the data:

@using (Html.BeginForm("checkboxhandle", "ProductList"))
{
    @Html.AntiForgeryToken()

<table class="table table-condensed" id="prodtbl">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ImageVal)
        </th>
        <th>
             @Html.DisplayNameFor(model => model.ProdName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProdPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProdDesc)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CateName)
        </th>
        <th>
            Check to Add
        </th>
    </tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            <img src="@Url.Content(@Html.DisplayFor(modelItem => item.ImageVal).ToString())" height="150" width="150">
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProdName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProdPrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProdDesc)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CateName)
        </td>
        <td>
                @*Checkbox*@
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.ProdId }) |
            @Html.ActionLink("Details", "Details", new { id = item.ProdId }) |
        </td>
    </tr>
}

</table>
<div class="form-group" style="text-align:center">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Add to the Cart" class="btn btn-default" />
    </div>
</div>

}

Following is the action method I am invoking once the submit button is clicked.

  [HttpPost]
        public ActionResult checkboxhandle(ProdList pdl)
        {
          /*Logic to get the checked items from the list in the view*/  

        }

I tried various methods to include checkbox and retrieve the checked items back in my controller but it didn't help. I'm really confused how to proceed. Please help me.

Answer 1

First of all add a bool property to your model/viewmodel:

public bool SelectedProduct {get;set;}

and then you need to do a for loop for the List<T>, so that model binder could populate items back when form posted like:

@for(int i=0; i< Model.Count; i++)
{
    <tr>
        <td>
            <img src="@Url.Content(@Html.DisplayFor(modelItem => Model[i].ImageVal).ToString())" height="150" width="150">
        </td>
        <td>
            @Html.DisplayFor(modelItem  => Model[i].ProdName)
        </td>
        <td>
            @Html.DisplayFor(modelItem  => Model[i].ProdPrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem  => Model[i].ProdDesc)
        </td>
        <td>
            @Html.DisplayFor(modelItem => Model[i].CateName)
        </td>
        <td>
           @Html.CheckBoxFor(modelItem  => Model[i].SelectedProduct)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = Model[i].ProdId }) |
            @Html.ActionLink("Details", "Details", new { id = Model[i].ProdId }) |
        </td>
    </tr>
}