ajax - JSF - Ajax 调用 - 这段代码有什么问题？

Question

我认为解决这个问题的最好方法就是粘贴我的代码:

选择器 bean

@ManagedBean(name="selector")
@RequestScoped
public class Selector {
    @ManagedProperty(value="#{param.page}")
    private String page;
    private String profilePage;

    @PostConstruct
    public void init() {
        if(profilePage==null || profilePage.trim().isEmpty()) {
            this.profilePage="main";
        }

        if(page==null || page.trim().isEmpty()) {
            this.page="homepage";
        }
    }

    public String getProfilePage() { System.out.println("GET ="+profilePage); return profilePage; }
    public void setProfilePage(String profilePage) { this.profilePage=profilePage; }

    public String getPage() { return page; }
    public void setPage(String page) { this.page=page; }
}    

profile.xhtml

<h:panelGroup layout="block" id="profileContent">
    <h:panelGroup rendered="#{selector.profilePage=='main'}">
        <ui:include src="/profile/profile_main.xhtml" />
    </h:panelGroup>

    <h:panelGroup rendered="#{selector.profilePage=='edit'}">
        <ui:include src="/profile/profile_edit.xhtml" />
    </h:panelGroup>
</h:panelGroup>

profile_main.xhtml

<h:form id="formProfileMain" prependId="false">
    <h:panelGroup layout="block">
        <h:outputScript name="jsf.js" library="javax.faces" target="head" />

        <h:outputLabel value="MAIN" />

        <h:panelGroup layout="block" >
            <h:commandButton value="Edit Button">
                <f:setPropertyActionListener target="#{selector.profilePage}" value="edit" />
                <f:ajax event="action" render=":profileContent"/>
            </h:commandButton>
        </h:panelGroup>
    </h:panelGroup>
</h:form>    

profile_edit.xhtml

<h:panelGroup layout="block" id="profileEditContent">
    <h:panelGroup rendered="#{selector.profilePage=='edit'}">
        <h:form id="formProfileEdit" prependId="false">
            <h:panelGroup layout="block">
                <h:outputScript name="jsf.js" library="javax.faces" target="head" />

                <h:outputLabel value="EDIT" />

                <h:panelGroup layout="block">
                    <h:commandButton value="Confirm Edit">
                        <f:setPropertyActionListener target="#{selector.profilePage}" value="editConfirm" />
                        <f:ajax event="action" render=":profileEditContent"/>
                    </h:commandButton>

                    <h:commandButton value="Back">
                        <f:setPropertyActionListener target="#{selector.profilePage}" value="main" />
                        <f:ajax event="action" render=":profileEdit"/>
                    </h:commandButton>
                </h:panelGroup>
            </h:panelGroup>
        </h:form>
    </h:panelGroup>

    <h:panelGroup rendered="#{selector.profilePage=='editConfirm'}">
        <h:outputLabel value="FINALLY IM HERE" />
    </h:panelGroup>
</h:panelGroup>           

如果我先点击编辑按钮，然后点击确认编辑，我会尝试获取(结果)带有标签FINALLY IM HERE<的页面/强>不幸的是这并没有发生。我点击编辑按钮，然后，如果我点击确认编辑，则什么也没有发生。

我错了什么？干杯

更新新版本

bean

@ManagedBean
@ViewScoped
public class ProfileSelector {
    private String profilePage;

    @PostConstruct
    public void init() {
        if(profilePage==null || profilePage.trim().isEmpty()) {
            this.profilePage="main";
        }
    }

    public String getProfilePage() { return profilePage; }
    public void setProfilePage(String profilePage) { this.profilePage=profilePage; }
}

profile.xhtml

<h:panelGroup layout="block" id="profileContent">
    <h:form id="formProfile" prependId="false">
        <h:outputScript name="jsf.js" library="javax.faces" target="head" />

        <h:panelGroup rendered="#{profileSelector.profilePage=='main'}">
            <ui:include src="/profile/profile_main.xhtml" />
        </h:panelGroup>

        <h:panelGroup rendered="#{profileSelector.profilePage=='edit'}">
            <ui:include src="/profile/profile_edit.xhtml" />
        </h:panelGroup>
    </h:form>
