c# - Strange __Invariant hidden element inserted into markup - Stack Overflow

I'm hitting a strange problem that I haven't been able to figure out. Here is a block of my markup.

<div class="col-md-4">
    <div class="mb-3">
        <label asp-for="OrderSearch.StartDate" class="control-label"></label>
        <div class="input-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" title="Predefined Dates">
                <img src="~/images/mdi/calendar.svg" />
            </button>
            <ul class="dropdown-menu">
                <li><a data-mode="1" href="javascript:void(0)" class="set-dates dropdown-item">Today</a></li>
                <li><a data-mode="2" href="javascript:void(0)" class="set-dates dropdown-item">Yesterday</a></li>
                <li><a data-mode="3" href="javascript:void(0)" class="set-dates dropdown-item">This Week</a></li>
                <li><a data-mode="4" href="javascript:void(0)" class="set-dates dropdown-item">This Month</a></li>
                <li><a data-mode="5" href="javascript:void(0)" class="set-dates dropdown-item">This Quarter</a></li>
                <li><a data-mode="6" href="javascript:void(0)" class="set-dates dropdown-item">This Year</a></li>
                <li><a data-mode="7" href="javascript:void(0)" class="set-dates dropdown-item">Last Week</a></li>
                <li><a data-mode="8" href="javascript:void(0)" class="set-dates dropdown-item">Last Month</a></li>
                <li><a data-mode="9" href="javascript:void(0)" class="set-dates dropdown-item">Last Quarter</a></li>
                <li><a data-mode="10" href="javascript:void(0)" class="set-dates dropdown-item">Last Year</a></li>
            </ul>
            <input asp-for="OrderSearch.StartDate" class="form-control" />
        </div>
        <span asp-validation-for="OrderSearch.StartDate" class="text-danger"></span>
    </div>
</div>

And here's how this markup gets rendered. Note that a new hidden element with the ID __Invariant is added.

<div class="col-md-4">
    <div class="mb-3">
        <label class="control-label" for="OrderSearch_StartDate">Start Date (Order Closed)</label>
        <div class="input-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" title="Predefined Dates">
                <img src="/images/mdi/calendar.svg" />
            </button>
            <ul class="dropdown-menu">
                <li><a data-mode="1" href="javascript:void(0)" class="set-dates dropdown-item">Today</a></li>
                <li><a data-mode="2" href="javascript:void(0)" class="set-dates dropdown-item">Yesterday</a></li>
                <li><a data-mode="3" href="javascript:void(0)" class="set-dates dropdown-item">This Week</a></li>
                <li><a data-mode="4" href="javascript:void(0)" class="set-dates dropdown-item">This Month</a></li>
                <li><a data-mode="5" href="javascript:void(0)" class="set-dates dropdown-item">This Quarter</a></li>
                <li><a data-mode="6" href="javascript:void(0)" class="set-dates dropdown-item">This Year</a></li>
                <li><a data-mode="7" href="javascript:void(0)" class="set-dates dropdown-item">Last Week</a></li>
                <li><a data-mode="8" href="javascript:void(0)" class="set-dates dropdown-item">Last Month</a></li>
                <li><a data-mode="9" href="javascript:void(0)" class="set-dates dropdown-item">Last Quarter</a></li>
                <li><a data-mode="10" href="javascript:void(0)" class="set-dates dropdown-item">Last Year</a></li>
            </ul>
            <input type="date" class="form-control" id="OrderSearch_StartDate" name="OrderSearch.StartDate" value="" />
            <input name="__Invariant" type="hidden" value="OrderSearch.StartDate" />
        </div>
        <span class="text-danger field-validation-valid" data-valmsg-for="OrderSearch.StartDate" data-valmsg-replace="true"></span>
    </div>
</div>

I'm using Bootstrap 5. Because my <input> element is no longer the last element in the <div>, the Bootstrap styling of my input group is messed up. I do not know whether or not this issue is related to Bootstrap.

I Googled quite a bit but couldn't find anything on this. Has anyone seen this before?

Update:

This seems like it might be related to the <input> tag helper. If I explicitly set the type of my StartDate control to text or datetime, the hidden element is not added. But I need it to be a date.

Currently, I'm specifying a date on the property like this:

[Display(Name = "Start Date (Order Closed)")]
[DataType(DataType.Date)]
public DateTime? StartDate { get; set; }

I'm hitting a strange problem that I haven't been able to figure out. Here is a block of my markup.

