选中复选框从行中检索值

Question

我要做什么

有一点上下文，我们有一个应用程序，在索引页面上，我们仅列出数据库中的项目。 我们要尝试做的是，当我们选择索引记录左侧的复选框（最多10个）时，会将ID传递给另一页，这样我们就可以显示所选记录的5张图像。

我们所做的

到目前为止，我们所做的只是简单地向我们的gridmvc添加一个复选框。

问题

我们遇到的问题是，我们不确定

A）如何将选择范围限制为10。

B）如何将所需的值从选定的行传递到函数或控制器。 基本上，我们不知道如何检索它。

PS将其传递给功能或控制器无关紧要，只是想知道如何访问它。 我还应该提到我正在为网格使用GRID MVC

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

@using GridMvc.Html

@model List<stuRegister.Models.tbl_out_stu>

<h2>Mass Print Images</h2>
<h4>Select a maximum of 10 students to print corresponding label</h4>

 @Html.NoEncodeActionLink("Print Selected", "Add New", "Create", "Outgoing", routeValues: null, htmlAttributes: new { @onclick="loadCC()",@class = "btn btn-primary" })

<input type="button" value="Print Selected" id="btnManMail" class="btn btn-primary" onclick="loadCC()" />


@Html.Grid(Model).Columns(columns =>
{
    columns.Add().Titled("Print Multiple Images").Encoded(false).Sanitized(false).SetWidth(30).RenderValueAs(o => Html.CheckBox("massPrint", false));
    columns.Add(data => data.in_refno).Titled("Reference No.");
    columns.Add(data => data.destination).Titled("Orgin");
      columns.Add(data => data.date_sent).Titled("Date Sent").Format("{0:MMM-dd-yyyy}");

    }).Sortable(true).WithPaging(20).Filterable(true)

<input type="button" value="Print Selected" id="btnManMail" class="btn btn-primary" onclick="loadCC()" />

Answer 1

这里有几个问题，但这是其中之一。 要限制用户可以检查的复选框数量，您应该在客户端添加javascript，以便向用户发出警告/不能选择超出最大数量的复选框。 你也应该在服务器端添加验证，所以，如果他们通过比你想了解更多，您的控制器处理它。

这是一些用于限制复选框选择的JavaScript（利用jQuery）。 请注意，网格ID可能与您的ID不匹配，并且页面上有一个div（#selectedRowCount）供用户反馈：

<script type="text/javascript">
    var maxRowValue = 20;

    function UnCheckAllCheckboxes() {
        $('#streetGrid :checked').removeAttr('checked');
        $('#selectedRowCount').text('0 of ' + maxRowValue + ' maximum locations selected.'); 
    }

    $(document).ready(function () {
        var selectedRows = $('#streetGrid :checked').length;
        $('#selectedRowCount').text(selectedRows + ' of ' + maxRowValue + ' maximum locations selected.');

        $('#streetGrid :checkbox').click(function() {
            selectedRows =  $('#streetGrid :checked').length; 
            if(selectedRows > maxRowValue) {
                alert('Maximum of ' + maxRowValue + ' rows can be selected.');
                $(this).removeAttr('checked');
                selectedRows--;
            }          
            $('#selectedRowCount').text(selectedRows + ' of ' + maxRowValue + ' maximum locations selected.'); 
        });
    });
</script>