MVC复选框选中方法

最新推荐文章于 2025-05-16 17:10:47 发布

专注开发

最新推荐文章于 2025-05-16 17:10:47 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： .net C# Mvc 文章标签： .net C# mvc checkbox

本文链接：https://blog.youkuaiyun.com/bdbql/article/details/51952769

.net 同时被 3 个专栏收录

25 篇文章

订阅专栏

15 篇文章

订阅专栏

Mvc

4 篇文章

订阅专栏

本文介绍如何在ASP.NET MVC应用中处理复选框的选择操作，通过实例展示了在Model类和视图文件AjaxPaging.cshtml及_AjaxPagingList.cshtml中的关键实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Model类

    public class News
    {
        public int ID { get; set; }
        public string Name { get; set; }

    }

2、Controller返回数据

        private List<News> GetALL()
        {
            List<News> list = new List<News>();
            for (int i = 0; i < 100; i++)
            {
                list.Add(new News { ID = i, Name = "我是ID" + i });
            }
            return list;
        }
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AjaxPaging(int id = 1)
        {
            var model = GetALL().OrderBy(a => a.ID).ToPagedList(id, 5);
            if (Request.IsAjaxRequest())
                return PartialView("_AjaxPagingList", model);
            return View(model);
        }

3、View页面

一、AjaxPaging.cshtml 页面

@{
    ViewBag.Title = "分页";
}
@model PagedList<News>
<div id="news">
    @Html.Partial("_AjaxPagingList", Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
    <script type="text/javascript">
        function handleSuccess(data, xhr, status) {
            $("input[type='checkbox']").each(function (index, element) {
                if ($.inArray(this.value, boxArray) != -1) {
                    $(this).prop('checked', true);
                }
            });
        }
    </script>
    <script>
        var boxArray = new Array();
        $(document).on("click", "input[type='checkbox']", function () {
            if ($(this).prop('checked')) {
                if ($.inArray(this.value, boxArray) == -1) {
                    boxArray.push(this.value);
                }
            }
            else {
                boxArray.splice(jQuery.inArray(this.value, boxArray), 1);
            }
            alert(boxArray.join(","));
        });
    </script>
}

二、_AjaxPagingList.cshtml 页面

@model PagedList<News>

@{ Html.RenderPartial("_AjaxPagingTable"); }
<div class="text-center">
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }, new MvcAjaxOptions { UpdateTargetId = "news", OnSuccess = "handleSuccess" })
</div>

三、_AjaxPagingTable.cshtml 页面

@model PagedList<News>
<table class="table table-striped table-bordered">
    <tr>
        <th class="nowrap">复选框</th>
        <th class="nowrap">
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th class="nowrap">
            @Html.DisplayNameFor(model => model.Name)
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td><input type="checkbox" value="@item.ID" /></td>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
        </tr>
    }
</table>