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

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.

Are you using Asp or Asp.net ?

Sorry, im am using Asp.net

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

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.

Quote:

---

Originally Posted by 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.

---

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


Sample code

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>

---

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

Nice sample Dana :thumb:

Thanks Gary :)