从自定义控件编写JavaScript

I'm new to writing custom controls. I have MyCustomControl.cs and in my Render method I want to render out about 50 lines of JavaScript. What's the best way to do this, use the writer?

我是新手编写自定义控件。我有MyCustomControl.cs,在我的Render方法中,我想渲染大约50行JavaScript。使用作者的最佳方法是什么?

protected override void Render(HtmlTextWriter writer)
        {
            writer.write(@"<script type....rest of opening tag here");

            writer.Write(@"
                            function decode(s)
                            {
                                return s.replace(/&amp;/g, ""&"")
                                .replace(/&quot;/g, '""')
                                .replace(/&#039;/g, ""'"")
                                .replace(/&lt;/g, ""<"")
                                .replace(/&gt;/g, "">"");
                            };"
            );

I plan on having around 6 more writer.Write to write out some more sections here. Is that the best approach to actually perform the writing of JavaScript in this manor?

我计划再增加6个writer.Write在这里写出更多的部分。这是在这个庄园中实际执行JavaScript编写的最佳方法吗?

or should I use ClientScript.RegisterClientScriptBlock? So what's the best practice or common way people are writing javascript from a custom control? (I'm not talking about a user control here!!, custom control/Class!)

或者我应该使用ClientScript.RegisterClientScriptBlock?那么人们从自定义控件编写javascript的最佳实践或常用方法是什么? (我不是在谈论用户控件!!,自定义控件/ Class!)

I also want to keep any indentation for readability once it's spit out/rendered on the client when viewing source.

一旦在查看源代码时在客户端上吐出/呈现,我还希望保留任何缩进以便于阅读。

1 个解决方案

#1

The answer I'm providing is just taking regular postbacks into account. All the below can be applied using the ScriptManager and its respective methods to do the same.

我提供的答案只是考虑定期回发。可以使用ScriptManager及其各自的方法应用以下所有方法来执行相同操作。

There's a couple of ways to do it. You can load a web resource and reference it

有几种方法可以做到这一点。您可以加载Web资源并引用它

// The Scripts namespace in this case would actually be a physical folder in your YourNamespace.CustomControlsNamespace
// namespace.
// Also the /Scripts/YourJavaScriptFile.js needs to have it's Build Action property set to Embedded Resource
[assembly: WebResource("YourNamespace.CustomControlsNamespace.Scripts.YourJavaScriptFile.js", "text/javascript")]
namespace YourNamespace.CustomControlsNamespace
{
    public CustomControl()
    {
        ...
    }

    ...

    protected override OnPreRender(EventArgs e)
    {
        ...

        Type type = typeof(CustomControl);
        string scriptUrl = Page.ClientScript.GetWebResourceUrl(type, "Acuity.Web.UI.WebControls.Scripts.accdaterange.js");
        string key = "yourKey";


                if (!Page.ClientScript.IsClientScriptIncludeRegistered(type, key))
                {
                    control.Page.ClientScript.RegisterClientScriptInclude(type, key, scriptUrl);
                }

                ...
    }

    ...
}

You could also reference an external script in your custom control.

您还可以在自定义控件中引用外部脚本。

namespace YourNamespace.CustomControlsNamespace
{
    public CustomControl()
    {
        ...
    }

    ...

    protected override OnPreRender(EventArgs e)
    {
        ...

        Type type = typeof(CustomControl);
        string scriptUrl = Page.ResolveClientUrl("~/yourScriptsFolder/yourExternalScript.js");
        string key = "yourKey";


                if (!Page.ClientScript.IsClientScriptIncludeRegistered(type, key))
                {
                    control.Page.ClientScript.RegisterClientScriptInclude(type, key, scriptUrl);
                }

                ...
    }

    ...
}

Depends how you want to package it. The advantage of the embedded resource is that you're guaranteed that this script is always with the assembly that your custom control is in. You will most likely have to add some inline JavaScript to wireup your custom control. Try and do this as little as possible. You can do this using Page.ClientScript.RegisterClientScriptBlock(...). You also want to avoid hard-coding what the auto-generated client Ids are in your scripts. They should be passed in as parameters to client-side objects.

取决于你想如何打包它。嵌入式资源的优势在于,您可以确保此脚本始终使用自定义控件所在的程序集。您很可能必须添加一些内联JavaScript来连接自定义控件。尝试尽可能少地做这件事。您可以使用Page.ClientScript.RegisterClientScriptBlock(...)执行此操作。您还希望避免硬编码脚本中自动生成的客户端ID。它们应作为参数传递给客户端对象。

Also, once all looks good, you should compress/minify you external JavaScript files. I use YuiCompressor from Yahoo! but there are several others out there.

此外,一旦看起来都很好,您应该压缩/缩小外部JavaScript文件。我使用Yahoo!的YuiCompressor!但那里还有其他几个。

You should also invest some time into looking at using a JavaScript framework such as jQuery to do a lot of the grunt work. That's it for now. I might add some more later, but these are my words of wisdom for now.

您还应该投入一些时间来研究使用JavaScript框架(如jQuery)来完成大量繁琐的工作。这就是现在。我可能会在稍后添加更多,但这些是我现在的智慧之词。

#1