无法在 ui 组件的 onclick 属性中调用 bean 操作方法 [英] Can not invoke bean action method in onclick attribute of a ui component

问题描述

<h:outputLink value="/4JVA-157292-war/supinfo/auth/mycar.xhtml">Car</h:outputLink>
<h:outputLink value="Log Out" onclick="${loginController.logout()}" />

如您所见，如果我单击 Car 链接.我将执行 ${loginController.logout()}，但如果我删除注销.我将进入汽车页面.

As you see, If i click the Car link. I will excute the ${loginController.logout()}, but if i delete the Log out. I will go into the car page.

推荐答案

<h:ouputLink> 组件用于渲染普通的 a 锚元素及其 href 属性评估为 <h:outputLink> 的 value 属性，并附加查询参数以防组件具有 <f:param> 标记为其子项.

<h:ouputLink> component is used to render plain a anchor element with its href attribute evaluated as value attribute of <h:outputLink> with the query parameters attached in case the component has <f:param> tags as its children.

<h:ouputLink> 未使用 来执行服务器端操作，正如您错误地期望的那样.您可能将它与 <h:commandLink> 组件，用于通过 JavaScript 调用触发服务器端操作.

<h:ouputLink> is not used to execute server-side actions as you wrongly seemed to expect. You may have confused it with a <h:commandLink> component that is used to trigger a server-side action via a JavaScript call.

如果你想调用 action 方法，你必须切换到命令组件(或其派生)，如 <h:commandLink>.它的 action 属性应该指向所需的操作方法，如下所示:

If you want to call the action method you must switch to a command comnponent (or its derivative) like <h:commandLink>. Its action attribute should point to the desired action method, like so:

<h:commandLink value="Log out" action="#{loginController.logout}" />

这样你就可以执行bean的action方法了.

In this way you will be able to execute the bean action method.

另外值得注意的是，自 JSF 2.0 以来，已经有一个 <h:link> 组件可用于处理应用程序范围的导航.它在其 outcome 属性中获取导航案例结果，因此 <h:outputLink> 组件可用于链接到外部资源.

Also it is worth noting that since JSF 2.0 there has been an <h:link> component that is useful for handling application-wide navigation. It takes a navigation case outcome in its outcome attribute thus leaving <h:outputLink> component useful for links to external resources.

有关该主题的更多信息，请阅读以下答案:何时应该我使用 h:outputLink 而不是 h:commandLink?.

For more information on the subject read the following answer: When should I use h:outputLink instead of h:commandLink?.

至于您遇到问题的原因，onclick 属性呈现为生成的 a 元素的 onclick 事件处理程序它附加到的 HTML 元素上的单击事件.如果事件被触发，则调用客户端 JavaScript 代码(通过函数调用 onclick 指向或通过执行其中包含的内联代码).请注意，onclick 运行在客户端(在 Web 浏览器中的 JavaScript 上下文中)，而 action 运行在服务器上(根据 Web 服务器中按下的提交按钮执行 Java 代码).

As to the cause of the problem you faced, onclick attribute is rendered as onclick event handler of the generated a element that responds to a click event on the HTML element it is attached to. In case the event is fired a client-side JavaScript code is called (by function call onclick points to or by executing inline code that is contained therein). Do note that onclick runs on the client (in JavaScript context within web browser) while action runs on the server (executes Java code depending on the submit button pressed within web server).

onclick 的使用至少在以下情况下可能会有成效:

Usage of onclick may be fruitful at least in the following circumstances:

• 如果它与命令组件结合使用，如果某些客户端要求未满足(即显示确认对话框并按下取消按钮，或客户端验证失败)在触发事件之前与元素关联的任何连续事件(如表单提交):

• in case it is used in conjunction with a command component it may stop form submission to the server if some client-side requirements are not met (i.e. confirm dialog was shown and cancel button was pressed, or client-side validation failed) as soon as the event will be fired before any consecutive events associated with the element (like form submission):

<h:commandLink value="Delete item" action="#{bean.delete(item)}" onclick="return confirm("Are you sure you want to delete this item?");" ... />

或

<h:commandLink value="Submit data" action="#{bean.action}" onclick="return inputValid();" ... />

与

<script type="text/javascript">
    function inputValid() {
        var isInputValid = ...;
        //decide what's valid or not and set variable to true/false accordingly
        return isInputValid;
    }
</script>

它可用于触发一些 GUI 更改，尤其是与 非命令组件结合使用时，例如:

it may be used to trigger some GUI changes, especially when used in conjunction with non-command components, like in:

<h:button value="Show dialog" onclick="showDialog(); return false;" ... />

这篇关于无法在 ui 组件的 onclick 属性中调用 bean 操作方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！