mercredi 24 janvier 2018

Checkbox handling practices asp.net

I'm recently working on asp.net core and now I'm currently working on asp.net, I want to implement the select all/deselect all checkbox. I find out that there is so much difference, the asp.net having a webpage in .aspx and code behind .aspx.cs From asp.net core, i am using JQuery to control the select all checkbox like this.

@{ var comp = (IEnumerable<ComputerObject>)ViewData["Computer"]; }
<table class="container table table-striped">
        <thead>
            <tr>
                <th class="col-sm-1"><input id="CAId" name="CAId" type="checkbox" onclick="SetAllCheckBoxes(this)" /></th>
                <th class="col-sm-6">Header 1</th>
                <th class="col-sm-2">Header 2</th>
                <th class="col-sm-2">Header 3</th>
                <th class="col-sm-1">Header 4</th>
            </tr>
        </thead>
        @if (comp.Any())
        {
            <tbody>
                @foreach (var item in comp.OrderBy(p => p.Name))
                {
                    <tr>
                        <td class="col-sm-1"><input id="CId" name="checkbox" type="checkbox" value="@item.Id" /></td>
                        <td class="col-sm-6">@item.Name</td>
                        <td class="col-sm-2">@item.Type</td>
                        <td class="col-sm-2">@item.Amount</td>
                        <td class="col-sm-1">@item.DeliveryFees</td>
                    </tr>
                }
            </tbody>
        }

        @if (!comp.Any())
        {
            <tbody><tr><td colspan="5">No Record Found!</td></tr></tbody>
        }
    </table>

@section Scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () { });
        function SetAllCheckBoxes(obj) {
        var c = new Array();
        c = document.getElementsByTagName('input');
        for (var i = 0; i < c.length; i++) {
            if (c[i].type == 'checkbox') {
                c[i].checked = obj.checked;
            }
        }
    }
</script>
}

But when comes to asp.net, I had the .aspx like this

<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

    function ChkAll() {
        alert('Somethings');
        ////$('#CheckAll').is(':checked')
        if ($("INPUT[type='checkbox']").is(':checked')) {
            $("INPUT[type='checkbox']").attr('checked', false);
        } else {
            $("INPUT[type='checkbox']").attr('checked', true);
        }
    }

</script>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
 <table id="ComputerList" class="display">
    <thead>
        <tr>
            <th><asp:CheckBox ID="CheckAll" runat="server" onChange="ChkAll()"/></th>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="cmd"><asp:CheckBox ID="Checkbox" runat="server" /></td>
            <td>Computer</td>
            <td class="cmd">115</td>
            <td class="cmd">England</td>
            <td class="cmd">10</td>
            <td class="cmd">All</td>
            <td class="cmd">No warranty</td>
        </tr>
        <tr>
            <td class="cmd"><asp:CheckBox ID="Checkbox1" runat="server" /></td>
            <td>IPad Air 2</td>
            <td class="cmd">101</td>
            <td class="cmd">United State</td>
            <td class="cmd">10</td>
            <td class="cmd">Estate</td>
            <td class="cmd">No Warranty</td>
        </tr>
    </tbody>
</table>
<asp:Button ID="Button1" Text="Submit" runat="server" />
<asp:Button ID="Button2" Text="Cancel" runat="server" />

It seems something wrong, i can't select the CheckAll Checkbox using $('#CheckAll').is(':checked'). when rendered, the Id for it was changed to <input id="ctl00_ContentPlaceHolder2_CheckAll" name="ctl00$ContentPlaceHolder2$CheckAll" type="checkbox">

i am wondering how should i handle it like in the asp.net core? i want to do something just like i did from the asp.net core.




Aucun commentaire:

Enregistrer un commentaire