c# - javascript 函数没有被调用

Question

我在面板中有一个下拉列表和一个文件上传控件，该控件与 UpdatePanel 中的其他控件一起添加。从下拉列表中选择一个值并上传文件后，将启用“上传”按钮。为此，我有一个 JavaScript 函数，如下所示:

function SetUploadButtonEnabled(controlPanel, fileUploadId) {
     var docTypesList = controlPanel.find("select");
     var gotListVal = docTypesList.val() != "";
     var fileUpload = $find(fileUploadId);
     var gotFileVal = fileUpload.getUploadedFiles().length > 0;
     var enable = gotListVal && gotFileVal;
     if (enable) {
         controlPanel.find(".GxButtonBlue").removeAttr("disabled");
     }
     else {
         controlPanel.find(".GxButtonBlue").attr("disabled", true);
     }
 }

我尝试从代码后面调用它，如下所示，但该函数没有被调用:

string script = "<script type=\"text/javascript\">"
                + "\n  $(document).ready(function (){"
                    + "\n    $(document).on(\"change\", \"#" + this._DdDocumentTypes.ClientID + "\", function(event){"
                    + "\n      var docUploadControlPanel = $(this).closest(\"#" + this._DocUploadControlPanel.ClientID + "\");"
                    + "\n      SetUploadButtonEnabled(docUploadControlPanel, \"" + this._fiInput.ClientID + "\");"
                    + "\n    });"
                    + "\n  });"
                    + "\n "
                    + "</script>";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script);

由于有更新面板，我什至尝试过:

  ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script, true);

请帮我找出为什么该函数从未被调用!

Answer 1

这是一种方法。这里的关键是 pageComponents 对象。

ASPX 或用户控件

<script>
var pageComponents = {
    documentTypeSelector: "#<%= _DdDocumentTypes.ClientID %>",
    uploadControlSelector: "#<%= _DocUploadControlPanel.ClientID %>",
    fiInputSelector: "#<%= _fiInput.ClientID %>"
};
</script>

JavaScript 放置在上面之后

function SetUploadButtonEnabled(controlPanel, fileUploadId) {
     var docTypesList = controlPanel.find("select");
     var gotListVal = docTypesList.val() != "";
     var fileUpload = $find(fileUploadId);
     var gotFileVal = fileUpload.getUploadedFiles().length > 0;
     var enable = gotListVal && gotFileVal;
     if (enable) {
         controlPanel.find(".GxButtonBlue").removeAttr("disabled");
     }
     else {
         controlPanel.find(".GxButtonBlue").attr("disabled", true);
     }
 }

$(document).ready(function (){
    $(document).on("change", pageComponents.documentTypeSelector, function(event){
        var docUploadControlPanel = $(this).closest(pageComponents.uploadControlSelector);
        SetUploadButtonEnabled(docUploadControlPanel, pageComponents.fiInputSelector);
    });
});

备注

您可以通过将控件 ClientIDMode 属性设置为 Static 来避免使用上面的“bee sting”语法(假设您仅使用 ASP.NET 页面，而不是用户控件。那么您的 JavaScript 将如下所示:

$(document).ready(function (){
    $(document).on("change", "#documentType", function(event){
        var docUploadControlPanel = $(this).closest("#uploadControl");
        SetUploadButtonEnabled(docUploadControlPanel, "#fiInput");
    });
});

另外一行:

var docUploadControlPanel = $(this).closest(pageComponents.uploadControlSelector);

可以写成:

var docUploadControlPanel = $(pageComponents.uploadControlSelector);

因为 ClientID 始终返回整个页面的唯一元素 ID。