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在评论中提到的，您当前的代码正在为复选框生成重复的Id值。您的表单元素不应该有重复的ID。

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

当你渲染checkBox时，你可以传入html属性来渲染 css类（我们将使用我们的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);
}

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

1 个答案: