如何根据我的Web API MVC应用程序中的查询结果动态创建复选框？

Question

我需要创建一个"虚拟"CheckedListbox(容器中的一堆复选框) - 即基于SQL Server查询结果的N个复选框.我有占位符html,其中当前正在页面上放置伪造复选框:

<div class="container" name="unitsCheckboxDiv">
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
</div>

...但我需要创建复选框以响应结果集.上面的html位于\ Views\Home\Index.cshtml页面中,所以我假设"代码隐藏"属于\ Controllers\HomeController.cs文件,但我不知道该怎么办.目前我只有默认/样板代码:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    . . .

我希望我可以这样做:

Page_Load()
{
    DataTable dt = GetUnits();
    unitsCheckBoxDiv.DataSource = dt;
}

......或更现实地更像是这样:

Page_Load()
{
    DataTable dt = GetUnits();
    foreach (string unit in dt)
    {
        CheckBox cb = new Checkbox();
        cb.Value = unit;
        unitsCheckBoxDiv.AddHTMLElement(cb);        
    }
}

......但我不知道如何使这个模糊的想法更具体.

UPDATE

我想我正在实施Prasad Raja的答案,但使用此代码:

HomeController.cs:

using System.Data;
using System.Web.Mvc;

namespace WebAppRptScheduler.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            DataTable dtable = new DataTable();
            SQL.ExecuteSQLReturnDataTable(SQL.SelectUnitsQuery, CommandType.Text, null);
            ViewBag.Units = dtable;
            return View();
        }

    . . .
    }
}

Index.cshtml:

@using System.Data
@{
    ViewBag.Title = "Report Scheduler";
}

<div class="jumbotron">
    <h1>Report Scheduler</h1>

    DataTable ds = ViewBag.Units as DataTable;
    var rows = from x in ds.AsEnumerable()
    select new
    {
        unit = x.Field<string>("unit")
    };
</div>

<div class="row">
    <div class="col-md-6">
        <h2>Configure One Unit/Report pair at a time</h2>
        <h4>Select a Unit</h4>
        @foreach (var item in rows)
        {
            <input id="ckbx_@(item.unit)" type="checkbox" value="@item.unit" />
            @item.unit <br />
        }
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-6">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

...我得到这个运行时错误(它编译,虽然它说"编译错误"):

更新2

通过将代码移出div并进入代码块(一个明智的举动):

@using System.Data
@{
    ViewBag.Title = "Report Scheduler";

    DataTable ds = ViewBag.Units as DataTable;
    var rows = from x in ds.AsEnumerable()
               select new
               {
                   unit = x.Field<string>("unit")
               };
}

...我可以进一步,但我仍然看不到页面上的复选框:

更新3

事实证明,这对我来说是一种愚蠢的疏忽(我会说,"一个菜鸟的错误",但我不是新手).在Controller中更改此行后:

SQL.ExecuteSQLReturnDataTable(SQL.SelectUnitsQuery, CommandType.Text, null);

......对此:

dtable = SQL.ExecuteSQLReturnDataTable(SQL.SelectUnitsQuery, CommandType.Text, null);

...它工作正常(没有任何东西可以循环,所以难怪没有生成复选框).

Answer 1

给你试试这个简单的例子

控制器

public ActionResult Index()
        {
            DataTable dtable = new DataTable();
            dtable.Columns.Add("id", typeof(int));
            dtable.Columns.Add("name", typeof(string));

            // adding few data to table
            dtable.Rows.Add(1, "Prasad");
            dtable.Rows.Add(2, "Raja");
            dtable.Rows.Add(3, "Hemenath");
            dtable.Rows.Add(4, "Rajesh");
            dtable.Rows.Add(5, "Suresh");
            dtable.Rows.Add(6, "Daniel");
            ViewBag.Units = dtable;
            return View();
        }

看法

@using System.Data
@{
    ViewBag.Title = "Index";


    DataTable ds = ViewBag.Units as DataTable;
    var rows = from x in ds.AsEnumerable()
               select new
               {
                   id = x.Field<int>("ID"),
                   name = x.Field<string>("name")
               };
}
<div class="form-horizontal">
    <h4>
        Select your favourite Name</h4>
    @foreach (var item in rows)
    {  
        <input id="chk_@(item.name)"   type="checkbox"  value="@item.id"   />
        @item.name <br />  
    }
</div>

输出