在webbrowser中使用“Inspect element”时，<f：view>的内容不可见

Question

我正在使用JSF和Materialize开发电子商务网站。到目前为止我没有问题：在数据库中插入新产品的表单也可以正常工作，登录和注册表单。现在我正在尝试创建产品的目录，因此我需要在页面上可视化所有产品，但代码未正确解释。在inspect元素中，<div class="card-image">里面没有代码。

这是我的products.jsp页面：

<div class="row">
    <div class="col s12 z-depth-3">
        <div class="card">
            <div class="card-image">
                <f:view>
                    <h1>Products</h1>
                    <h:form>
                        <table>
                            <tr>
                                <th>Name</th>
                                <th>Price</th>
                            </tr>
                            <c:forEach var="product" items="#{productController.products}">
                                <tr>
                                    <td><h:commandLink
                                            action="#{productController.findProduct}"
                                            value="#{product.name}">
                                            <f:param name="id" value="#{product.id}" />
                                        </h:commandLink></td>
                                    <td>${product.price}</td>
                                </tr>
                            </c:forEach>
                        </table>
                    </h:form>
                </f:view>
            </div>
        </div>
    </div>
</div>

这是浏览器上的页面：

相反，如果我只使用JSF代码，它可以正常工作。你知道如何解决这个问题吗？谢谢大家。

Answer 1

不要在webbrowser中使用HTML DOM检查器来探索JSF生成的HTML输出。 HTML DOM检查器仅显示浏览器对原始HTML输出的解释。如果浏览器没有按照doctype识别某个元素，或者根据doctype错过了一个元素，或者根据doctype在错误的位置找到了一个元素，那么普通的webbrowser会轻松隐藏，自动插入或移动它（否则肯定会有一半的互联网被打破）。

始终通过右键单击查看页面源（或在Chrome中按 Ctrl + U ）查看原始HTML输出，以备不时之需探索真正的JSF生成的HTML输出。

我敢打赌你还在那里看到未解析的JSF / JSTL标签。这个问题已在JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output中得到解答。浏览器控制台中的HTTP 500错误确认了这一点。您使用.jsp扩展程序打开该页面，而不是FacesServlet上显示/faces/*的任何内容。请注意，虽然答案涉及JSP的后继Facelets（JSF在5年多以前不推荐使用JSP），但同样的原则也适用于JSP。您需要确保调用FacesServlet以便运行JSF标记。如果您确实遇到了HTTP 500错误，那么您应该读取（或搜索）异常和堆栈跟踪以获得答案。