使用Tailwind与.NET Core3.1 Razor Pages时，表单含SVG的input标签助手错误解决

这个错误的根源其实很简单——你按钮里的SVG标签有个语法错误，多余的引号破坏了HTML结构，让Razor的标签解析器误以为你的input标签没有正确闭合，才抛出了那个提示。

问题所在 #

看你按钮里的SVG代码：

<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" ">

注意最后这个viewBox="0 0 24 24" ">——这里多了一个额外的引号，导致整个HTML的结构被打乱，Razor解析器无法正确识别标签的闭合状态，进而误判input标签助手格式错误。

修正后的完整代码 #

只需要移除那个多余的引号，就能保留SVG同时让表单正常工作，修正后的代码如下：

<form asp-route="Search" method="get"> 
    <label for="place-address" class="block text-sm font-medium leading-5 text-gray-700">Enter your address</label> 
    <div class="mt-1 flex rounded-md shadow-sm"> 
        <div class="relative flex-grow focus-within:z-10"> 
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> 
                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> 
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /> 
                </svg> 
            </div> 
            <input asp-for="Address" id="place-address" class="form-input block w-full rounded-none rounded-l-md pl-10 transition ease-in-out duration-150 sm:text-sm sm:leading-5" /> 
        </div> 
        <button type="submit" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-r-md text-gray-700 bg-gray-50 hover:text-gray-500 hover:bg-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"> 
            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"> 
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> 
            </svg> 
            <span class="ml-2">Search</span> 
        </button> 
    </div> 
</form>

小提示 #

在Razor Pages中使用HTML和标签助手时，一定要注意标签的语法严谨性：

• 所有属性的引号要成对出现，不要多写或少写
• 自闭合标签（比如<input />）确保正确闭合
• 嵌套标签要层次清晰，避免交叉嵌套

这些小细节很容易被忽略，但会导致Razor解析器出现各种奇怪的错误提示。

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