[RESOLVED] VS2010 What controls should i use for a Web2.0 type data update.

[davieeeee]

Hi,

Below is what I would like to achieve, I just want to know what controls and technologies you would use to gain the desired effect.

Firstly, I want to read some rows of Data from a SQL datasource.
I want these rows to display on an ASP page. I do not care what control is used to display these rows.

Secondly, I want to be able to click on each of these rows to perform a data UPDATE/DELETE on the selected row.

Third, I want to use jQuery or something similar to make the selected row fade out. Preferablly all this would be done without a postback, but if it makes it easier, I can just use a postback.

To avoid postbacks, would I need to create a web service?
Ignoring postbacks, is it possible to either:
A. call a piece of behindcode in a jQuery script or
B. call a piece of jQuery after a postback.
I would think one of these two solutions would combine to give me the desired effect I am after.

[danasegarane]

Are you using Asp or Asp.net ?

[davieeeee]

Sorry, im am using Asp.net

[danasegarane]

Can't you use repeater control to display the data ?

[davieeeee]

I don't have much experience using the repeater control so pardon my ignorance. From what I gather on msdn, the advantage of using the repeater control is that it will get data and repeat it in the HTML side of things based on a template.
This sounds fine and would suit my needs. However, I am still not sure how I would call the jquery script (to fade out) with the SQL update (preferably without postback) I am only now starting to implement client side code so that may contribute to my lack of understanding.

[danasegarane]

I don't have much experience using the repeater control so pardon my ignorance. From what I gather on msdn, the advantage of using the repeater control is that it will get data and repeat it in the HTML side of things based on a template.
This sounds fine and would suit my needs. However, I am still not sure how I would call the jquery script (to fade out) with the SQL update (preferably without postback) I am only now starting to implement client side code so that may contribute to my lack of understanding.

You can place the control in Ajax Update Panel and handle the event to make the sliding effect.


Sample code

 <script language="javascript" type="text/javascript">

            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_initializeRequest(InitializeRequest);
            prm.add_endRequest(EndRequest);

            var postBackElement;

            function InitializeRequest(sender, args)
            {

              //Start Your animation here
                CloseError();
                if (prm.get_isInAsyncPostBack())
                    args.set_cancel(true);

                postBackElement = args.get_postBackElement();
                if ((postBackElement.id == 'btnSave') || (postBackElement.id == 'ddlVehicleCode') || (postBackElement.id == 'ddlToCompany'))
                   {
                    $get('UpdateProgess2').style.display = 'block';               
                    toggleControls(true);
                    
                    }
            }

            function EndRequest(sender, args)
            {
               //End your animation here
              
                if ((postBackElement.id == 'btnSave') || (postBackElement.id == 'ddlVehicleCode') || (postBackElement.id == 'ddlToCompany'))
                    $get('UpdateProgess2').style.display = 'none';
                     // Check to see if there's an error on this request.
                  if (args.get_error() != undefined)
                  {
                    // If there is, show the custom error.
                    $get('lblError').innerText = 'Sorry, An error occured while processing.';
                    // Let the framework know that the error is handled, 
                    //  so it doesn't throw the JavaScript alert.
                    args.set_errorHandled(true);
                  }
                  $get('btnSave').disabled=false;
                  toggleControls(false);
            }
             function CloseError() {
                  // Hide the error div.
                  $get('lblError').innerText = '';}
             function toggleControls(value)
             { 
              //Disable/enable the controls in the panel
              $get('ddlToCompany').disabled=value;
              $get('ddlFacility').disabled=value;
              $get('ddlVehicleCode').disabled=value;
             }     
        </script>

[davieeeee]

danasegarane, thank you for your help and even supplying sample code. I really appriciate it.

[gep13]

Nice sample Dana

[danasegarane]

Thanks Gary