ASP 菜单：如何避免回发并使用 Javascript 客户端脚本访问选定的值

Posted 2023-05-09

【中文标题】ASP 菜单：如何避免回发并使用 Javascript 客户端脚本访问选定的值

【英文标题】：ASP menu : how to avoid postback and access the selected value with a Javascript client side script

【发布时间】：2020-03-23 01:23:45

【问题描述】：

我必须实现一种从 ASP 水平菜单（使用配置文件生成）中选择值的方法。菜单的生成不是问题：我的实际问题是找到一种方法让用户在不使用回发的情况下访问其值。

我正在处理一个大而古老的项目，该项目的编码目的是根本不使用 PostBack 请求。 回发在设计上是意料之外的，被视为错误。

为了达到我的目标，我尝试为以 return false 结尾的 MenuItemClick 事件编写 javascript 触发器，以避免回发（目前 JavaScript 代码仅限于简单的测试警报和 false 返回，因为测试目的）。但这不起作用：我无法让事件触发 JavaScript 函数：发生回发，这是不希望的。

完整的代码由数千行组成（其中大部分与问题无关），这是一个仅包含相关行的精简版：

默认.aspx：

<%@ Register TagPrefix="CRB" Namespace="ConfigurableReportBuilder.PageControls" Assembly="ConfigurableReportBuilder" %>
<form id="form1" class="page" runat="server">    
    <CRB:HorizontalMenu ID="MainMenu" runat="server" RootNode="Menu/Items" StyleClass="ui-menu ui-state-hover"/>
    //this works fine, no issue here.
</form>

默认.aspx.cs：

(...)
if (this.IsPostBack)
    throw new Exception("PostBack requests are not expected to occur");
    //Ensure that "PostBack requests" (which are unexpected and therefore indicate bugs) become recognized by a specific exception which is thrown here

Workspace.js：

var WS = (function ($) 
    var test = function (event) 
        alert("test"); 
        return false; //prevent postback
    ;
    (...)
    return // This dictionary contains references to public methods used in the project
        test: test,
        (...)
    


$(document).on("menuitemclick", '#MainMenu', WS.test); //setting the event trigger

【参考方案1】：

我找到了一个确实可以实现预期目标的解决方案，但请注意，它不尊重编码的良好做法。可能有更好的解决方案，但我找不到。

我们的想法是放弃基于 MenuItemClick 事件的逻辑并恢复为 ASP 菜单的默认行为，将 URL 作为可点击的菜单项 (NavigateUrl)。这些 URL 无需任何回发即可在主页中访问，因此它们可用于携带信息......作为小的 JavaScript 代码。

为此，必须在菜单项初始化期间将原始 Javascript 代码设置为 NavigateUrl 参数：

protected MenuItem getMenuItem(XmlNode menuNode)
//function that initialize a MenuItem with an XML node as parameter

    MenuItem mi = new MenuItem(); //creating a MenuItem object

    //Assigning its properties: 
    mi.Text = menuNode.Attributes["text"].Value; 
    if (menuNode.Attributes["description"] != null)
        mi.ToolTip = menuNode.Attributes["description"].Value;
    if (menuNode.Attributes["configfile"] != null) 
        mi.Value = menuNode.Attributes["configfile"].Value;
        mi.NavigateUrl = "javascript:alert('"+mi.Value+"');"; //Note that this isn't an URL
    

因此，来自 ASP 菜单的 URL 不是链接，而是将在主页中执行的函数，无需经过任何事件。因此，这些函数可用于检索所需的值，而无需通过任何回发事件：在我刚刚给出的示例中，警报窗口会显示选定的下拉值。