如何使用jquery ajax显示复选框列表中的项目

Question

我正在尝试获取使用 ajax 和 jquery 选择的某个复选框的值。现在我的网站上列出了所有项目，但我想让用户选中复选框以获取所选项目。

控制器：

[HttpGet] public JsonResult getCategoryItems(){}

怎么做？

查看：

@for (int i = 0; i < Model.CarsCount.Count(); i++)
{                
    var cars = Model.CarsCount.ElementAt(i);              
    <span class="label label-info">
        @cars.CategoryName <span class="badge">@cars.CategoryCount</span
    </span>
    @Html.CheckBox(cars.CategoryName, cars.isChecked, new { id = "carsCheckbox"})
}

如您所见，上面的代码只是将类别中的项目计数为复选框。我只想让用户检查复选框，但是用户可以通过检查复选框中的项目来获取项目。

private IEnumerable<CarViewModel> GetListOfCars()
    {
        var listOfcars = this.Data.cars.All()
            .Select(t => new CarViewModel
            {
                Id = t.Id,
                Title = t.Title,
                Price = t.Price ,
                FileName = t.FileName
            });
        return listOfcars;
    }

Answer 1

您的问题有点令人困惑。但是我假设当用户选择一个复选框时，您希望将该复选框的 ID 发送到您的操作方法并获得一些您将用于更新 UI 的响应。

正如 Stephen Muecke 在 cmets 中提到的，您当前的代码正在为复选框生成重复的 Id 值。您的表单元素不应有重复的 ID。

假设您的 HesViewModel 中的每个项目都有一个 Id 属性（具有唯一值），我们将使用该属性发送到服务器。

当你渲染复选框时，你可能会传入用于渲染 css 类 的 html 属性（我们将使用我们的 jQuery 选择来监听复选框状态的任何变化）和一个 Id（我们将使用这个唯一值发送到服务器）

for (int i = 0; i < Model.HesViewModels.Count(); i++)
{
    var cars = Model.HesViewModels.ElementAt(i);
    <span class="label label-info"> @cars.DetailRasonCode </span>

    @Html.CheckBox(cars.CategoryName,
               cars.isChecked, new { @class = "myCheck", id = cars.Id})
}

现在我们将有一些 jQuery 代码来监听复选框的变化。勾选后，我们将使用Id属性值并使用ajax将其发送到服务器。

$(function () {

    $("input.myCheck").change(function(e) {
        var _this = $(this);
        if (_this.is(":checked")) {
            var id = _this.attr("id");
            alert(id);
            //Let's make the Ajax call now
            var url = "@Url.Action("getCategoryItems","Home")?id=" + id;
            $.get(url, function () {

            }).done(function (res) {
                alert('response from server received');
                console.log(res);
                //Use the response as needed to update your UI
            }).fail(function () {
                alert("error");
            });
        }
    });
});

当然，现在你的操作方法应该接受一个 id 作为参数

[HttpGet] 
public JsonResult getCategoryItems(int id)
{
   // to do : Send some useful data back.
   return Json(new { Data :"Good"},JsonRequestBehaviour.AllowGet);
}