无法通过后台及JS修改ASP CheckBox边框颜色实现变色效果

你之前的代码不生效核心是两个认知错误：

• WebForm是请求-响应模型，服务器端的事件代码会在一次请求里全部执行完，才会把最终渲染好的HTML返回给浏览器。你在后台连续给CheckBox设红色、再设绿色，最终返回给前端的只有最后设置的绿色状态，中间的红色根本不会传到浏览器，自然看不到。WinForm的Refresh/Update是本地UI线程的刷新方法，Web场景下没有服务器端强制前端即时刷UI的可能，所有UI变更要么是前端JS即时改，要么是等服务器响应返回新的HTML再渲染。
• 你写的JS不生效是两个低级错误：一是HTML里根本没有<javascript>这种标签，脚本必须放在<script>标签里才会执行；二是ASP.NET的CheckBox服务器控件不会识别你随便写的onChanged属性，这个属性不会被渲染到最终生成的input元素上，事件自然绑不上。

这个效果必须前后端配合实现，逻辑很简单：点击复选框瞬间前端JS立刻把边框设为红色，等Ajax后台请求执行完成、局部刷新结束后，再由后端返回的状态把边框改成绿色。

第一步：修改前端ASPX代码 #

修正脚本写法，保留原有Ajax配置，给RadGrid加行绑定事件：

<script type="text/javascript">
    // 点击复选框瞬间触发，无延迟把边框设为红色
    function setBorderRed(sender) {
        sender.style.borderStyle = "solid";
        sender.style.borderColor = "#FF0000";
    }
</script>

<telerik:RadAjaxManagerProxy ID="radajaxmanager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="chkSave">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="chkSave" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<%-- 给RadGrid加ItemDataBound行绑定事件 --%>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowAutomaticDeletes="true" AllowMultiRowSelection="True" OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Caption="List" DataKeyNames="Id">
        <Columns>
            <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Price" HeaderText="Price" UniqueName="Price"></telerik:GridBoundColumn>

            <telerik:GridTemplateColumn HeaderText="Save this"> 
                <ItemTemplate> 
                    <asp:CheckBox ID="chkSave" runat="server" AutoPostBack="true" OnCheckedChanged="chkSave_CheckedChanged" />
                </ItemTemplate> 
            </telerik:GridTemplateColumn> 
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

第二步：修改后台VB代码 #

在行绑定事件里给每个复选框绑客户端点击事件，CheckedChanged事件里只保留业务逻辑，最后设置绿色边框即可：

' 行数据绑定时，给每行的复选框加客户端点击事件
Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim chk As CheckBox = CType(e.Item.FindControl("chkSave"), CheckBox)
        ' 给最终渲染的input元素绑定onclick事件，避免服务器控件吞自定义属性
        chk.Attributes.Add("onclick", "setBorderRed(this);")
    End If
End Sub

Protected Sub chkSave_CheckedChanged(sender As Object, e As EventArgs)
    Dim chk As CheckBox = CType(sender, CheckBox)
    Dim status As Boolean = chk.Checked
    Dim item As GridDataItem = CType(chk.NamingContainer, GridDataItem)
    Dim keyvalue As String = item.GetDataKeyValue("Id").ToString()

    ' 这里放你原有的后台业务逻辑，比如数据库更新操作
    ' 业务逻辑执行完成后，直接把边框设为绿色
    chk.BorderStyle = BorderStyle.Solid
    chk.BorderColor = System.Drawing.ColorTranslator.FromHtml("#00FF00")
    
    ' 需要弹提示的话，在设置完绿色后注册脚本即可，回发完成弹框时边框已经是绿色
    ScriptManager.RegisterClientScriptBlock(Page, Me.GetType(), "MyScript", "alert('Changed');", True)
End Sub

效果说明 #

• 用户点击复选框的瞬间，前端JS不需要等待服务器响应，立刻把边框改成红色，没有任何延迟
• 后台业务逻辑执行完成后，Ajax局部刷新会把设置好绿色边框的CheckBox重新渲染到页面，边框自动变为绿色
• 完全符合两次变色的需求，不会出现之前看不到红色的问题

内容的提问来源于stack exchange，提问作者Chevelho51