Contents tagged with AJAX

  • Simplified ASP.NET AJAX Custom Control Development With VS Item Template

    Hello,

    At work today I had a friend (Blair) have issues with trying to get a browser alert to popup on the page during an ASYNC post back. I told him I would make a custom control in 30 secounds or less that would do this and make life much easier. Overkill I know for such a simple task but it was more of a demo to show the ease/speed of creating a control using my custom item template.

  • ASP.NET Ajax using a custom ViewManager to render paged data without updatepanels

    Sometimes you do not want the overhead of using an updatepanel, as each time you make a request it is posting more back than you might need, sure it can be powerful and easy to use but not always the most effective way Say you would like to be able to not use viewstate or postbacks but would like to get a result set of data that can be paged and you would like this totally client driven and to use the least ammount of overhead.

    Following on from Scott Guthries ViewManager (thanks Scott), and some ideas I have had lately to do alot more things client side and maybe stop using updatepanels. I have made a more generic ViewManager which I blogged about earlier, basically is just allows you to set properties of your control alot easier and can set any properties the control may have before you go ahead and render it. Don't flame for writing something already done, I find my version of the ViewManager easier to use, so thought I would share.

  • Fully Accessible And SEO Friendly Ajax Paging Using DataPager

    Hey All,

    Working on my current project I implemented paging using a listview and a datapager. I then decided it would be much nicer to use AJAX for my paging so wrapped all this up in an updatepanel. Next step was the issue when you would goto a page, select a product and hit the browser back button you would get the first page not the page you were last on. To fix this I simply implemented the ASP.NET AJAX Futures History control which allowed me to save my current page and restore this at a later time.

    Perfect I thought until I started thinking about SEO, now my product catalogue was dead to a search engine as it would only see the first page and not be able to do any further paging. To fix this I went about creating a SEO friendly linkbutton control (I have blogged about this a while back but this is the first time I used it in real life). Basically what the SEO Friendly linkbutton does is render a normal navigateURL and the postback as an onclick. This way with Javascript turned on you get a postback but without you have a normal URL, in my case I am passing the page # in my url like so: http://site.com/catalogue/page-XX/Whatever.aspx, I am using URL Rewriter.NET for my URL rewriting so making a nice URL for this was as simple as adding a new rule into my web.config.

    Firstly here is my custom SEOLinkButton control (Its in VB.NET as is my current project, I have a C# version too but will just post the VB.NET version unless requested):

    Public Class SEOLinkButton
        Inherits LinkButton

    #Region "Properties"

        Public Property NavigateURL() As String
            Get
                Return If(ViewState("NavigateURL") Is Nothing, "", ViewState("NavigateURL").ToString())
            End Get
            Set(ByVal value As String)
                ViewState("NavigateURL") = value
            End Set
        End Property

    #End Region

        Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)

            If (Me.Page IsNot Nothing) Then
                Me.Page.VerifyRenderingInServerForm(Me)
            End If

            Me.EnsureID()
            writer.AddAttribute(HtmlTextWriterAttribute.Id, Me.ClientID)

            If (Not String.IsNullOrEmpty(Me.CssClass)) Then
                writer.AddAttribute(HtmlTextWriterAttribute.Class, Me.CssClass)
            End If

            If (Not Me.Enabled) Then
                writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled")
            End If

            If (Not String.IsNullOrEmpty(Me.NavigateURL) AndAlso Me.Enabled) Then
                ' Set the href to be our navigateUrl.
                writer.AddAttribute(HtmlTextWriterAttribute.Href, Me.ResolveUrl(Me.NavigateURL))
            End If

            If (Me.Enabled) Then

                Dim customScript As String = Me.OnClientClick

                If (customScript.Length > 0 AndAlso Not customScript.EndsWith(";")) Then
                    customScript = customScript + ";"
                End If

                Dim opts As PostBackOptions = Me.GetPostBackOptions()
                Dim evt As String = Nothing

                If (opts IsNot Nothing) Then
                    evt = Me.Page.ClientScript.GetPostBackEventReference(opts)
                End If

                ' The onclick now becomes our postback, and the appended custom script.           
                writer.AddAttribute(HtmlTextWriterAttribute.Onclick, String.Format("{0}; {1} return false;", evt, customScript))

            End If

        End Sub

    End Class

  • EventValidation issues with asp.net ajax and FireFox caching causing issues...

    Was having some wierd issues with asp.net ajax in firefox. If for example you put a textbox and a button in an updatepanel and put in a value and click the button. Then you hit F5, in IE the value will be gone, but in FireFox the value is still there. This is due to firefox caching input values. The only way to clear that textbox in FF is to do a ctrl + F5. I had an issue in a paged datagrid where if you paged to say page 5, hit F5 it would be at page 1, hit nextpage and it would be back at 5. This had me stumped until I realised that firefox is caching the values and most likely the __VIEWSTATE hidden field is being cached and this is causing the issues. So I added this to my page load:

    Response.Cache.SetNoStore()


    This made firefox work but this turns off client caching which might not be a good idea. A developer (Steve) at work had a form with a button and textbox which in FF would not remember the value, this was a real WTF moment. I got his code and double checked the differences between them. The only thing different was that in his form he had autocomplete="off" set on the form due to using an autocomplete extender. I added this to my form and presto it was working perfectly. This was ok but you might not want to turn autocomplete off for your whole form so what can we do:

    Solution:


    Thinking about this I thought of what fields could affect this. Looking at a page you have the following hidden fields:

    __VIEWSTATE, __EVENTTARGET, __EVENTARGUMENT, __EVENTVALIDATION.


    I decided to try and turn of autocomplete for only these fields using some script at the bottom of my page:

    <script>
           function setAutoCompleteOff(id) {
                var elem = document.getElementById(id);
                if(elem) {
                    elem.setAttribute('autocomplete', 'off');
                }           
            }
           
            setAutoCompleteOff('__VIEWSTATE');
            setAutoCompleteOff('__EVENTTARGET');
            setAutoCompleteOff('__EVENTARGUMENT');
            setAutoCompleteOff('__EVENTVALIDATION');
    </script>


    Then I turned autocomplete back on on the form, and gave it a go, and to my supprise it worked perfectly. Now FF was not using sending over the cached values on hitting F5 and was using the original values. This meant my page works fine. One more thing is you can now turn on EnableEventValidation on your page and it seems to work fine now.

  • PNG Fix Component

    Needing a solution to fix transparent PNG in IE6 I came to start using one of the many javascript based solutions to do this. But when it came time to use ajax and populating new images in my postbacks this obviously broke. So I created a custom ASP.NET Component to help me do this...