Running JavaScript in page from the backend (AJAX)?

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

What you probably want to start reading about is Ajax. Otherwise, this is way too broad to properly answer here. — Andrew Barber
– Andrew Barber, Commented Jan 31, 2013 at 14:42
Isn't a callback function sufficient? Like jQuery.ajax with its success callback. — Lim H.
– Lim H., Commented Jan 31, 2013 at 14:42
Note also that the backend will never be able to "call a javascript method on the front end", all you can do is perform ajax calls from the front end to the backend and deal with whatever is returned. — Peter Herdenborg
– Peter Herdenborg, Commented Jan 31, 2013 at 14:47
@PeterHerdenborg Excellent point and this is critical to understanding how front end async technologies work. You have to alienate the Webforms mentality and get used to calling and handling your calls in the client. — David L
– David L, Commented Jan 31, 2013 at 14:48

Community · Accepted Answer · 2017-05-23 12:04:48Z

3

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

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Jan 31, 2013 at 14:44

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

jmasterx Over a year ago

Could you also show how this would work in the backend part of it? Also, my website is not MVC.

David L Over a year ago

@Milo What is your backend? Webforms? Do you have any service endpoints exposed?

jmasterx Over a year ago

Yes, it is web forms. public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } }

jmasterx Over a year ago

Thanks, but now I am just wondering, am I then expected to have my whole application in a singleton? How can I get information like the Page Name and such? What is the proper way to get access to instance variables?

David L Over a year ago

@Milo pageName would be extracted by javascript. It would look at the page you are currently on to determine location. As for the rest of your questions, that's a whole new can of worms on architecture I think

|

Collectives™ on Stack Overflow

Running JavaScript in page from the backend (AJAX)?

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related