Question

所以我有创建一个asp.net用户控件的想法，处理所有形式的模态弹出窗口（无论是错误处理，表单，对话框等）。

我之前已经创建了这个，将用户控件放在顶部母版页中，将其公开给所有内容页面，所以我可以这样做：

Master.Popup.ShowException(Exception);

并且usercontrol本身将具有看起来像模式对话框的必要标记，并且在show方法中只需执行.Visible = true。

这很好，但我开始考虑用jquery实现一些样式。我希望usercontrol能够显示某种jquery动画。但我不知道如何实现这一目标，因为我不知道如何从代码隐藏中调用jquery函数而不是popup.visible = true。

有人能为我提供可能的解决方案吗？

Answer 1

在Master.Popup.ShowException（....）中使用类似这样的内容：

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

其中animateMyBox（...）是您想要做的任何动画。最后是popup.display =“block”;等

此外，查找是否可以传递一个函数来回调您动画后将执行的动画代码。像：

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

另一种可能性是使用最终会在最后看到的框中的动画，就像动画不透明度从0到100％一样。

我知道这很模糊，但你需要分享更多代码才能得到更好的答案。

Answer 2

您可以创建一个呈现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());
            }
        }
    }
}

我已经定义了一个属性EffectType，它是你想要执行的效果名称; ControlId是您要设置动画的HTML元素的ID RegisterAnimationScript输出javascript来做动画。在ASPX中，您必须注册控件

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

然后放下你的控件（它应该出现在你的工具箱中）

<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>

在这里，我将我的serer-control jQueryAnimation绑定到div测试（ControlId="test"）并且我已经定义了我想要应用的效果（EffectType="Shake"）。
但是，在C＃中管理javascript并不容易; - ）

使用ajax从代码隐藏调用javascript

2 个答案: