如何使用链接调用 bean 操作方法?onclick 不起作用 [英] How to invoke a bean action method using a link? The onclick does not work

问题描述

我正在尝试实现一个用户名列表，可以通过点击 UP 或 DOWN 链接重新排列这些用户名.

<ui:repeat var="user" value="#{cc.attrs.value}"><li>#{用户名}<h:link 结果 = "user" value = "left" onclick="#{accountController.moveDown}"><f:param name="id" value = "${user.id}"/></h:link></ui:repeat>

这里的问题是我似乎没有正确使用 onclick 属性.这样做的正确方法是什么?

<小时>

按照您的建议，我将所有链接放在一个表单中:

<ui:repeat value="#{cc.attrs.value}" var = "user"><div 类 = "用户"><h:commandLink id = "Link1" value = "Up" binding = "#{accountController.ommandLink}" action = "#{accountController.moveUserUp}"><f:attribute name = "userId" value = "#{user.id}"/></h:commandLink><h:commandLink id = "Link2" value = "Down" binding = "#{accountController.commandLink}" action = "#{accountController.moveUserDown}"><f:attribute name = "userId" value = "#{user.id}"/></h:commandLink><h:commandLink id = "Link3" value = "Delete" binding = "#{accountController.commandLink}" action = "#{accountController.deleteUser}"><f:attribute name = "userId" value = "#{user.id}"/></h:commandLink>

</h:form>

托管 Bean:

私有 UIComponent 命令链接；公共无效 moveUserUp(){Integer userId = (Integer)commandLink.getAttributes().get("userId");System.out.println("向左移动标签:" + userId);}public void moveUserDown(){Integer userId = (Integer)commandLink.getAttributes().get("userId");System.out.println("向右移动标签:" + userId);}公共无效删除用户(){Integer userId = (Integer)commandLink.getAttributes().get("userId");System.out.println("删除标签:" + userId);}公共 UIComponent getCommandLink() {返回命令链接；}public void setCommandLink(UIComponent commandLink) {this.commandLink = commandLink;}

命令链接和托管 bean 之间的通信正在工作，但在 UI 中只显示最后一个命令链接(关闭操作).

解决方案

为了在单击链接时调用 bean 操作方法，您需要 .这必须包含在 中.

<h:commandLink ... action="#{bean.action}"/></h:form>

