在MVC/Razor中,如何获取多个复选框的值并将它们全部传递给控制器​​?

In MVC/Razor, how do I get the values of multiple checkboxes and pass them all to the controller?

我有一个视图,其中包含模型中的项目列表。我需要向每一行添加一个复选框,让用户 select 多个复选框,并将 selected 的行的一些标识符传递给控制器​​。我知道如何通过操作 link 传递单个值,但我不确定如何通过操作 link 传递多个值或如何 "collect" 哪些行是 [=37] =]编辑。我将在下面展示我的一些代码尝试。谁能帮我弄清楚为什么我无法获取传递给控制器​​的所有复选框的值?

这是我的页面

Checkbox     App ID     Date     Name
   []          1        5/10     Bob
   []          2        5/10     Ted
   []          3        5/11     Alice

我需要用户做的是 select 第 1 行和第 3 行(例如)并将这些 App ID 传递给控制器​​。

我开始列出各种尝试,但决定只展示我目前的尝试,看看是否有人可以指出我做错了什么。我看到的在线示例和我的示例之间的主要区别是我使用 PagedList 并在 foreach 循环中创建 table 的行。

参数ints打到控制器上是空的。如何从复选框中获取值?我使用这个站点的基本思想是将所有复选框命名为相同并通过操作 link 传递 ICollection: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

查看:

@model PagedList.IPagedList<CarmelFinancialWeb.Models.ModelMerchantSummary>
<div class="block" style="width: 100%; float: left">
<p class="block-heading"> 
Merchant Application Report
</p>
<div class="table-holder">
    <table class="table" style="margin-bottom: 0px">
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            <input type="checkbox" name="ints" value=item.ApplicationID />
                        </td>
                    <td>
                        @Html.ActionLink(item.ApplicationID.ToString(), "ViewApplication", new { ID = item.ApplicationID, edit = 1 }, new AjaxOptions { HttpMethod = "GET" })
                    </td>
                    <td>
                        @Convert.ToDateTime(item.ApplicationDate).ToString("M/d/yy")
                    </td>
                    <td>
                        @item.ApplicantName
                    </td>
        </tbody>
    </table>
</div>
</div>
@Html.ActionLink("Print Application", "PrintApplication", "CreateContract", new { @class = "btn btn-primary" })

控制器:

    [AuthorizeAdmin]
    public ActionResult PrintApplication(ICollection<int> ints, string ID)
    {
        Contracts_Create contract = new Contracts_Create();
        ModelApplication currentApplication = new ModelApplication();
        currentApplication.contract = new ModelContract();
        return File(contract.CreatePDF_PrintedApplication_English(currentApplication.contract.location, currentApplication.contract), "application/pdf");
    }

编辑: 这被标记为另一个问题的副本。那里的问题是关于是否可以使用非顺序输入名称。我的问题是我使用的输入不是非连续的,但它仍然无法正常工作。我理解这个概念,只是想不通为什么我的特定代码不起作用。我花了很多时间来解决这个问题,但找不到我的特定代码的答案。谢谢!

不要在 mvc 中使用 foreach,始终使用 for 和索引变量进行迭代。

您还需要一个布尔值来跟踪选择状态。

这个示例代码对我有用:

public class AModel
{
    public List<AnotherModel> Items { get; set; }
}

public class AnotherModel
{
    public int ApplicationId { get;set; }
    public DateTime ApplicationDate { get; set; }
    public string ApplicantName { get; set; }
    public bool Selected { get; set; }
}

Page.cshtml

@using (Html.BeginForm("PostIndex", "Home", FormMethod.Post))
{
    <table class="table" style="margin-bottom: 0px">
        <tbody>
        @for (var i = 0; i < Model.Items.Count(); i++)
        {
            <tr>
                <td>
                    <label>@Html.CheckBoxFor(model => model.Items[i].Selected) @Html.DisplayFor(model => model.Items[i].ApplicantName)</label>
                </td>
                <td>
                    @Html.ActionLink(Model.Items[i].ApplicationId.ToString(), "ViewApplication", new {ID = Model.Items[i].ApplicationId, edit = 1}, new AjaxOptions {HttpMethod = "GET"})
                </td>
                <td>
                    @Html.DisplayFor(model => model.Items[i].ApplicationDate)
                </td>
                <td>
                    @Html.DisplayFor(model => model.Items[i].ApplicationId)
                </td>
            </tr>
        }
        </tbody>
    </table>
    <input type="submit"/>
}

尝试将 ViewModel 传递到您的页面,并使用模型绑定器将相同的视图模型post返回到您的控制器

型号:

public class MerchantModel
{
    public int AppId { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

public class MerchantViewModel
{
    public List<MerchantModel> Merchants { get; set; }
}

控制器:

public class DefaultController : Controller
{
    // GET: Default
    public ActionResult Index()
    {
        var merchant1 = new MerchantModel
        {
            AppId = 1,
            Name = "Bob"
        };
        var merchant2 = new MerchantModel
        {
            AppId = 2,
            Name = "Ted"
        };
        var merchant3 = new MerchantModel
        {
            AppId = 3,
            Name = "Alice"
        };

        List<MerchantModel> list = new List<MerchantModel>();
        list.Add(merchant1);
        list.Add(merchant2);
        list.Add(merchant3);

        var model = new MerchantViewModel
        {
            Merchants = list
        };

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MerchantViewModel model)
    {
        return View(model);
    }
}

查看:

 @model TestCheckBoxes.Models.MerchantViewModel

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <form action="/default/index" method="post">
            <table>
                @for (int i = 0; i < Model.Merchants.Count; i++)
                {
                    <tr>
                        <td>
                            @Html.CheckBoxFor(x => x.Merchants[i].IsSelected)
                        </td>
                        <td>
                            @Html.HiddenFor(x => x.Merchants[i].AppId)
                            @Model.Merchants[i].AppId
                        </td>
                        <td>
                            @Html.HiddenFor(x => x.Merchants[i].Name)
                            @Model.Merchants[i].Name
                        </td>
                    </tr>
                }
            </table>

            <button type="submit">Submit</button>
        </form>



    </div>
</body>
</html>

返回控制器中的 [HttpPost] 方法,您将得到一个 MerchantModel 的列表,其 bool 值为 true 或 false。这样你就可以检查它是否正确,然后从那里获取 AppId。

@CBauer 和@NickYoung 基本上找到了答案。关键是 (1) 确保我的复选框在 ID 中写有相同后缀的括号中的序列号,(2) 使用提交按钮而不是操作 link,以及 (3) 正确编写控制器接受复选框中的 ID。我想 post 我的一些代码可以让您了解我要做什么:

查看(部分):

@model PagedList.IPagedList<CarmelFinancialWeb.Models.ModelMerchantSummary>

...

@{var i = 0;}
@foreach (var item in Model)
{
  var tmp = "[" + i + "].ints";
  <tr>
      <td>
          <input name="ints" type="checkbox" id="@tmp" class="chkclass" value="@item.ApplicationID" />
      </td>

...

<input id="Submit" type="submit" class="btn btn-primary" value="Print Application(s)" />

...

控制器:

[AuthorizeAdmin]
[HttpPost]
public ActionResult MerchantApplicationSummary(string[] ints, FormCollection form, int? page)
{

...

感谢@CBauer 和@NickYoung 的帮助!