在视图中计算未选中的复选框,asp.net mvc

时间:2015-03-23 10:42:51

标签: jquery asp.net asp.net-mvc c#-5.0

我可以显示已选中的复选框,但我想在部分视图_GetDetailsProfileTab中显示未选中的复选框。

我有这个用于ckecked复选框:

 <table width="550">
                            <tr>
                                <td><h6>NAME</h6></td>

                                <td><h6>COUNTRY</h6></td>

                                <td><h6>DIFFICULT LEVEL</h6></td>

                            </tr>



                            @{
                                foreach (var climb in Model.Climbs)
                                {


                                    <tr>
                                        <td>@climb.Name</td>
                                        <td>@climb.country.country_name </td>
                                        <td>@climb.difficult.DifficultName</td>
                                    </tr>



                                }


                            }
                           <tr><th><br /></th></tr>
                            <tr>
                                <td>@Model.Climbs.Count</td> of 
                            </tr>
                        </table>

但如何显示未选中的复选框?

例如,我无法使用它:

$(document).ready(function () {

            var numSelected = $("input.mycheckBox:checked").length;
                alert(numSelected)




            });
部分视图中的

:_GetDetailsProfileTab,因为ckeckbox在其他局部视图中定义。在_GetDetailsProfileTab,Detial视图中,用户只能通过他/她的个人资料查看用户选中的复选框。

这是视图,用户可以在其中选中复选框(_GetClimbTab):

@model ContosoUniversity.Models.UserProfile
@using ContosoUniversity.Source
@{
    ViewBag.Title = "GetClimbs";
}


@using (Html.BeginForm("GetClimbs", "Account", FormMethod.Post, new { id = "form_Id", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal" id="chexkboxes">


        @Html.HiddenFor(model => model.Id)


        <table border="0">
            <tr>

        @{
    int cnt = 0;
    List<ContosoUniversity.ViewModels.AssignedClimb> climbs = ViewBag.Climbs;


    foreach (var climb in climbs)
    {  
        if (cnt++ % 1 == 0)
        {
                    @:</tr><tr>
                }


                @:<td>

            <input type="checkbox"
                   id="toggleAll"
                   name="selectedClimbs"
                   class="mycheckBox"
                   value="@climb.ClimbID"
                   @(Html.Raw(climb.Assigned ? "checked=\"checked\" " : "  ")) />

                           @climb.Title @: -  @climb.NameCountry - @climb.DifficultName




                 @:</td>
            }
            @:</tr>
        }
            </table>

        <input type="checkbox" name="Test" onclick="SetAllCheckBoxes(this)" /><span>Check All</span>




    </div>
    <br />
    <div class="pull-left">
        <div class="col-md-offset-0">
            <input type="submit" value="Save" id="toastr-success" class="btn btn-default pull-left" />

        </div>
    </div>
}

<br /><br />
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

因为最终结果必须是:你从y中选择了x

所以我试试这个:

<table width="550">
                            <tr>
                                <td><h6>NAME</h6></td>

                                <td><h6>COUNTRY</h6></td>

                                <td><h6>DIFFICULT LEVEL</h6></td>

                            </tr>



                            @{

                              List<ContosoUniversity.Models.Climb> climbs = new List<ContosoUniversity.Models.Climb>(); 
                                foreach (var climb in Model.Climbs)
                                {

                                    <tr>
                                        <td>@climb.Name</td>
                                        <td>@climb.country.country_name </td>
                                        <td>@climb.difficult.DifficultName</td>
                                    </tr>



                                }


                            }
                           <tr><th><br /></th></tr>
                            <tr>
                                <td>@Model.Climbs.Count</td>   
                                <td>@climbs.Capacity.ToString()  </td>   




</tr>
                        </table>

<td>@climbs.Capacity.ToString() </td>每次都是0.那么如何获得攀爬总数(已检查和未选中)?

谢谢

这适用于(编辑)视图:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Personal information</a></li>
        <li><a href="#tabs-2">Profile Photo</a></li>
        <li><a href="#tabs-3">Other Photos</a></li>
        <li><a href="#tabs-4">Climb</a></li>
        <li><a href="#tabs-5">route</a></li>
    </ul>
    <div id="tabs-1">
        @Html.Partial("_GetUserProfile", Model)
    </div>
    <div id="tabs-2">
        @Html.Partial("_GetProfilePicture", Model)
    </div>
    <div id="tabs-3">
        @Html.Partial("_GetOtherImages", Model)
    </div>
    <div id="tabs-4">
        @Html.Partial("_GetClimbTab", Model)
    </div>

    <div id="tabs-5">
        @Html.Partial("_GetRouteTab", Model)
    </div>

</div>

@section Scripts
{
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            var numSelected = $("input.mycheckBox:checked").length;
            var numNotSelected = $("input.mycheckBox:not(:checked").length;
            var total = numSelected + numNotSelected;
            alert("not checked:" + numNotSelected);
            alert("You checked:" + numSelected);
            alert("total of checkboxes are: " + total);




            });

因为在GetClimbTab中定义了checbox。

但这不起作用(明细)视图:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Profile</a></li>
        <li><a href="#tabs-2">Photos</a></li>

    </ul>
    <div id="tabs-1">

        @Html.Partial("_GetDetailsProfileTab", Model)
    </div>
    <div id="tabs-2">
        @Html.Partial("_GetDetailsPhotoTab", Model)
    </div>


</div>

@*<h2>Details</h2>*@

@section Scripts{

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />   
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Progressbar.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Progressbar.js")" type="text/javascript"></script>






    <script>

        $(document).ready(function () {


            //var Id = $("#Id").val();
            $.get('@Url.Action("Edit", "Account")', function (data) {
                // data is your partial HTML, $data is your jQuery object containing partial
                //var $data = $(data);
                $("#_GetClimbTab").html(data);
                var numSelected = $("input.mycheckBox:checked").length;
                alert(numSelected);
            });

alert(numSelected); is everytime 0

2 个答案:

答案 0 :(得分:0)

您可以使用:not获取未选中的复选框,请参阅下面的代码

$(document).ready(function () {
   var numSelected = $("input.mycheckBox:not(:checked)").length;
   alert(numSelected)
});

答案 1 :(得分:0)

在从服务器收到部分视图后,您应该将计数复选框逻辑设置为逻辑。例如:

$.get("http://Partial/GetOne", function(data){
    // data is your partial HTML, $data is your jQuery object containing partial
    var $data = $(data);

    var numSelected = $data.find("input.mycheckBox:not(:checked)").length;
    alert(numSelected);
});