MVC複選框選中方法

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>





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章