SA Developer .NET

Welcome to SA Developer .NET Sign in | Join | Help
in Search

Button Click without UpdatePanel

Last post 07-31-2008, 11:08 by DJ_Paulo. 10 replies.
Sort Posts: Previous Next
  •  06-18-2008, 12:29 12876

    Button Click without UpdatePanel

    I am using ASP.Net 2.0 and AJAX 1.0. I am building a user control which will retrieve data from a web service based on data provided by the user. I have the user control working perfectly using JavaScript to retrieve the required data and display it to the user, without using an update panel. However once the data is returned a server side event needs to be fired which will update the containing page. I have got the JavaScript working to fire the server side event, which is in the form of a hidden button with an onclick event.

    The Problem: How do I fire the button click event using AJAX without using an UpdatePanel. I want the event to be fired without causing a full page postback ?

    (The reason I don't want to use an UpdatePanel is plentifull, however at the moment it is an exersize in using AJAX properly and optimising the site.)


    Supplying the masses with useless information since 1996

    The views, comments and opinions expressed in this post is that of the poster alone unless otherwise indicated

    Diago.co.za
  •  06-18-2008, 12:47 12877 in reply to 12876

    Re: Button Click without UpdatePanel

    Have you looked into using Trigger tags?
  •  06-18-2008, 12:52 12878 in reply to 12876

    Re: Button Click without UpdatePanel

    Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}

    By using PageMethods you can minimize the traffic going over the wire – check this out. (UpdatePanel is extremely chatty, and has some performance considerations).

     

    UpdateTime gets the current time by calling a WebMethod and specifying the two callbacks (OnSucceeded and OnFailed).

     

    <asp:ScriptManager ID="ScriptManager1" runat="server"

                EnablePageMethods="true" />

            <script language="javascript">

             function UpdateTime() {

               PageMethods.GetCurrentDate(OnSucceeded, OnFailed);

             }

            

             function OnSucceeded(result, userContext, methodName) {

               $get('Label1').innerHTML = result;

             }

            

             function OnFailed(error, userContext, methodName) {

               $get('Label1').innerHTML = "An error occured.";

             }

            </script>

            <asp:Label runat="server" ID="Label1" Text="Update Me!" /><br />

            <input type="button" id="Button2" value="Web Method Update"

                onclick="UpdateTime();" />

     

     

    Here’s the server-side webmethod:

     

    [WebMethod]

            public static string GetCurrentTime()

            {

                return DateTime.Now.ToLongTimeString();

            }

     

    There is no post-data, and the response looks as follows (JSON):

     

    {"d":"05:21:24 PM"}

     

    Does this help?

  •  06-18-2008, 12:54 12879 in reply to 12878

    Re: Button Click without UpdatePanel

    Whoops. Copied and pasted from an email I sent someone with a similar issue a while ago - please ignore the pre-pended junk!
  •  06-18-2008, 13:07 12880 in reply to 12877

    Re: Button Click without UpdatePanel

    dions:
    Have you looked into using Trigger tags?

    This requires the use of an UpdatePanel which is what I am trying to avoid. 


    Supplying the masses with useless information since 1996

    The views, comments and opinions expressed in this post is that of the poster alone unless otherwise indicated

    Diago.co.za
  •  06-18-2008, 13:10 12881 in reply to 12878

    Re: Button Click without UpdatePanel

    ernst:
    Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}

    By using PageMethods you can minimize the traffic goingover the wire – check this out. (UpdatePanel is extremely chatty, and has some performance considerations).

     

    UpdateTime gets the current time by calling a WebMethod andspecifying the two callbacks (OnSucceeded and OnFailed).

     

    <asp:ScriptManager ID="ScriptManager1"runat="server"

               EnablePageMethods="true"/>

           <script language="javascript">

            function UpdateTime() {

              PageMethods.GetCurrentDate(OnSucceeded, OnFailed);

            }

            

            function OnSucceeded(result, userContext,methodName) {

              $get('Label1').innerHTML = result;

            }

            

            function OnFailed(error, userContext,methodName) {

              $get('Label1').innerHTML = "An error occured.";

            }

           </script>

           <asp:Label runat="server"ID="Label1"Text="UpdateMe!" /><br />

           <input type="button"id="Button2"value="Web MethodUpdate"

               onclick="UpdateTime();"/>

     

     

    Here’s the server-side webmethod:

     

    [WebMethod]

           public static string GetCurrentTime()

           {

               return DateTime.Now.ToLongTimeString();

           }

     

    There is no post-data, and the response looks as follows (JSON):

     

    {"d":"05:21:24PM"}

     

    Does this help?

    This part I have working beatifully, except the following needs to happen: Once the time is updated a server side event needs to be fired which will excute code predetermined by the developer. The asyncronous update therefore acts as a trigger. So when the JSON request is successfull (SuccessFull fired in JS) the JS calls the hidden button click to fire the server side event. Except I want that server side event also to happen without causing the full postback.

    I am convinced there must be a way to do a button click using AJAX without using an UpdatePanel, however the click event will not be calling a web service. 


    Supplying the masses with useless information since 1996

    The views, comments and opinions expressed in this post is that of the poster alone unless otherwise indicated

    Diago.co.za
  •  06-20-2008, 9:35 12914 in reply to 12881

    Re: Button Click without UpdatePanel

    I'm not sure I understand the use case correctly. Why exactly do you need an actual "server side event" to occur? Is it because you want the viewstate to travel back to the server? Is it because you want to re-render portions of the page? Also, can you go into the reasons for not using UpdatePanels?  
  •  06-20-2008, 9:58 12916 in reply to 12914

    Re: Button Click without UpdatePanel

    is the input type submit or button.  i can only think that the submit, if in a form will cause a post, whereas the button won't, i think.

    Tongue Tied


    I'm going to regret forging this...
  •  07-01-2008, 13:55 13098 in reply to 12916

    Re: Button Click without UpdatePanel

    Orikuuido:

    is the input type submit or button.  i can only think that the submit, if in a form will cause a post, whereas the button won't, i think.

    Tongue Tied

    You're thinking html buttons - and a type="submit" IS a button.

    Diago:  have you tried using a Javascript to fire the on_click?  I'm afraid I don't know much about Ajax without the use of an UpdatePanel, but I do know that you can force postbacks using Javascript - why not put this in your Asynchronous Postback script?


    Someone once told me love makes the world go around and, well, I just had to laugh in their face because EVERYBODY knows what REALLY makes the world go around is a mutant gerbil on a treadmill.
  •  07-25-2008, 16:29 13704 in reply to 13098

    Re: Button Click without UpdatePanel

    Kitten:
    Orikuuido:

    is the input type submit or button.  i can only think that the submit, if in a form will cause a post, whereas the button won't, i think.

    Tongue Tied

    You're thinking html buttons - and a type="submit" IS a button.

    Diago:  have you tried using a Javascript to fire the on_click?  I'm afraid I don't know much about Ajax without the use of an UpdatePanel, but I do know that you can force postbacks using Javascript - why not put this in your Asynchronous Postback script?

    I'm with Kitten on this one. The script you have set to process the first Method can call a second Web Method without using an updatePanel.
  •  07-31-2008, 11:08 13808 in reply to 12876

    Re: Button Click without UpdatePanel

    Maybe the code in this example will point you in the right direction:

    http://www.codeproject.com/KB/ajax/Dynamic_AJAX_Modal_Popup.aspx


    Homer: But every time I learn something new, it pushes out something old! Remember that time I took a home wine-making course and forgot how to drive?
    Marge: That's because you were drunk!
    Homer: And how!
View as RSS news feed in XML
Powered by Community Server (Commercial Edition), by Telligent Systems