从 ASP.NET MVC 视图向控制器传递值

Question

我在将选中的复选框值发送到我的控制器时遇到问题，我检查了它们，但没有任何反应。我只能一个一个地做到这一点，当我重新加载页面时它已被保存，但我不确定如何将多个选中复选框的值传递回控制器。

这是我的cshtml。

<table class="table table-striped grid-table">
    <tr>
        <th>Samp</th>
        <th>Id of Book</th>
        <th>
          <input type="checkbox"  id="box" name="checkAll" />
        </th>
    </tr>
    @foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
    {
        <tr>
            <td>@item.idtip</td>
            <td>@item.tipname</td>
            <td>
             <div class="pure-checkbox">
             <input type="checkbox" idtip="@item.idtip" class="checktip" checked="@(item.idemployee == ViewBag.idemployee ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
             <label for="@item.id.ToString()"></label>
            </div>
            </td>
        </tr>
    }
</table>
<input type="hidden" value="@ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />   

这是我的控制器

public JsonResult CheckUsers(int idemployee, int idtip, bool che)
{
    try
    {
        if (che)
        {
            checkusers cheuser = new checkusers();
            cheuser.idemployee = idemployee;
            cheuser.idtip = idtip;
            Database.checkusers.Add(cheuser);
            Database.SaveChanges();
        }
        else if (!che)
        {
            var cheuserdelete = Database.checkusers.Where(a => a.idemployee == idemployee && a.idtip == idtip).FirstOrDefault();
            Database.checkusers.Remove(cheuserdelete);
            Database.SaveChanges();
        }
        if (Request.IsAjaxRequest())
        {
            return Json(true, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json(true, JsonRequestBehavior.AllowGet);
        }
    }
    catch (Exception ex)
    {
        Logger.Error("Error: {0}", ex.ToString());
        return null;
    }
}

这是我的带有 post 方法的 jquery。

$('#box').click(function () {
        $('.checktip').prop('checked', true);
        var idemployee = $('.idemployee').val();
        var idtip = $(this).attr('idtip');
        var che = $(this).prop('checked');
        $.ajax({
            url: UrlSettingsDocument.EmpTipes,
            data: { idemployee: idemployee, idtip: idtip, che: che },
            type: "POST",
            success: function (result) {
                if (result.result == "Redirect") {
                    window.location = result.url;
                }
            }
        });
    });

Answer 1

您的 jQuery 代码为带有 id 'box' 的复选框提供了点击处理程序。根据 html，'box' 是表格中的标题行元素。事件处理程序只向服务器发送一个复选框值。这意味着编写代码以仅在标题行复选框上发送选中的事件。

如果您想一次性发送多个复选框值，则需要一个带有单击处理程序的提交按钮，该处理程序遍历表的所有行，收集 idtip 和复选框值并创建一个集合以发送到服务器。 服务端控制器也需要将集合作为参数，遍历它来对输入进行一一处理。

Answer 2

如果您有多个复选框，则必须使用类名访问它们，除非它们具有不同的 id。您可能希望遍历所有复选框并通过索引获取它们的值

3 个复选框和按钮的 HTML

<div class="row">
    Bike <input type="checkbox" class="chkbox" value="Bike" />
    Car <input type="checkbox" class="chkbox" value="Car" />
    Boat <input type="checkbox" class="chkbox" value="Boat" />
</div>  

<div class="row">
     <input type="button" id="btnSubmitCB" value="Submit" />
</div>

jQuery

$(document).ready(function () { 

    $('#btnSubmitCB').click(function () {

        $('input[type=checkbox]').each(function () {
            if (this.checked) {
                var ckbIndex = $('.chkbox').index(this);
                var cbValue = $('.chkbox').eq(ckbIndex).val();
                console.log(cbValue);
            }
        });        
     });

  });