树枝模板中呈现的 Symfony 表单作为控制器未提交

Question

我想在 base.html.twig 中有简单的“搜索”输入字段。 通常我需要编写代码来维护每条路线的形式。 为了解决这个问题，我决定使用路由创建单独的控制器以直接在 base.html.twig 模板中呈现它：

<div class="top-middle col-12 col-md-6 d-flex order-2 order-md-1">
{{ render(controller("App\\Controller\\SearchController::searchProduct"))}}
</div>

它可以正常工作，除非在提交表单时没有任何反应。 我在我的一条路线中以正常方式尝试了它，它工作正常。 所以不知道问题出在哪里。

我的 SearchController 带有在 twig 中呈现的路由：

class SearchController extends AbstractController
{
    #[Route('search-product', name: 'search_product')]
    public function searchProduct(Request $request)
    {
        $searchForm = $this->createForm(SearchProductType::class);
        $searchForm->handleRequest($request);
      
        if ($searchForm->isSubmitted() && $searchForm->isValid()) {
            
            dump('Form submitted');
        }
        return $this->render('components/search-input.html.twig', [
            'searchForm' => $searchForm->createView()
            ]);
    }
}

搜索 input.html.twig 组件：

<div class="top-search">
            <i class="bi-search top-search__icon"></i>
            {{ form(searchForm) }}
</div>

以及使用 base.html.twig 呈现 index.html.twig 的主控制器：

 #[Route('/', name: 'home')]
    public function index(FileHandler $fileHandler, SessionInterface $session, Request $request): Response
    {
      
        $products = $this->doctrine->getRepository(Product::class)->getProducts('Dresses', 4);
        $products = $this->addPathToImages($products, 'Dresses');
        
        return $this->render('shop/index.html.twig', [
            'products' => $products
        ]);
    }

线

dump('Form submitted');

提交表单时不执行。 页面刷新但没有任何反应。 我认为整个逻辑应该留在这条路线/控制器中，或者我错过了什么？

Answer 1

根据要求，我发布了我的解决方案：

而不是直接在 Twig 文件中嵌入控制器，而是决定用 js 处理我的小表单（只是搜索输入，通过按“enter”提交）。 原因是无法从嵌入式控制器重定向。 树枝中的代码：

<form id="top-search-form">
                <div class="top-search">
                        <input id="search-string"
                        class="top-search__input" type="search" 
                        placeholder="Search shop">
                </div>
</form>             

和用 Javascript 编写的代码（需要 FOSJSRouting Bundle）：

const routes = require('/public/js/fos_js_routes.json');
import Routing from '/vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.getElementById('top-search-form');
    
    searchForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const searchString = document.getElementById('search-string').value;

        var url = Routing.generate('items_filter', {
            'searchText': searchString
        });
       
        location.href = url;
    });
})