TagBuilder non genera valori di attributo id unqiue su richieste Ajax

Question

Ho un problema in cui sto utilizzando lo stesso modello per il rendering di alcuni contenuti su una pagina e lo stesso modello viene utilizzato per il rendering di contenuti aggiuntivi sulla pagina utilizzando una richiesta AJAX.

Il codice seguente rende la vista rasoio parziale:

@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 --> 

Il codice seguente rende la richiesta 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"); 
     }); 

Quindi, ciò che si ottiene è lo stesso parziale vista rasoio stampa sulla pagina due volte , una volta durante la richiesta della pagina e una volta durante la richiesta AJAX.

Il problema è che TextBoxFor, CheckBoxFor, ecc. Fanno tutti uso di TagBuilder.GenerateId per generare il valore dell'attributo id ma non tiene conto della generazione di ID su più richieste in cui AJAX potrebbe essere coinvolto. Ciò si traduce nello stesso valore id in uscita sulla pagina, causando la rottura di JavaScript.

Quello che segue è il codice HTML che viene emesso due volte (una volta durante la richiesta e poi ha aggiunto in una parte separata della pagina durante una richiesta 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> 

Così il SearchPhrase e id WhatToSearch di sono duplicati.

C'è un modo per aggirare questo problema oppure esiste un modo migliore per eseguire il rendering degli elementi del modulo per evitare questo problema?

Answer 1

È possibile specificare il proprio ID per gli articoli e quindi non si avrebbe questo problema di collisione ID. Hai provato a impostare l'ID manualmente: Html.TextBoxFor(... , new { id = "AnythingHere" }), dove l'ID potrebbe essere una guida appena generata? (Nota che probabilmente dovresti aggiungere un prefisso, perché Guid può iniziare con un numero

Quindi puoi usare quanto segue: Il Guid non ha un bell'aspetto ed è inutilmente lungo. con qualcosa di più breve, come breve guid, DateTime.Ticks, ...

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