</h:panelGroup>

profile_main.xhtml

<h:panelGroup layout="block">            
    <h:outputLabel value="MAIN" />

    <h:panelGroup layout="block">
        <h:commandButton value="Edit Button">
            <f:setPropertyActionListener target="#{profileSelector.profilePage}" value="edit" />
            <f:ajax event="action" render=":profileContent"/>
        </h:commandButton>
    </h:panelGroup>
</h:panelGroup>

profile_edit.xhtml

<h:panelGroup layout="block" id="profileContentEdit">
    <h:panelGroup rendered="#{profileSelector.profilePage=='edit'}">
        <h:panelGroup layout="block">                
            <h:outputLabel value="EDIT" />

            <h:panelGroup layout="block" styleClass="profilo_3">
                <h:commandButton value="Confirm Edit">
                    <f:setPropertyActionListener target="#{profileSelector.profilePage}" value="editConfirm" />
                    <f:ajax event="action" render=":profileContentEdit"/>
                </h:commandButton>

                <h:commandButton value="Back">
                    <f:setPropertyActionListener target="#{profileSelector.profilePage}" value="main" />
                    <f:ajax event="action" render=":profileContent"/>
                </h:commandButton>
            </h:panelGroup>
        </h:panelGroup>
    </h:panelGroup>

    <h:panelGroup rendered="#{profileSelector.profilePage=='editConfirm'}">
        <h:outputLabel value="FINALLY Im HERE" />
    </h:panelGroup>
</h:panelGroup>

Answer 1

好吧，这变得复杂了。是否UICommand将调用的操作还取决于 rendered 的结果组件或其父组件之一的属性。因为该 bean 在请求范围内，所以profilePage默认返回 main在下一个请求中，所以 rendered编辑部分的属性评估 false ，因此编辑部分中的按钮不会调用任何操作。这已在您的 previous question 中得到解答。 .

理论上，标记bean @ViewScoped应该修复这个问题，因为它会在后续 View 中保留 bean 状态。但是，在您的特定情况下，有两个问题导致其无法正常工作。

首先，您使用的是 @ManagedProperty它指的是较短范围内的值(#{param} 基本上是请求范围内的)。您需要拆分 profilePage放入另一个 bean 中并标记此 @ViewScoped 。

其次，由于 JSF2 ( issue 1718 ) 中当前仍存在一个 Unresolved 错误，您的特定情况仍然无法正常工作，因为您有多个 <h:form>在不同的rendered条件都附加到同一个 bean 上。这种具体情况将导致javax.faces.ViewState返回的响应中完全缺失。这将导致 View 作用域 bean 被垃圾处理并重新创建(profilePage 再次默认为 main)。作为临时解决方法，您需要将表单提取并合并为 profile.xhtml 中的一个表单。 ，作为第一个 <h:panelGroup> 的直接子代.

<小时/>

更新:如果您唯一关心的是要将 Bean 相互连接，那么您可以按如下方式拆分 Bean:

@ManagedBean
@RequestScoped
public class Selector {
    @ManagedProperty(value="#{param.page}")
    private String page;

    @ManagedProperty(value="#{profileSelector}")
    private ProfileSelector profileSelector;

    // ...
}

<小时/>

@ManagedBean
@ViewScoped
public class ProfileSelector {
    private String profilePage;

    // ...
}

然后可以通过这种方式在请求范围 bean 中访问 View 范围 bean。

或者，如果您真的想要一个 bean，您也可以作为解决方法替换 @ManagedProperty如下:

@ManagedBean
@ViewScoped
public class Selector {
    private String page;
    private String profilePage;

    @PostConstruct
    public void init() {
        page = FacesContext.getCurrentInstance().getRequestParameterMap().get("page");
    }

    // ...
}