execute code behind method every time DIV loads (ASP, ascx, ascx.cs)

Question

The idea is that this div contains a quote from a customer that is retrieved from the server via a get random function, and every few seconds a jQuery runs that fades this quote out and brings another one into view.

This is my Div code in my .ascx:

< div class="testimonial" ID="Fader" onload="runTestimonial">

<q>"<asp:Literal runat="server" ID="Quote"></asp:Literal>"</q>

</div>

Code Behind (.ascx.cs):

protected void runTestimonial(object sender, EventArgs e)
{ --lots 'o code--

Partnership partnership = Partnership.GetRandomTestimonial(cmPage.CMPageId);
            if (partnership != null)
            {
                Quote.Text = partnership.Testimonial;
                Visible = true;
            }
}

I am using this jQuery code:

setInterval(
    (function () {
        $('#Fader').fadeOut('slow', function () {
            setTimeout(function () { $('#Fader').load().fadeIn('slow'); }, 300);
        });
    })
    , (200))

The jquery should be fine. It links into the Div's Fader ID and does the fading and loading.

Originally the div generated the quote using a Page_Load method of the same structure and this worked. Now the change is I need to call it when I need to, not on Page_Load but on jQuery refresh.

So far I have the div refreshing in and out, but it's blank (If I revert it to the on Page_Load method, the same quote comes in and out). It's not getting to the ASP line or it's not executing it. I can just not get runTestimonial to work at all like the Page_Load does, probably because I don't know how to call it.

I don't know how to do C#, jQuery ASP or code behinding stuff really. Please help!

Answer 1

These are the steps of what you need to do, with jQuery and WebMethod:

1) You will change your runTestimonial() function into a WebMethod that will return a string (the random testimonial). So your function's signature would look like this:

[WebMethod]
public static string runTestimonial()
{
    return randomTestimonial; //include your code
}

2) Add jQuery library in the head of your file.

<script src="http://code.jquery.com/jquery-latest.js"></script>

3) Create a function that will do an ajax call to your webmethod.

function getTestimonial()
{
   $.ajax({
     type: "POST",
     url: "Default.aspx/runTestimonial",
     data: "{}",
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
       $("#Fader").html(msg); //msg contains the response from the server, this appends it to the div
     }
   });
}

4) Your div in your markup will NOT be a server control, so remove the onload. So it will look like this:

<div class="testimonial" ID="Fader"></div>

5) We are almost done, just make sure to call your getTestimonial() function inside your setInterval.

The [WebMethod] attribute is found in the System.Web.Services library, so make sure to include it at the top of your page:

using System.Web.Services;

That's all, that should work.