How to avoid writing messy JavaScript in an ASP.NET code-behind?(如何避免在 ASP.NET 代码隐藏中编写混乱的 JavaScript?)

本文介绍了如何避免在 ASP.NET 代码隐藏中编写混乱的 JavaScript?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在质疑在 ASP.NET 中使用 Javascript 的最佳实践是什么.

I'm questionning about what is the best practice to use Javascript with ASP.NET.

我不知道这是否是最佳实践，但我在代码隐藏中添加了 javascript 客户端事件.它工作正常，但这是最佳做法吗?

I don't know if it's the best practice but I add the javascript client side event inside the codebehind. It is working correctly but is this the best practice?

例如，我有一个单选按钮控件，并在 Page_Init 中添加了 Javascript 客户端事件.页面 init 可以被多次调用，因此每次调用 Page_It 时都会呈现 Javascript.

For example, I got a radio button control and I add the Javascript client side event in the Page_Init. The page init can be recalled multiple time so the Javascript will be rendered each time that the Page_It is called.

此外，很难调试很长的 Javascript 字符串.怎样才能更干净……有什么办法吗?

Also, it is hard to debug a long Javascript string. How it can be more clean ... is there a way?

让我们看一个包含 Javascript 的变量示例:

Let see an example of a variable that contains Javascript :

scripts.Text += "<script type='text/javascript'>function ValidateDdl" + metachamp.ID +
"(sender, args) {  if(" + txtReason.ClientID + ".GetText() != '' ||" +
dynamicControl.ClientID +
".style.display == 'none' || HiddenFieldSaveError.Contains('" + metachamp.ID +
"') ){" + dynamicControl.ClientID + ".className='';HiddenFieldError.Remove(" +
metachamp.ID + ");" + errorImage.ClientID +
".SetClientVisible(false);args.IsValid = true;}else{var comboVal = document.getElementById('" +
Image9.ClientID + "'.substring(0,'" + Image9.ClientID +
"'.length - 6) + 'ddl').value ;if (comboVal != '0' ) {args.IsValid = true;HiddenFieldError.Remove(" +
metachamp.ID + ");" + validImage.ClientID +
".SetClientVisible(false);HiddenField.Remove('Bypass-' + '" +
metachamp.ID.ToString() + "');HiddenFieldSaveError.Remove(" + metachamp.ID +
");" + dynamicControl.ClientID + ".className='';" + errorImage.ClientID +
".SetClientVisible(false);}";

推荐答案

第一步是将 JavaScript 从代码隐藏和值的插值中分离出来.与动态构建 JavaScript 不同的是，方法是让 JavaScript 函数给定参数.

The very first step is to separate out the JavaScript from the code-behind and interpolation of values. Instead of dynamically building JavaScript the approach is then to have a JavaScript function that is given arguments.

在第一阶段之后，我们最终得到了以下内容(请原谅部分翻译，这让我很头疼).注意闭包构建器模式的使用；在实际代码中，我会进一步将其作为一个单独的模块.

After the first phase we end up with something like (forgive the partial translation, it was hurting my head) the following. Note the use of a closure-builder pattern; in real code I would further have this as a separate module.

function makeValidator(champId, opts) {
    return function (sender, args) {
        // Now this is when it gets harry..
        //
        // Use $get (and $find) inside ASP.NET, especially when
        // dealing with ASP.NET AJAX integration to find a control by ID.
        //
        // HOWEVER, the code uses what appears to be some DevExpress
        // controls and thus must be accessed.. differently, mainly either by
        //   1. `window[clientId]` or
        //   2. `ASPxClientControl.GetControlCollection().GetByName(id);`
        // This is just one of those icky things to deal with; I've shown usage
        // of the former and it may need to be applied to the other controls as well.
        //
        var reasonControl = window[opts.reasonId];        // DX control
        var dynamicControl = $get(opts.dynamicControlId); // normal ASP.NET/DOM
        var errorImage = window[opts.errorImageId];       // DX control
        if(reasonControl.GetText() != '' || dynamicControl.style.display == "none") {
            dynamicControl.className='';
            errorImage.SetClientVisible(false);
            args.IsValid = true;
        }
        // etc.
    }
}

应该清楚JavaScript 代码与任何字符串插值是分开的.这是一个正常的函数，当使用某些参数(由 API 定义)调用时，具有特定的行为.虽然有不同的方法来加载/注入"这个 JavaScript(当 UpdatePanels 和嵌套/复杂层次结构发挥作用时这很重要)，让我们假设它当前被放置在