如何使用< h：form>在JSF页面？单一形式？多种形式？嵌套表单？ [英] How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?

问题描述

在我的header.xhtml中，primefaces需要使用菜单栏被包含在h：form中。

 < h：form> 
< p：menubar autoSubmenuDisplay =true> 
菜单项目在这里！ 
< / p：菜单栏> 
< / h：表格> 
  

所以，在我的内容页面中，我会有另一个h：或更多的形式。

如果我只是将h：form放在我的template.xhtml中，它会工作么？

 < H：体> 
< 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 =contentclass =left_content> 
< ui：insert name =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： p>

谢谢

解决方案

您可以在JSF页面中安全地使用多个表单。这与使用纯HTML时没有区别。

嵌套< form> 元素是 HTML 中的rel =noreferrer>无效。由于JSF只生成一堆HTML，所以在JSF中并没有什么不同。因此，嵌套< h：form> 在JSF中也是无效的。

 < h：form> 
 ... 
< h：form> <！ - 这是无效的！ - > 
 ... 
< / h：表格> 
 ... 
< / h：表格> 
  

提交嵌套表单的浏览器行为未指定。它可能会或可能不会按您期望的方式工作。它可能只是刷新页面而不调用bean操作方法。即使通过dom操作（或通过使用PrimeFaces appendTo =@（body）），它仍然不起作用，并且在加载页面时应该有 no 嵌套表单。

至于哪种形式需要保持，只有一个神< h：form> 实际上是一个不好的习惯。因此，您最好从主模板中移除外部< h：form> ，并让头， 边栏，内容等部分各自定义了自己的< h：form> 。多个平行形式是有效的。

 < h：form> 
 ... 
< / h：表格> 
< h：form> <！ - 这是有效的。 - > 
 ... 
< / h：表格> 
  

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

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

在某种形式，但可以使用ajax将输入的处理限制为较小的子集。例如。 < f：ajax execute =@ this> 将仅处理（提交/转换/验证/调用）当前组件，而不处理同一表单中的其他组件。这通常用于需要动态填充/呈现/切换同一表单中的其他输入的使用情况。依赖下拉菜单，自动完成列表，选择表等。

另请参阅：

• commandButton / commandLink / ajax action / listener method not调用或输入值未设置/更新 - 第2点


• 什么是< f：ajax execute =" @ all">真的该怎么办？它仅发布封闭表单 了解PrimeFaces过程/更新和JSF f：ajax执行/呈现属性 <号码：命令按钮>行动不适用于< p：dialog>

I am using the Facelet Templating Technology to layout my page in a JSF 2 app that I am working on.

In my header.xhtml, primefaces requires that menubar be enclosed in h:form.

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

So, in my contents pages, I will have another h:form or more.

Will it just work if I just place the h:form in my 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>

I am actually thinking of a use case where I need multiple h:form in a page.

Thanks

解决方案

You can safely use multiple forms in a JSF page. It's not different than when using plain HTML.

Nesting <form> elements is invalid in HTML. Since JSF just generates a bunch of HTML, it's not different in JSF. Nesting <h:form> is therefore also invalid in JSF.

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

The browser behavior as to submitting a nested form is unspecified. It may or may not work the way you expect. It may for instance just refresh the page without invoking the bean action method. Even if you move the nested form (or a component that contains it) outside of the parent form with dom manipulation (or by e.g. using the PrimeFaces appendTo="@(body)"), it still won't work and there should be no nested forms at time of loading the page.

As to which forms you need to keep, having a single "god" <h:form> is actually a poor practice. So, you'd best remove the outer <h:form> from the master template and let the header, sidebar, content etc sections each define its own <h:form>. Multiple parallel forms is valid.

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

Each form must have one clear responsibility. E.g. a login form, a search form, the main form, the dialog form, etc. You don't want to unnecessarily process all other forms/inputs, when you submit a certain form.

Note thus that when you submit a certain form, other forms are NOT processed. So, if you intend to process an input of another form anyway, then you've a design problem. Either put it in the same form or throw in some ugly JavaScript hacks to copy the needed information into a hidden field of the form containing the submit button.

Within a certain form, you can however use ajax to limit the processing of the inputs to a smaller subset. E.g. <f:ajax execute="@this"> will process (submit/convert/validate/invoke) only the current component and not others within the same form. This is usually to be used in use cases wherein other inputs within the same form need to be dynamically filled/rendered/toggled, e.g. dependent dropdown menus, autocomplete lists, selection tables, etc.

See also:

• commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated - point 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>

这篇关于如何使用&lt; h：form&gt;在JSF页面？单一形式？多种形式？嵌套表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！