<div class="col-md-4">
    <div class="mb-3">
        <label asp-for="OrderSearch.StartDate" class="control-label"></label>
        <div class="input-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" title="Predefined Dates">
                <img src="~/images/mdi/calendar.svg" />
            </button>
            <ul class="dropdown-menu">
                <li><a data-mode="1" href="javascript:void(0)" class="set-dates dropdown-item">Today</a></li>
                <li><a data-mode="2" href="javascript:void(0)" class="set-dates dropdown-item">Yesterday</a></li>
                <li><a data-mode="3" href="javascript:void(0)" class="set-dates dropdown-item">This Week</a></li>
                <li><a data-mode="4" href="javascript:void(0)" class="set-dates dropdown-item">This Month</a></li>
                <li><a data-mode="5" href="javascript:void(0)" class="set-dates dropdown-item">This Quarter</a></li>
                <li><a data-mode="6" href="javascript:void(0)" class="set-dates dropdown-item">This Year</a></li>
                <li><a data-mode="7" href="javascript:void(0)" class="set-dates dropdown-item">Last Week</a></li>
                <li><a data-mode="8" href="javascript:void(0)" class="set-dates dropdown-item">Last Month</a></li>
                <li><a data-mode="9" href="javascript:void(0)" class="set-dates dropdown-item">Last Quarter</a></li>
                <li><a data-mode="10" href="javascript:void(0)" class="set-dates dropdown-item">Last Year</a></li>
            </ul>
            <input asp-for="OrderSearch.StartDate" class="form-control" />
        </div>
        <span asp-validation-for="OrderSearch.StartDate" class="text-danger"></span>
    </div>
</div>

And here's how this markup gets rendered. Note that a new hidden element with the ID __Invariant is added.

<div class="col-md-4">
    <div class="mb-3">
        <label class="control-label" for="OrderSearch_StartDate">Start Date (Order Closed)</label>
        <div class="input-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" title="Predefined Dates">
                <img src="/images/mdi/calendar.svg" />
            </button>
            <ul class="dropdown-menu">
                <li><a data-mode="1" href="javascript:void(0)" class="set-dates dropdown-item">Today</a></li>
                <li><a data-mode="2" href="javascript:void(0)" class="set-dates dropdown-item">Yesterday</a></li>
                <li><a data-mode="3" href="javascript:void(0)" class="set-dates dropdown-item">This Week</a></li>
                <li><a data-mode="4" href="javascript:void(0)" class="set-dates dropdown-item">This Month</a></li>
                <li><a data-mode="5" href="javascript:void(0)" class="set-dates dropdown-item">This Quarter</a></li>
                <li><a data-mode="6" href="javascript:void(0)" class="set-dates dropdown-item">This Year</a></li>
                <li><a data-mode="7" href="javascript:void(0)" class="set-dates dropdown-item">Last Week</a></li>
                <li><a data-mode="8" href="javascript:void(0)" class="set-dates dropdown-item">Last Month</a></li>
                <li><a data-mode="9" href="javascript:void(0)" class="set-dates dropdown-item">Last Quarter</a></li>
                <li><a data-mode="10" href="javascript:void(0)" class="set-dates dropdown-item">Last Year</a></li>
            </ul>
            <input type="date" class="form-control" id="OrderSearch_StartDate" name="OrderSearch.StartDate" value="" />
            <input name="__Invariant" type="hidden" value="OrderSearch.StartDate" />
        </div>
        <span class="text-danger field-validation-valid" data-valmsg-for="OrderSearch.StartDate" data-valmsg-replace="true"></span>
    </div>
</div>

I'm using Bootstrap 5. Because my <input> element is no longer the last element in the <div>, the Bootstrap styling of my input group is messed up. I do not know whether or not this issue is related to Bootstrap.

I Googled quite a bit but couldn't find anything on this. Has anyone seen this before?

Update:

This seems like it might be related to the <input> tag helper. If I explicitly set the type of my StartDate control to text or datetime, the hidden element is not added. But I need it to be a date.

Currently, I'm specifying a date on the property like this:

[Display(Name = "Start Date (Order Closed)")]
[DataType(DataType.Date)]
public DateTime? StartDate { get; set; }

• c#
• asp-core
• -core
• razor-pages

Share Improve this question Follow edited Mar 10 at 2:15 Zhi Lv 22k11 gold badge2727 silver badges3737 bronze badges asked Mar 3 at 18:21 Jonathan WoodJonathan Wood 67.5k8282 gold badges304304 silver badges532532 bronze badges 6

• github/dotnet/aspnetcore/issues/…? – GSerg Commented Mar 3 at 19:35
• @GSerg: I did see that article. But it's talking about query strings. I couldn't see how it is related. – Jonathan Wood Commented Mar 3 at 19:40
• It gets in the query string because that is where the inputs go. And it tells you how to stop generating the inputs. – GSerg Commented Mar 3 at 19:42
• @GSerg: I was able to determine that is the same issue, and found a way to implement their workaround with Razor Pages. That didn't seem related at first. Thanks for point it out. Now I need to understand what I lose from disabling that feature. – Jonathan Wood Commented Mar 3 at 20:16
• It explains that right there in the issue. You server will be receiving values potentially formatted in cultures it is not prepared to handle. – GSerg Commented Mar 3 at 20:22

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

This issue is discussed in a GitHub post.

It's related to a change that was made around .NET 7 that causes the <input> tag helper to add a hidden element to help deal with potential culture issues.

In most cases, there would be no adverse effects. But, here, Bootstrap 5 input groups only round the corners for the first and last elements in the group. Because the tag helpers inserted an additional element after mine, mine didn't get rounded corners, which messed up the formatting.

If you can do without this feature, it can be disabled using the following code.

builder.Services.AddRazorPages(options =>
{

    // ...

})
.AddViewOptions(options =>
{
    options.HtmlHelperOptions.FormInputRenderMode = FormInputRenderMode.AlwaysUseCurrentCulture;
});