public String action() {//...返回/other.xhtml"；}

在 JSF 中，只有 attributes 将 EL 表达式解释为 MethodExpression 可用于声明动作方法.所有其他属性都被解释为 ValueExpression 并且它们会在 JSF 生成 HTML 输出时立即执行.这包括 onclick 属性，它的值实际上应该代表一个 JavaScript 函数.

如果您确实想使用 GET 链接，请将操作方法​​移动到目标页面中的 .这将在目标页面的页面加载时调用.

<f:viewAction action="#{bean.onload}"/></f:元数据>

public void onload() {//...}

另见:

• 我什么时候应该使用 h:outputLink 而不是 h:commandLink?
• 如何发送形成输入值并调用 JSF bean 中的方法
• 如何在页面加载时处理后台 bean 中的 GET 查询字符串 URL 参数?
• 如何在 JSF 中导航?如何使 URL 反映当前页面(而不是前一个页面)

<小时><块引用>

按照你的建议，我把所有的链接放在一个表格中

命令链接和托管 bean 之间的通信正在工作，但在 UI 中只显示最后一个命令链接(关闭操作).

您不应将多个物理上不同的组件绑定到一个相同的 bean 属性.此外，用于传递参数的 很笨拙，在 JSF2 中不再需要.假设您使用的是 Servlet 3.0/EL 2.2 容器(您的问题历史确认您使用的是 Glassfish 3)，而是直接将参数作为方法参数传递:

<h:commandLink id="Link1" value="Up" action="#{accountController.moveUserUp(user)}"/><h:commandLink id="Link2" value="Down" action="#{accountController.moveUserDown(user)}"/><h:commandLink id="Link3" value="Delete" action="#{accountController.deleteUser(user)}"/>

与

public void moveUserUp(User user) {//...}public void moveUserDown(用户用户){//...}公共无效删除用户(用户用户){//...}

另见:

• 绑定"属性在 JSF 中是如何工作的?何时以及如何使用?
• 调用直接方法或带参数的方法/变量/EL中的参数

I'm trying to implement a list of users names which can be rearranged by clicking on UP or DOWN links.

<ul>
    <ui:repeat var="user" value="#{cc.attrs.value}">
        <li>
            #{user.name}
            <h:link outcome = "user" value = "left" onclick="#{accountController.moveDown}">
                <f:param name="id" value = "${user.id}" />
            </h:link>
        </li>

    </ui:repeat>
</ul>

The problem here is that it seems that I'm not using the onclick attribute correctly. What is the proper way for doing this?

---

Edit: Following your advices I placed all the links in a form:

<h:form>
        <ui:repeat value="#{cc.attrs.value}" var = "user">
        <div class = "user">
            <h:commandLink id = "Link1" value = "Up" binding = "#{accountController.ommandLink}" action = "#{accountController.moveUserUp}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
            <h:commandLink id = "Link2" value = "Down" binding = "#{accountController.commandLink}" action = "#{accountController.moveUserDown}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
            <h:commandLink id = "Link3" value = "Delete" binding = "#{accountController.commandLink}" action = "#{accountController.deleteUser}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
    </div>
</h:form>

the Managed Bean:

private UIComponent commandLink;

public void moveUserUp(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("MOVE TAB LEFT :" + userId);
}

public void moveUserDown(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("MOVE TAB RIGHT: " + userId);
}

public void deleteUser(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("DELETE TAB: " + userId);
}

public UIComponent getCommandLink() {
    return commandLink;
}

public void setCommandLink(UIComponent commandLink) {
    this.commandLink = commandLink;
}

The communication between the command Link and the managed bean is working but in the UI only the last commandLink (close action) is displayed.

解决方案

In order to invoke a bean action method on click of a link, you need <h:commandLink>. This must be enclosed in a <h:form>.

<h:form>
    <h:commandLink ... action="#{bean.action}" />
</h:form>

public String action() {
    // ...

    return "/other.xhtml";
}

In JSF, only the attributes which interpret the EL expression as a MethodExpression can be used to declare action methods. All other attributes are interpreted as ValueExpression and they are immediately executed when the HTML output is generated by JSF. This covers the onclick attribute, whose value should actually represent a JavaScript function.

In case you actually want to use a GET link, then move the action method to a <f:viewAction> in the target page. This will be invoked on page load of the target page.

<h:link ... outcome="/other.xhtml" />

<f:metadata>
    <f:viewAction action="#{bean.onload}" />
</f:metadata>

public void onload() {
    // ...
}

See also:

• When should I use h:outputLink instead of h:commandLink?
• How to send form input values and invoke a method in JSF bean
• How do I process GET query string URL parameters in backing bean on page load?
• How to navigate in JSF? How to make URL reflect current page (and not previous one)

---

Following your advices I placed all the links in a form

The communication between the command Link and the managed bean is working but in the UI only the last commandLink (close action) is displayed.

You should not bind multiple physically different components to one and same bean property. Also the <f:attribute> to pass arguments is hacky and not necessary anymore in JSF2. Assuming that you're using a Servlet 3.0 / EL 2.2 container (your question history confirms that you're using Glassfish 3), rather just pass the argument as method argument directly:

<h:commandLink id="Link1" value="Up" action="#{accountController.moveUserUp(user)}" />
<h:commandLink id="Link2" value="Down" action="#{accountController.moveUserDown(user)}" />
<h:commandLink id="Link3" value="Delete" action="#{accountController.deleteUser(user)}" />

with

public void moveUserUp(User user) {
    // ...
}

public void moveUserDown(User user) {
    // ...
}

public void deleteUser(User user) {
    // ...
}

See also:

• How does the 'binding' attribute work in JSF? When and how should it be used?
• Invoke direct methods or methods with arguments / variables / parameters in EL

这篇关于如何使用链接调用 bean 操作方法?onclick 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！