JSP 命令按钮操作取决于用户选择

Question

我有一个表示计算器的 bean 类。此类公开了 4 种方法：加、减、乘和除。

对于前端，我正在编写一个JSP页面。此页面包含两个文本输入框（一个用于 x，一个用于 y）。我有一个下拉菜单，用户在其中选择操作，然后是一个执行所选操作的计算命令按钮。

<h:form>
    <h:inputText value="#{calcBean.x}"></h:inputText>
    <h:inputText value="#{calcBean.y}"></h:inputText>
    <h:selectOneMenu>
        <f:selectItem itemValue="Add"></f:selectItem>
        <f:selectItem itemValue="Subtract"></f:selectItem>
        <f:selectItem itemValue="Multiply"></f:selectItem>
        <f:selectItem itemValue="Divide"></f:selectItem>
    </h:selectOneMenu>
    <h:commandButton value="Calculate" action="@SEE COMMENT">
    <%-- TODO the action of this command button needs to change depending on --%>
    <%-- the user selection. For example: If the user selects "Add" the action --%>
    <%-- needs to be #{calcBean.add} --%>
    </h:commandButton>
</h:form>

我遇到的问题是我不知道如何根据用户选择更改命令按钮的操作。

我可以使用四个不同的命令按钮来做到这一点，但这不是一个优雅的解决方案：

<h:form>
    <h:inputText value="#{calcBean.x}"></h:inputText>
    <h:inputText value="#{calcBean.y}"></h:inputText>
    <br/>
    <h:commandButton value="Add" action="#{calcBean.add}"></h:commandButton>
    <h:commandButton value="Subtract" action="#{calcBean.subtract}"></h:commandButton>
    <h:commandButton value="Multiply" action="#{calcBean.multiply}"></h:commandButton>
    <h:commandButton value="Divide" action="#{calcBean.divide}"></h:commandButton>
</h:form>

Answer 1

为此，

您可以将用户的选择绑定到后备 Bean 中的属性，并将该选定值用作操作方法中的条件来执行正确的计算。

<h:selectOneMenu value=#{calcBean.calculationType}>
    <f:selectItem itemValue="Add"></f:selectItem>
    <f:selectItem itemValue="Subtract"></f:selectItem>
    <f:selectItem itemValue="Multiply"></f:selectItem>
    <f:selectItem itemValue="Divide"></f:selectItem>
</h:selectOneMenu>
<h:commandButton value="Add" action="#{calcBean.doSelectedCalculation}"></h:commandButton>

在单个唯一操作方法中，根据所选的计算类型，您可以对给定的 x 和 y 值进行操作。

public void doSelectedCalculation()
{
     if(calculationType.equals("Add"))
     {
          result = x + y;
     }
     else if(calculationType.equals("Subtract"))
     { 
          result = x - y;
     }
     ...
}

Answer 2

JSFish的方式是：

1. 将您的<h:selectOneMenu>与托管 Bean 中的属性绑定，比方说，int selectedOption .

2. 设置显示给用户的选项（<f:selectItem>）的值。它可以是 1、2、3 和 4（仅作为基本示例）

3. calculate从托管 Bean 公开单个方法。此方法将位于<h:commandButton>操作属性中。此方法将使用 selectedOption 属性来了解要使用的操作。

使用此信息，结果将是：

JSF 代码

<h:form>
    <h:inputText value="#{calcBean.x}" />
    <h:inputText value="#{calcBean.y}" />
    <h:selectOneMenu value="#{calcBean.selectedOption}">
        <f:selectItem itemLabel="Add" itemValue="1" />
        <f:selectItem itemLabel="Subtract" itemValue="2" />
        <f:selectItem itemLabel="Multiply" itemValue="3" />
        <f:selectItem itemLabel="Divide" itemValue="4" />
    </h:selectOneMenu>
    <h:commandButton value="Calculate" action="#{calcBean.calculate}" />
</h:form>
Result: <h:outputText value="#{calcBean.result}" />

钙豆代码

public class CalcBean {
    private int x;
    private int y;
    private int selectedOption;
    private double result;
    //constructor...
    //getters and setters...
    public String calculate() {
        result = 0;
        switch(selectedOption) {
            case 1:
                result = x + y;
                break;
            //write the other cases...
        }
        return null;
    }
}

上面的代码对应于 JSF 1.2。如果你使用的是JSF 2.x，那么你应该停止使用JSP并转移到Facelets，如JSF wiki中所述。恕我直言，最好学习 JSF 2 而不是 JSF 1.x。