Jquery + AJAX + ASP.Net + WebForms

Question

I have some JQuery AJAX POSTing data to my backend C# WebForm. It POSTs to a static string WebForm method which returns a value, the JQuery uses that value to change an image url in the html. All is fine and dandy.

However, I would like to expand the functionality of the existing code (though I'm not shut out to rewriting it altogether) to allow me to manipulate the front end ASP controls from the C# backend, which I can not do due to the said static string method acting as my WebForm.

Does anyone have any ideas to help my predicament?

Backend

    [System.Web.Services.WebMethod]
    public static string ImageLoad(string address)
    {
        //if fail
        return "/Unavailable.bmp";

        //if succeed
        return "myimage.jpg";
        //third option
        else
        return "myotherimage.jpg";
    }

JQuery/AJAX

function scriptImageLoad() {
   var address = $("#txtAddress").val();
       $.ajax({
           type: "POST",
           url: "myPage.aspx/ImageLoad",
           data: "{'address':'" + address.toString() + "'}",
           contentType: "application/json; charset=utf-8",
           dataType: "text",
           success: function (output) {
                $('#imgImage').attr('src', output);
           }
       });
   }
});

Answer 1

A postback of some sort is required to process server controls.

Update panels are your only real choice for working with asp.net controls in this scenario.

But I would suggest finding another approach - update panels are evil and will give you warts. the bad kind.

Answer 2

Use a WebService. This will allow you to call the service with jQuery anywhere in your website.

function scriptImageLoad() {
   var address = $("#txtAddress").val();
       $.ajax({
           type: "POST",
           url: "MyService.asmx/ImageLoad",
           data: "{'address':'" + address.toString() + "'}",
           contentType: "application/json; charset=utf-8",
           dataType: "text",
           success: function (output) {
                $('#imgImage').attr('src', output);
           }
       });
   }
});

[WebService, ScriptService]
public class MyService : WebService
{
    [ScriptMethod]
    public static string ImageLoad(string address)
    {
        //if fail
        return "/Unavailable.bmp";

        //if succeed
        return "myimage.jpg";
        //third option
        else
        return "myotherimage.jpg";
    }
}

Answer 3

With the help of a colleague, I developed a different solution. A structure holds the output data I desire, it is then transfered into a string array, then returned via the static string web method. Once returned to the Jquery, the data is pushed to where it needs to go by the different indexes of the array.

Front end

function scriptImageLoad() {
   var address = $("#txtAddress").val();
      $.ajax({
         type: "POST",
         url: "MyForm.aspx/MyMethod",
         data: "{'address':'" + address.toString() + "'}",
         contentType: "application/json; charset=utf-8",
         dataType: "JSON",

         success: function (output) {
            $.each(output, function (index, value) {
               place value in form
               return (index != 0);
            })
            $.each(output, function (index, value) {
               place value in form
               return (index != 1);
            })
            $.each(output, function (index, value) {
               place value in form
               return (index != 2);
            })
            $.each(output, function (index, value) {
               $('#imgImage').attr('src', this);
               return (index != 3);
            })
         }

Back end

    public struct TestStruct
    {
        public string value1;
        public string value2;
        public string value3;
        public string value4;

        public TestStruct(string value1, string value2, string value3, string value4)
        {
            this.value1 = value1;
            this.value2 = value2;
            this.value3 = value3;
            this.value4 = value4;
        }
    }

    [System.Web.Services.WebMethod]
    public static string[] MyMethod(string address)
    {
        string[] returnarray = new string[4];
        TestStruct struct;
        struct.value1 = "";
        struct.value2 = address;
        struct.value3 = "";
        struct.value4 = "/Unavailable.bmp";

        //if fail, return default values
                returnstring.SetValue(struct.value1, 0);
                returnstring.SetValue(struct.value2, 1);
                returnstring.SetValue(struct.value3, 2);
                returnstring.SetValue(struct.value4, 3);
                return returnstring;

        //if succeed
                struct.values = processed values;
                set the values on returnstring
                return returnstring;
        //else
                struct.values = other processed values;
                set the values on returnstring
                return returnstring;
    }

Now the only issues I have is getting the Jquery to properly display the data to the client.