Nello script #1007 abbiamo visto come sia semplice, usando ASP.NET Dynamic Data Control, personalizzare il template di modifica per una certa tipologia di dato realizzando un apposito UserControl. In questo script sfrutteremo jQuery per rendere ancora più intuitiva l'interfaccia utente, in particolare utilizzando il controllo Slider di jQuery UI come editor per un valore intero.

Come già spiegato in precedenza, un custom template di modifica consiste in uno UserControl posizionato nella cartella DynamicData\FieldTemplates il cui nome termina con il suffisso "_Edit". Il markup personalizzato è composto essenzialmente da quattro blocchi principali, indicati nei commenti all'interno dello snippet in basso:

<%-- 1) layout custom --%>
<div style="margin:10px; float:left">
    <asp:Label runat="server" ID="theLabel" Text="<%# FieldValueEditString %>" />
</div>
<asp:Panel runat="server" ID="thePanel" CssClass="theSlider" 
    Width="70%" style="float:left; margin:10px;" />
<div style="clear:both"></div>

<%-- 2) Textbox per il post del dato --%>
<asp:TextBox runat="server" id="theValue" Text="<%# FieldValueEditString %>" style="display:none" />

<%-- 3) Validator --%>
<asp:DynamicValidator runat="server" id="DynamicValidator1" 
    CssClass="droplist" ControlToValidate="theValue" Display="Dynamic" />

<%-- 4) Script per attivare jQuery UI --%>
<script type="text/javascript">
    $(function() {
        $('#<%= thePanel.ClientID %>').slider(
        {
            value: $('#<%= theValue.ClientID %>').val(),
            change: function(event, ui) {
                $('#<%= theValue.ClientID %>').val(ui.value);
                $('#<%= theLabel.ClientID %>').html(ui.value);
            }
        });
    });
</script>

Vediamo nel dettaglio lo scopo di ogni singolo elemento:

• La prima parte del markup rappresenta il vero e proprio layout custom, composto da una label che visualizza il valore e da un Panel che verrà utilizzato da jQuery UI per renderizzare lo slider;
• Una TextBox invisibile, aggiornata automaticamente man mano che l'utente cambia il valore sulo slider, viene utilizzata per inviare quest'ultimo al server in fase di post. Per questa funzione non è possibile utilizzare il controllo HiddenField dato che non è supportato dai validator;
• Il DynamicValidator si occupa di validare il dato della TextBox, per far sì che siano supportati, ad esempio, controlli sui valori minimo e massimo imputabili;
• La sezione di Javascript attiva la funzionalità Slider sul Panel; in corrispondenza dell'evento change, imposta il nuovo valore sia sulla Label per la visualizzazione che sulla TextBox per il post.

Il codice necessario lato server è molto semplice e consiste nell'attivazione del validator in corrispondenza dell'evento di Load e nell'override del metodo ExtractValues per restituire il valore impostato dall'utente al framework:

protected void Page_Load(object sender, EventArgs e)
{
    this.SetUpValidator(this.DynamicValidator1);
}

protected override void ExtractValues(IOrderedDictionary dictionary)
{
    dictionary[Column.Name] = ConvertEditedValue(theValue.Text);
}

public override Control DataControl
{
    get { return theValue; }
}

Dopo aver referenziato questo template con il solito attributo UIHint

[MetadataType(typeof(ProductsMetadata))]
public partial class Products
{
}

public class ProductsMetadata
{
    [UIHint("Slider")]
    public int ReorderLevel { get; set; }
}

il risultato finale che si ottiene è quello mostrato nella figura seguente.