如何在JSF页面中使用<h:form>？单一形式？多种形式？嵌套表格？

Question

我正在使用Facelet模板技术在我正在处理的JSF 2应用程序中布局我的页面.

在我的header.xhtml中,primefaces要求菜单栏包含在h:form中.

<h:form>
    <p:menubar autoSubmenuDisplay="true">
        Menu Items here!
    </p:menubar>
</h:form>

所以,在我的内容页面中,我将有另一个h:form或更多.

如果我只是将h:form放在我的template.xhtml中,它会起作用吗？

<h:body>
    <h:form>
        <div id="top">
            <ui:insert name="header"><ui:include src="sections/header.xhtml"/></ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="sidebar"><ui:include src="sections/sidebar.xhtml"/></ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="footer"><ui:include src="sections/footer.xhtml"/></ui:insert>
        </div>
    <h:form>
</h:body>

我实际上正在考虑一个用例,我需要在页面中使用多个h:form.

谢谢

Answer 1

您可以安全地在JSF页面中使用多个表单.它与使用纯HTML时没有什么不同.

嵌套<form>元素在HTML中无效.由于JSF只生成一堆HTML,因此在JSF中没有什么不同.因此,嵌套在JSF中也是无效的.<h:form>

<h:form>
    ...
    <h:form> <!-- This is INVALID! -->
        ...
    </h:form>
    ...
</h:form>

提交嵌套表单的浏览器行为未指定.它可能会或可能不会按预期的方式工作.例如,它可以在不调用bean动作方法的情况下刷新页面.即使您使用dom操作(或通过使用PrimeFaces appendTo="@(body)")将嵌套表单(或包含它的组件)移动到父表单之外,它仍然无法工作,并且在加载时不应该有嵌套表单页.

至于你需要保留哪些形式,拥有一个"上帝" <h:form>实际上是一种糟糕的做法.所以,你最好把外<h:form>从主模板,让header,sidebar,content等部分,每个部分定义自己<h:form>.多个并行表单有效.

<h:form>
    ...
</h:form>
<h:form> <!-- This is valid. -->
    ...
</h:form>

每个表格都必须有一个明确的责任.例如登录表单,搜索表单,主表单,对话框表单等.当您提交某个表单时,您不希望不必要地处理所有其他表单/输入.

因此请注意,当您提交某个表格时,不会处理其他表格.因此,如果您打算处理另一种形式的输入,那么您就遇到了设计问题.要么将它放在相同的表单中,要么抛出一些丑陋的JavaScript黑客,将所需信息复制到包含提交按钮的表单的隐藏字段中.

但是,在某种形式中,您可以使用ajax将输入的处理限制为较小的子集.例如,<f:ajax execute="@this">将仅处理(提交/转换/验证/调用)当前组件而不处理同一表单中的其他组件.这通常用于需要动态填充/渲染/切换相同形式的其他输入的用例,例如依赖的下拉菜单,自动完成列表,选择表等.

也可以看看:

• commandButton/commandLink/ajax动作/侦听器方法未被调用或输入值未设置/更新 - 第2点
• 什么是<f:ajax execute ="@ all">真的应该做什么？它只发布封闭表单
• 了解PrimeFaces进程/更新和JSF f:ajax执行/呈现属性
• <p:commandbutton> action在<p:dialog>中不起作用