forms - 如何使用 in JSF page? 单一表格？多种形式？嵌套表单？

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>元素是 invalid在 HTML .由于 JSF 只是生成一堆 HTML，因此在 JSF 中并没有什么不同。嵌套 <h:form>因此在 JSF 中也是无效的。

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

未指定提交嵌套表单的浏览器行为。它可能会也可能不会按照您期望的方式工作。例如，它可能只是刷新页面而不调用 bean 操作方法。即使您使用 dom 操作(或例如使用 PrimeFaces appendTo="@(body)")将嵌套表单(或包含它的组件)移到父表单之外，它仍然不起作用，应该有 否 加载页面时的嵌套表单。

至于需要保留哪些表格，只有一个“神” <h:form>实际上是一种不好的做法。所以，你最好去掉外面的 <h:form>从主模板，让 header , sidebar , content etc 部分各自定义了自己的 <h:form> .多个平行形式是有效的。

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

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

请注意，当您提交某个表格时，不会处理其他表格。因此，如果您打算无论如何都要处理另一个表单的输入，那么您就有了设计问题。要么将其放在相同的表单中，要么使用一些丑陋的 JavaScript 技巧将所需信息复制到包含提交按钮的表单的隐藏字段中。

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

也可以看看:

commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated - 第 2 点

What is <f:ajax execute="@all"> really supposed to do? It POSTs only the enclosing form

Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes

<p:commandbutton> action doesn't work inside <p:dialog>