JSF XHTML页面按钮action绑定与EL表达式不生效问题求助

问题基础信息 #

• 报错截图：Error here
• 运行环境：
  • IDE：Netbeans IDE 13
  • 应用服务器：GlassFish 6.2.5（兼容6.2.1版本）
  • 数据库：PostgreSQL
• 需求：大学课程项目，实现点击Create按钮向PostgreSQL数据库新增对应数据
• 故障表现：页面中#{InternetBean.create}按钮方法绑定、#{e.id}这类EL表达式均无法正常运行，此前尝试使用h:commandButton绑定方法也未生效。

原页面代码 #

<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="bootstrap.min.cc"/>
        <title>İnternet Programcılığı</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <div id="container">
            <div id="lesson">
                <h1 id="dersler"> <a href="../index.xhtml">Dersler</a></h1>
                <ol>
                    <li> <a href="internetprog.xhtml">İnternet Programcılığı</a></li>
                    <li> <a href="siber.xhtml">Siber Güvenlik</a></li>
                    <li> <a href="programlama.xhtml">Programlama Dilleri</a></li>
                </ol>
            </div>
            <div id="content">
                <form>
                    <table border="3" width="100" cellpadding="5" id="ipveri">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>NOT LİNK</th>
                                <th>AÇIKLAMA</th>
                                <th>TARİH</th>   
                            </tr>
                        </thead>
                        <tbody>
                            <ui:repeat value="#{InternetBean.list}" var="e">
                                <tr>
                                    <td>#{e.id}</td>
                                    <td>#{e.ilink}</td>
                                    <td>#{e.idescription}</td>
                                    <td>#{e.createdate}</td>
                                </tr>
                            </ui:repeat>
                        </tbody>
                    </table>
                </form>
                <div>
                    <form>

                        <label>Not Link</label>
                        <input type="text" action="#{InternetBean.entity.ilink}"/>
                        <label>Açıklama</label>
                        <input type="text" action="#{InternetBean.entity.idescription}"/>

                        <button type="button"  action="#{InternetBean.create}">Create</button>
                        <button type="button"  action="#{InternetBean.update}">Update</button>
                        <button type="button"  action="#{InternetBean.update}">Delete</button>
                        
                        <!--ÇALIŞMIYOR-->
                        <!-- comment <h:commandButton   action="#{InternetBean.create}" value="Create"/>
                        <h:commandButton  rendered="#{InternetBean.entity.id!=null}" action="#{InternetBean.create}" value="Update"/>
                        <h:commandButton  rendered="#{InternetBean.entity.id!=null}" action="#{InternetBean.create}" value="Delete"/>-->

                    </form>
                </div>
            </div>
        </div>
    </h:body>
</html>

故障原因 #

一共5个核心错误：

1. 混用原生HTML标签与JSF组件，绑定逻辑完全不生效：原生<form>、<input>、<button>标签不支持JSF的EL表达式绑定，写在这些标签上的action="#{xxx}"只会被识别为普通静态HTML属性，不会被JSF解析执行。
2. JSF交互组件未放在<h:form>标签内：之前注释掉的h:commandButton不生效，核心原因是JSF所有需要和后端交互的组件（输入框、按钮等），必须放在JSF专属的<h:form>标签内部才能提交请求、触发后端方法，放在原生<form>里不会被JSF处理。
3. 属性使用错误：输入框绑定后端字段用的是value属性，不是action；action属性仅用于绑定按钮点击后触发的后端方法。
4. 细节拼写/绑定错误：样式文件后缀写成了cc，正确应为css，会导致样式加载失败；删除按钮错误绑定了update方法，应绑定对应的删除方法。
5. Bean命名匹配问题：如果InternetBean类没有在@Named注解里显式指定名称，JSF默认生成的Bean名是首字母小写的internetBean，和页面里写的首字母大写的#{InternetBean}不匹配，会导致EL表达式找不到后端Bean。另外要确保Bean添加了合适的作用域注解（比如@ViewScoped），Bean内的list、entity属性都生成了对应的getter/setter方法，create/update/delete是公共无参方法。

修复后代码参考 #

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <!-- 修正样式文件名拼写 -->
        <h:outputStylesheet library="css" name="bootstrap.min.css"/>
        <title>İnternet Programcılığı</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <div id="container">
            <div id="lesson">
                <h1 id="dersler"> <h:link outcome="../index.xhtml" value="Dersler"/></h1>
                <ol>
                    <li><h:link outcome="internetprog.xhtml" value="İnternet Programcılığı"/></li>
                    <li><h:link outcome="siber.xhtml" value="Siber Güvenlik"/></li>
                    <li><h:link outcome="programlama.xhtml" value="Programlama Dilleri"/></li>
                </ol>
            </div>
            <div id="content">
                <!-- 列表区域用h:form包裹确保JSF解析 -->
                <h:form>
                    <table border="3" width="100" cellpadding="5" id="ipveri">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>NOT LİNK</th>
                                <th>AÇIKLAMA</th>
                                <th>TARİH</th>   
                            </tr>
                        </thead>
                        <tbody>
                            <ui:repeat value="#{internetBean.list}" var="e">
                                <tr>
                                    <td>#{e.id}</td>
                                    <td>#{e.ilink}</td>
                                    <td>#{e.idescription}</td>
                                    <td>#{e.createdate}</td>
                                </tr>
                            </ui:repeat>
                        </tbody>
                    </table>
                </h:form>
                <div>
                    <!-- 交互表单必须使用h:form包裹 -->
                    <h:form>
                        <label>Not Link</label>
                        <!-- 用h:inputText，value属性绑定实体字段 -->
                        <h:inputText value="#{internetBean.entity.ilink}"/>
                        <label>Açıklama</label>
                        <h:inputText value="#{internetBean.entity.idescription}"/>

                        <!-- 用h:commandButton，action绑定后端方法 -->
                        <h:commandButton action="#{internetBean.create}" value="Create"/>
                        <h:commandButton rendered="#{internetBean.entity.id!=null}" action="#{internetBean.update}" value="Update"/>
                        <!-- 修正删除按钮绑定的方法 -->
                        <h:commandButton rendered="#{internetBean.entity.id!=null}" action="#{internetBean.delete}" value="Delete"/>
                    </h:form>
                </div>
            </div>
        </div>
    </h:body>
</html>

注意：如果要保留页面里#{InternetBean}（首字母大写）的写法，需要在InternetBean类的@Named注解上显式指定名称：@Named("InternetBean")，否则要把页面所有EL里的Bean名改成首字母小写的internetBean才能正常匹配。

内容的提问来源于stack exchange，提问作者BerkanAcikgoz