如何避免在 ASP.NET 代码隐藏中编写混乱的 JavaScript? [英] How to avoid writing messy JavaScript in an ASP.NET code-behind?
问题描述
我在质疑在 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 和嵌套/复杂层次结构发挥作用时这很重要)，让我们假设它当前被放置在
