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.

ramiramilu · Accepted Answer · 2014-02-03 18:12:01Z

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 -

enter image description here

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;
    }

enter image description here

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);
}

Thanks @ramiramilu I didn't alter my classes but my report list is null when I click on the submitm button. can you take a look.

Thiago Custodio · Accepted Answer · 2014-02-03 17:10:31Z

0

//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)

answered Feb 3, 2014 at 17:10

Thiago Custodio

18.4k9 gold badges50 silver badges99 bronze badges

2 Comments

user3022875 Over a year ago

Thanks @Thiago I added your field but when I click on my submit button my reportList is null. changed the code. can you take a look.

Thiago Custodio Over a year ago

Add a hidden for @Model.ReportsList[i].Report.ReportName

Collectives™ on Stack Overflow

How to display table of data with checkbox?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related