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可能与您的不匹配，并且页面上有一个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>

通过选中复选框从行检索值

1 个答案: