Question

I’m new to integrating JavaScript into a web site, but I’m going to need it often in my web site.

Here is an example:
Assuming I have the function:

showAlert()

Say I have:

<div id="some_div">

</div>

Could someone provide me some kind of example that would do this:
If I have a button and the user clicks it, this should raise an event in the backend and call some method in my C# file. Then my C# file should be able to call some other javascript method of the front end which would call showAlert() and display the alert in the div.

This is what I can’t seem to find any information on.

The basic idea of passing information to and from the server. Any help with this would be really appreciated.

Thanks

Answer 1

Your best bet is to use a framework like jquery, then bind to the button, call the service, and handle the response. The below is a quick example of this.

$(document).ready(function()
    $('#Button1').bind('click', function () { 
        // This grabs the page you are in so that you can call it correctly
        var pagePath = window.location.pathname;  
        var testId = $("#some_div").val();
        var url = pagePath + "/TestService";          
        $.post(url, { id: testId },
            function (data) {
                showAlert(data);
            }
        });
    };
});

First, you need to make sure the document is ready at some point. Bind allows the the button to be bound when the document loads. Then, by clicking it, you execute the anonymous function that grabs the testId, calls your service, and handles the data response in a success callback.

Hope that gets you started in the right direction!

EDIT: Added backend webforms “service” exposure

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e) 
    {

    }

    [WebMethod]
    public static string TestService(string id) 
    {
        var string = DBCollection.FirstOrDefault(x => x.id == id); // Or whatever you want to return the data
        return "You called me on " + DateTime.Now.ToString() + "with " + string;
    }
}

This would allow you to call the “WebMethod exposed on your page. For more help with this, please see the following link.

http://www.tugberkugurlu.com/archive/asp-net-web-forms—calling-web-service-page-methods-using-jquery

EDIT: Additional Considerations when performing this type of approach in webforms.
Calling a webmethod with jquery in asp.net webforms