Calling javascript from code-behind using ajax

Question

So I have this idea of creating a asp.net user control, to handle all forms of modal popups (whether it be error handling, forms, dialogs, etc).

I already created this before, placing the user control in the top master page, exposing it to all content pages, so I could do something like:

Master.Popup.ShowException(Exception);

And the usercontrol itself would have the necessary markup to look like a modal dialog, and in the show method just do a .Visible = true.

This is all fine, but I've started thinking of implementing a bit of style with jquery. I'd like for the usercontrol to have some sort of jquery animation on show. But I don't know how to go about achieving this, as I don't know how I would call that jquery function from the codebehind instead of the popup.visible = true.

Can anyone provide me with a possible solution?

Vaibhav Garg · Accepted Answer · 2011-02-16 08:38:13Z

1

Inside your Master.Popup.ShowException(....) use something like this:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "animateJS", "animateMyBox('popupid');", true);

Where animateMyBox(...) is whichever animation you want to do. In the end do the popup.display="block"; etc

Also, lookup if you can pass along a function to call back in you animate code that will execute after animating. like:

animateMyBox('popupid', function() { document.getElementById('popupid').display='block'; } )

Another possibility is to use an animation that will end up in the box being visible at the end like animating opacity from 0 to 100%.

I know this is vague but you have to share more code before you can get a better answer.

answered Feb 16, 2011 at 8:38

Vaibhav Garg

3,7463 gold badges40 silver badges58 bronze badges

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

Comments

LeftyX · Accepted Answer · 2011-02-16 09:54:54Z

You can create a control which renders javascript:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

namespace WebApplication1
{
    [DefaultProperty("EffectType"), ToolboxData("<{0}:jQueryAnimation runat=server></{0}:jQueryAnimation>")]
    public class jQueryAnimation : System.Web.UI.WebControls.WebControl
    {
        private const string SCRIPT_KEY = "jQueryAnimation";

        [Bindable(true), Category("Appearance"), DefaultValue("Bounce")]
        public string EffectType { get; set; }
        public string ControlId { get; set; }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            RegisterAnimationScript();
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            base.RenderContents(writer);
        }

        private void RegisterAnimationScript()
        {
            if (!Page.ClientScript.IsClientScriptBlockRegistered(SCRIPT_KEY))
            {

                StringBuilder script = new StringBuilder();
                script.Append("<script type='text/javascript'>");
                script.Append(Environment.NewLine);
                script.Append("$(document).ready(function () {");
                script.Append(Environment.NewLine);
                script.Append("var options = {};");
                script.Append(Environment.NewLine);
                script.Append("$('#");
                script.Append(this.ControlId);
                script.Append("').effect('");
                script.Append(this.EffectType);
                script.Append("', options, 1500, ");
                script.Append(this.ControlId);
                script.Append("_callback);");
                script.Append(Environment.NewLine);
                script.Append("function ");
                script.Append(this.ControlId);
                script.Append("_callback() {");
                script.Append(Environment.NewLine);
                script.Append("setTimeout(function() {");
                script.Append("$('#");
                script.Append(this.ControlId);
                script.Append("').removeAttr('style').hide().fadeIn();");
                script.Append("}, 1000 );};");
                script.Append(Environment.NewLine);
                script.Append("});");
                script.Append(Environment.NewLine);
                script.Append("</script>");

                Page.ClientScript.RegisterClientScriptBlock(Page.GetType(),SCRIPT_KEY,script.ToString());
            }
        }
    }
}

I have defined a property EffectType which is the effect name you want to execute; ControlId is the id of the HTML element you want to animate.
RegisterAnimationScript outputs the javascript to do the animation. In your ASPX you have to register the control

<%@ Register assembly="WebApplication1" namespace="WebApplication1" tagprefix="cc1" %>

and then drop your control (it should appear in your toolbox)

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="test" style="width:100px;height:100px;background-color:Red">&nbsp;</div>
        <cc1:jQueryAnimation ID="jQueryAnimation1" runat="server" EffectType="Shake" ControlId="test"></cc1:jQueryAnimation>
    </div>
    </form>
</body>
</html>

Here, I've bound my serer-control jQueryAnimation to the div test (ControlId="test") and I've defined the effect I want to apply (EffectType="Shake").
It's not very easy to manage javascript in C#, though ;-)

Collectives™ on Stack Overflow

Calling javascript from code-behind using ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related