JavaScript: call C# codebehind function

Question

Hi i wanted to know is it possible to call a codebehind function in my Javascript? The javascript is in the head of my asp.net webpage page.

I have tried many methods but none seem to have worked. Its the first time iv had to do this so an example would be a nice learning curve fix.

My codebehind function in C#

protected void GetAverageRent_TextChanged(object sender, EventArgs e)
{
    string Postcode = _postCodeInput.Value.ToString();
    var webGet = new HtmlWeb();
    var doc = webGet.Load("http://www.webadress.com/" + Postcode);


    HtmlNode AvgPrice = doc.DocumentNode.SelectSingleNode("//div[@class='split2r right']//strong[@class='price big']");

    if (AvgPrice != null)
    {
        AverageRentLbl.Text = AvgPrice.InnerHtml.ToString();
    }
    else
    {
        AverageRentLbl.Text = "Invalid Postcode!";
        AverageRentLbl.ForeColor = Color.Red;
        AverageRentLbl.Font.Bold = true;
    }
}

My Javascript

<script>
function codeAddress() {

        document.getElementById('map-canvas').setAttribute("style", "height:200px");

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        //var address = document.getElementById('_mainContentHolder__postCodeValue').value;
        var address = document.getElementById('ContentPlaceHolder1__postCodeInput').value;

        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                document.getElementById('ContentPlaceHolder1__latValue').value = results[0].geometry.location.lat();
                document.getElementById('ContentPlaceHolder1__longValue').value = results[0].geometry.location.lng();
            } else {
                alert('Sorry the postcode you entered in invalid. Please try again: ' + status);
                document.getElementById('ContentPlaceHolder1__postCodeInput').value = "";
            }
        });</Script>

And where do you want to call your serverside function in your javascript code? You can achieve this by using AJAX. You can create an asmx webservice for this. — RononDex, Apr 28 '14 at 08:55
I have looked at AJAX and it seems to be what i am looking for but i knew it could call jquery but was unsure about javascript (as examples i have seen do not use javascript) thanks — DeveloperDevine, Apr 28 '14 at 09:00

score 0 · Accepted Answer · answered Apr 28 '14 at 09:11

W3Schools have a complete tutorial (http://www.w3schools.com/ajax/default.asp) on Ajax. AJAX is asynchronous javascript and XML, so its pretty obvious javascript can make it happen. If you want just your text change event to fire asynchronously, then I would suggest you to use Update panel, that will save you a lot of trouble.

score 0 · Answer 2 · answered Apr 28 '14 at 09:20

you can use webservice as shown below..

code behind

 [WebMethod]
    public static string abc()
    {
        //function body
    }

In javascript..

 PageMethods.abc(onSucess2, onError2);

        function onSucess2(result) {

        }
        function onError2(result) {
            alert('Error!!!');
        }

You must place a scriptmanager in your page and set enabalepagemethods=true

JavaScript: call C# codebehind function

2 Answers2