如何在ASP.NET中实现点击OnClientClick后执行OnClick事件？

Question

我正在使用C#开发一个ASP.NET Web Forms应用程序。我有一个按钮，需要在客户端运行一些Javascript代码（使用OnClientClick属性），然后如果客户端代码返回true，则运行服务器端代码（使用OnClick）。我以前用过jQuery-UI确认对话框多次完成这个操作，但是这次我的客户端代码不是确认对话框，而且它没有起作用——尽管我明确地返回了true，但服务器端（OnClick）事件从未被触发。

以下是相关的客户端代码，它是有效的（通过alert()调用验证了它返回的正确值）：

<script type="text/javascript">
    //Function to hide edit fields
    function hideEditFields(retVal) {
        //Hide all edit divs
        var editName = document.getElementsByClassName("editField");
        for (i = 0; i < editName.length; i++) {
            editName[i].style.display = 'none';
        }
        //Show all view divs
        var viewName = document.getElementsByClassName("viewField");
        for (i = 0; i < viewName.length; i++) {
            viewName[i].style.display = 'block';
        }

        //Make investigated & corrective action checkboxes non-highlighted
        $('<%=cbInvestigatedY.ClientID%>').removeClass("editable");
        $('<%=cbInvestigatedN.ClientID%>').removeClass("editable");
        $('<%=cbCorrectiveY.ClientID%>').removeClass("editable");
        $('<%=cbCorrectiveN.ClientID%>').removeClass("editable");

        //Show edit button
        var editButton = document.getElementById("editButton");
        editButton.style.display = 'block';
        //Hide save button
        var saveButton = document.getElementById("saveButton");
        saveButton.style.display = 'none';

        //alert("returning " + retVal);
        return retVal;
    }
</script>

这里是调用该函数的按钮：

<asp:Button ID="btnSaveChanges" runat="server" OnClientClick="return 
    hideEditFields(true);" OnClick="btnSubmit_Click" Text="Save Changes" />

我已经尝试了使用UseSubmitBehavior="true"和不使用，但似乎没有什么区别。在Javascript控制台中没有出现错误，并且Javascript代码正在执行它应该执行的操作，只是没有调用服务器端方法。

以下是ASP.NET呈现提交按钮的方式（在视图源代码中）：

<input type="submit" name="ctl00$MainContent$btnSaveChanges" value="Save Changes"
    onclick="return hideEditFields(true);WebForm_DoPostBackWithOptions(new
    WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSaveChanges&quot;, &quot;&quot;,
    true, &quot;&quot;, &quot;&quot;, false, false))"
    id="ctl00_MainContent_btnSaveChanges" />

- timbck2

---

表单是否被提交并且服务器是否被访问了？ - Ian

不，它只执行客户端代码。 - timbck2

你能否在JS函数结束时向服务器发起Ajax调用，而不使用服务器事件处理程序？ - Joe Korolewicz

从您发布的源代码来看，使用return，无论是true还是false，都不会执行onclick的其余部分。这就是为什么那些.NET函数调用不能正确设置提交行为，以便服务器可以知道触发器的原因。 - Ian

通常当我通过JS/jQuery调用asp.net控件时，我会将ClientIDMode设置为“Static”以针对该控件。也许可以尝试这样做。 - shammelburg

Answer 1

请尝试从客户端点击中删除return。我认为你应该像这样调用onclientclick函数：

<asp:Button ID="btnSaveChanges" runat="server" OnClientClick="hideEditFields('true');"  Text="Save Changes" onclick="btnSubmit_Click" />

- Asif Mahamud

Answer 2

在客户端点击时，将返回值设置为 true：

btnTest.OnClientClick = 
    "window.open('" + URL + "'); 
    return true;";

- Manjeet Kumar

Answer 3

真正的问题在于我的服务器端方法确实被执行了，但是什么也没有做，因为它将表单中的原始值（存储为隐藏字段）与表单文本框和其他控件中输入的新值进行比较，并且只有当它们发生更改时才存储它们。但是我犯了初学者的错误，没有将填充表单的代码包含在IsPostBack的检查中（我知道应该这样做！），因此比较总是相等的，所以什么也没有改变。请参阅为什么ASP.NET在内容更改后提交TextBox控件的原始值？获取更多详细信息。

- timbck2