How to display table of data with checkbox?

Question

I have a very simple datatable that returns:

Report1 and a checkbox Report2 and a checkbox

here is my view:

@model GRM_Reports.Models.ReportsModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}




@using (Html.BeginForm("Index","Report", FormMethod.Post))
{
        <table>
        <tr style="font-weight:bold">

            <td>
                Report Name
            </td>
            <td>
                Number Of Rows
            </td>
            <td>
                Number Of Errors
            </td>
            <td>
                Run Report
            </td>
        </tr>

            @foreach (var report in Model.ReportList)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modeltem => report.ReportName)
                    </td>
                    <td>
                        @Html.DisplayFor(modeltem => report.NumberOfRows)
                    </td>
                    <td>
                       @Html.DisplayFor(modeltem => report.NumberOfErrors)
                    </td>
                    <td>
                       @Html.CheckBoxFor(modeltem => report.checkBox)
                    </td>
              </tr>
            }
                <tr>
                <td colspan="4">
                    <button type="submit" >Submit Request</button>
                </td>
            </tr>
        </table>
}

when I click the submit button the ReportList is null.

namespace GRM_Reports.Controllers
{
    public class ReportController : Controller
    {
    public ActionResult Index()
    {
        var model = new ReportsModel();
        Database db = new Database();
        DataTable dt = new DataTable();
        dt = db.GetReportStatus("1/31/2014");
        model.ReportList = new List<Models.Common.Report>();
                    foreach (DataRow row in dt.Rows)
                    {
                        model.ReportList.Add(
                    new Models.Common.Report() 
                    { ReportName = row["Report"].ToString(), 
                      NumberOfRows = int.Parse(row["NumberOfRows"].ToString()), 
                      NumberOfErrors = int.Parse(row["NumberOfErrors"].ToString()),
                      HasData = row["hasData"].ToString()
                    });

        }
        return View(model);
    }




    [HttpPost]
    public ActionResult Index(ReportsModel model)
    {
           foreach (var report in model.ReportList)
           {


           }
        return View();
    }
}
}

I think there is a problem with this method: [HttpPost] public ActionResult Index(ReportsModel model)

The model that is passed to this method is null. Any ideas?

Thank you.

Answer 1

Here goes your solution, I have modified your Models a little bit by adding one more ViewModel -

public class ReportsModel
{
    public List<ReportModel> ReportsList { get; set; }
}

public class ReportModel
{
    public Report Report { get; set; }
    public bool IsChecked { get; set; }
}

public class Report
{
    public string ReportName { get; set; }
    public DateTime ReportDate { get; set; }
    public int NumberOfRows { get; set; }
    public int NumberOfErrors { get; set; }
    public string HasData { get; set; }
}

Then in the index action, we construct our model and send it to view -

    public ActionResult Index()
    {
        ReportsModel model = new ReportsModel();
        model.ReportsList = new List<ReportModel>();
        model.ReportsList.Add(new ReportModel() { Report = new Report() { ReportName = "Report1" }, IsChecked = false });
        model.ReportsList.Add(new ReportModel() { Report = new Report() { ReportName = "Report2" }, IsChecked = false });
        model.ReportsList.Add(new ReportModel() { Report = new Report() { ReportName = "Report3" }, IsChecked = false });
        return View(model);
    }

Index view will display checkboxes -

@model MVC.Controllers.ReportsModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm("Submit", "Checkbox", FormMethod.Post))
{
    for (int i = 0; i < Model.ReportsList.Count; i++)
    {
        @Html.CheckBoxFor(m => m.ReportsList[i].IsChecked) @Model.ReportsList[i].Report.ReportName
        <br />
    }
    <input type="submit" value="Click" />
}

Output -

And once your select some checkboxes and click on Submit button, it will submit to Submit action, and you can get all the selected values in the model as shown below -

    public ActionResult Submit(ReportsModel model)
    {
        // Do something
        return null;
    }

UPDATE

To get all properties of the Model, you need to use HiddenFields, as shown below -

for (int i = 0; i < Model.ReportsList.Count; i++)
{
    @Html.CheckBoxFor(m => m.ReportsList[i].IsChecked) @Model.ReportsList[i].Report.ReportName
    <br />

    @Html.HiddenFor(m => m.ReportsList[i].Report.ReportName);
    @Html.HiddenFor(m => m.ReportsList[i].Report.ReportDate);
    @Html.HiddenFor(m => m.ReportsList[i].Report.NumberOfRows);
    @Html.HiddenFor(m => m.ReportsList[i].Report.NumberOfErrors);
    @Html.HiddenFor(m => m.ReportsList[i].Report.HasData);
}

Answer 2

//Model

namespace Reports.Models.Common 
{
    public class Report
    {
        public string ReportName { get; set; }
        public DateTime ReportDate { get; set; }
        public int NumberOfRows { get; set; }
        public int NumberOfErrors { get; set; }
        public string HasData { get; set; }
        public bool Remember {get;set;}
    }
}

//View

@Html.CheckboxFor(x => x.Remember)