c# - TagBuilder 不跨 ajax 请求生成唯一的 id 属性值

Question

我遇到了一个问题，我使用相同的模板在页面上呈现一些内容，并且使用相同的模板通过 AJAX 请求在页面上呈现其他内容。

以下代码呈现部分 Razor View :

@model SearchBoxViewModel
<div class="smart-search">
    @using (Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="form-group">
            <div class="hidden-xs col-sm-1 col-md-1 col-lg-1 text-right">
                @Html.LabelFor(m => m.SearchPhrase, new { @class = "control-label heading" })
            </div>
            <div class="col-xs-8 col-md-9 col-lg-10">
                @Html.TextBoxFor(m => m.SearchPhrase, new {@class = "form-control", placeholder = "for products, companies, or therapy areas"})
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
                <input type="submit" value="Search" class="btn btn-default"/>
            </div>
            <div class="what-to-search hidden-11 col-sm-11 col-sm-offset-1">
                <div class="checkbox">
                    <label>
                        @Html.CheckBoxFor(m => m.WhatToSearch, null, false)
                        @Html.DisplayNameFor(m => m.WhatToSearch)
                    </label>
                </div>
            </div>
        </div>
    }
</div> <!-- /.smart-search -->

以下代码发出 AJAX 请求:

$.ajax(anchor.attr("data-overlay-url-action"))
        .done(function (data) {
            $("div.overlay").addClass("old-overlay");

            $("div.navbar").after(data);

            $("div.overlay:not(.old-overlay)")
                .attr("data-overlay-url-action", anchor.attr("data-overlay-url-action"))
                .hide()
                .fadeIn();

            $("div.old-overlay")
                .fadeOut()
                .removeClass("old-overlay");

            anchor.addClass("overlay-exists");
        });

因此，您在页面上得到两次相同的部分 Razor View 输出，一次是在页面请求期间，一次是在 AJAX 请求期间。

问题是 TextBoxFor、CheckBoxFor 等都使用 TagBuilder.GenerateId 来生成 id 属性值，但它不考虑在可能涉及 AJAX 的多个请求中生成 id。这会导致在页面上输出相同的 id 值，从而导致 JavaScript 中断。

以下是输出两次的 HTML(一次在请求期间，然后在 AJAX 请求期间添加到页面的单独部分):

<div class="smart-search">

<form role="form" method="get" class="form-horizontal" action="/PharmaDotnet/ux/WebReport/Search">        <div class="form-group">
            <div class="hidden-xs col-sm-1 col-md-1 col-lg-1 text-right">
                <label for="SearchPhrase" class="control-label heading">Search</label>
            </div>
            <div class="col-xs-8 col-md-9 col-lg-10">
                <input type="text" value="" placeholder="for products, companies, or therapy areas" name="SearchPhrase" id="SearchPhrase" class="form-control">
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
                <input type="submit" class="btn btn-default" value="Search">
            </div>
            <div class="what-to-search hidden-11 col-sm-11 col-sm-offset-1">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="true" name="WhatToSearch" id="WhatToSearch">
                        NewsManager Search Only
                    </label>
                </div>
            </div>
        </div>
</form></div>

所以 SearchPhrase 和 WhatToSearch id 是重复的。

有没有办法解决这个问题，或者是否有更好的方法来呈现表单元素来避免这个问题？

Answer 1

您可以为项目指定自己的 ID，这样就不会出现 ID 冲突问题。您是否尝试过手动设置 id:Html.TextBoxFor( ... , new { id = "AnythingHere"})，其中 id 可能是新生成的 Guid？ (请注意，您可能需要添加前缀，因为 Guid 可以以数字开头。

因此您可以使用以下内容。 Guid 看起来不太好，而且不必要地长。您可能想要使用更短的内容，例如简短的 guid、DateTime.Ticks、...

@{
  var id = "chk_" + Guid.NewGuid().ToString();
}
@Html.CheckBoxFor(..., new { id = id })
@Html.LabelFor(..., new { @for = id })