Unexpected disabled button behavior

2 posts, 0 answers
  1. Olaf
    Olaf avatar
    3 posts
    Member since:
    Aug 2016

    Posted 20 Aug Link to this post

    Hi i used your example http://demos.telerik.com/aspnet-ajax/asyncupload/examples/persistuploadedfiles/defaultvb.aspx?show-source=true

    I modified it a bit to be more simple:

     

    TestUpload.aspx

    001.<%@ Page Language="vb" CodeFile="TestUpload.aspx.vb" AutoEventWireup="true" Inherits="TestUpload" %>
    002. 
    003.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    004. 
    005.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    006.<html xmlns='http://www.w3.org/1999/xhtml'>
    007.<head runat="server">
    008.    <title>Telerik ASP.NET Example</title>
    009.    <style type="text/css">
    010.        /** Customize the demo canvas */
    011.        #example .demo-container {
    012.            padding: 28px 0;
    013.            width: 882px;
    014.            height: 330px;
    015.            background: transparent url("Images/background.png") top left no-repeat;
    016.            position: relative;
    017.        }
    018. 
    019.            #example .demo-container h2 {
    020.                margin: 0 -30px 15px;
    021.                padding: 25px 30px 0;
    022.                color: #ffffff;
    023.                background: #4ba2d1;
    024.                font-size: 36px;
    025.                line-height: 1;
    026.            }
    027. 
    028.        .demo-container h2 sup {
    029.            font-size: 14px;
    030.            line-height: 1;
    031.        }
    032. 
    033. 
    034.        .demo-container .qsf-fb {
    035.            padding: 30px;
    036.            width: 327px;
    037.            overflow: hidden;
    038.        }
    039. 
    040.            .demo-container .qsf-fb ul {
    041.                margin: 0;
    042.                padding: 0;
    043.                list-style-type: none;
    044.            }
    045. 
    046.            .demo-container .qsf-fb label {
    047.                width: auto;
    048.                display: block;
    049.            }
    050. 
    051.            .demo-container .qsf-fb .buttons {
    052.                margin-top: 13px;
    053.            }
    054. 
    055. 
    056.        .demo-container .preview {
    057.            width: 495px;
    058.            height: 331px;
    059.            position: absolute;
    060.            top: 28px;
    061.            left: 387px;
    062.        }
    063. 
    064.        /* Customize uploaded file name */
    065.        html .RadUpload .ruUploadProgress {
    066.            display: inline-block;
    067.            max-width: 200px;
    068.            overflow: hidden;
    069.            text-overflow: ellipsis;
    070.            white-space: nowrap;
    071.            vertical-align: top;
    072.        }
    073. 
    074.        html div.photo-upload {
    075.            font-size: 12px;
    076.        }
    077.    </style>
    078.</head>
    079. 
    080.<body>
    081.    <form id="form1" runat="server">
    082.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    083.            <Scripts>
    084.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    085.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    086.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    087.            </Scripts>
    088.        </telerik:RadScriptManager>
    089.        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    090.        <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="Buttons, TextBox" />
    091. 
    092.        <div class="demo-container no-bg">
    093.            <div class="qsf-demo-canvas" id="qsfexWrapper">
    094.                <div class="qsf-fb">
    095.                    <h2>Dream Holiday <sup>Contest</sup></h2>
    096.                    <ul>
    097.                        <li>
    098.                            <label>Upload a photo of your dream holiday:</label>
    099.                            <telerik:RadAsyncUpload RenderMode="Lightweight" CssClass="photo-upload" runat="server" ID="RadAsyncUpload1" OnClientFileUploaded="onClientFileUploaded" PostbackTriggers="RadButton1"
    100.                                MaxFileInputsCount="1" AllowedFileExtensions=".jpg" Skin="Outlook" />
    101.                        </li>
    102.                    </ul>
    103. 
    104.                    <p class="buttons">
    105.                        <asp:Button runat="server" ID="RadButton1" Text="Submit your picture and information" OnClientClick="updatePictureAndInfo(); return false;" />
    106.                    </p>
    107.                </div>
    108. 
    109.                <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ImageUrl="images/blank.png"
    110.                    Width="495" Height="331" ResizeMode="Fit" AlternateText="No picture available"
    111.                    CssClass="preview"></telerik:RadBinaryImage>
    112.            </div>
    113.            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    114.                <script type="text/javascript">
    115.                    //<![CDATA[
    116.                    Sys.Application.add_load(function () {
    117.                        window.upload = $(".RadAsyncUpload");
    118.                        window.button = $("#RadButton1");
    119.                        demo.initialize();
    120.                    });
    121. 
    122. 
    123.                    //]]>
    124.                </script>
    125.            </telerik:RadScriptBlock>
    126.            <script type="text/javascript">
    127.                (function () {
    128.                    var $;
    129.                    var upload;
    130.                    var button;
    131.                    var demo = window.demo = window.demo || {};
    132. 
    133.                    demo.initialize = function () {
    134.                        $ = $telerik.$;
    135.                        button = window.button;
    136.                        upload = window.upload;
    137.                    };
    138. 
    139.                    window.onClientFileUploaded = function (sender, args) {
    140.                        button.removeAttr('disabled');
    141.                    };
    142. 
    143.                    window.updatePictureAndInfo = function () {
    144.                        var uploadedRows = upload.find(".ruUploadSuccess");
    145.                        if (uploadedRows.length > 0) {
    146.                            alert('postback');
    147.                            __doPostBack('RadButton1', 'RadButton1Args');
    148.                        }
    149.                        else {
    150.                            alert("Please select a picture/country");
    151.                        }
    152.                    };
    153. 
    154. 
    155.                })();
    156.            </script>
    157.        </div>
    158. 
    159.    </form>
    160.</body>
    161.</html>

    And the VB.net code

    01.Imports System
    02.Imports System.Drawing
    03. 
    04.Partial Class TestUpload
    05.    Inherits System.Web.UI.Page
    06. 
    07.    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    08. 
    09.        If (Not IsPostBack) Then
    10.            RadButton1.Enabled = False
    11.        Else
    12. 
    13.            RadButton1.Enabled = True
    14.        End If
    15. 
    16.    End Sub
    17. 
    18.    Protected Sub FileUploaded() Handles RadAsyncUpload1.FileUploaded
    19. 
    20.        Dim bitmapImage As Bitmap = ResizeImage(RadAsyncUpload1.UploadedFiles(0).InputStream)
    21.        Dim stream As System.IO.MemoryStream = New System.IO.MemoryStream()
    22.        bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp)
    23.        RadBinaryImage1.DataValue = stream.ToArray()
    24. 
    25.    End Sub
    26. 
    27.    Protected Sub RadButton1_Click() Handles RadButton1.Click
    28. 
    29. 
    30.    End Sub
    31. 
    32.    Public Function ResizeImage(ByVal stream As IO.Stream) As Bitmap
    33.        Dim originalImage As System.Drawing.Image = Bitmap.FromStream(stream)
    34. 
    35.        Dim height As Integer = 331
    36.        Dim width As Integer = 495
    37. 
    38.        Dim scaledImage As New Bitmap(width, height)
    39. 
    40.        Using g As Graphics = Graphics.FromImage(scaledImage)
    41.            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic
    42.            g.DrawImage(originalImage, 0, 0, width, height)
    43.            Return scaledImage
    44.        End Using
    45. 
    46.    End Function
    47. 
    48.End Class

    On line 99 of the aspx file you can see that the postbacktrigger is set to RadButton1. RadButton1 fires updatePictureAndInfo (line 143) I added a alert('postback') just before the __doPostBack() but this is never triggered. 

     

    Now in the VB file. If i were to change RadButton1.enabled = False to Radbutton1.enabled = True (line 10). Then press the button after uploading a JPG image the postback alert is fired but I get a server error:

    Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

     

    Any help? I need the function updatePictureAndInfo() to fire even when the submit button initially would be disabled.

    Thanks

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 24 Aug Link to this post

    Hello Olaf,

    I attached a modified version of your page. The issue is coming from disabling the asp:Button with ID "RadButton1" in the code behind, which leads to its ClientClick event not firing even though you remove its attribute in onClientFileUploaded. I changed the asp:Button to RadButton, so that I can use its client-side method set_enabled(true). Also note that you need to get a proper reference to the RadButton: window.button = $find("<%=RadButton1.ClientID%>");
    After the changes the alert('postback') is displayed as expected.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top