Konfiguration eines Textfelds mit einer verwandten Combobox - ASP.NET

Question

Guten Tag,

Ich arbeite in ASP.NET.

Ich habe ein Textfeld, wo ich manuell einige Daten einfügen muss, aber diese Daten sind abhängig davon, was auf einer Combobox ausgewählt ist.

Also, um einfach zu verstehen, gebe ich ein Beispiel.

Combobox ausgewählter Wert "A" ---> nur in Textbox values ​​"1,2,3,4,5"

Combobox ausgewählter Wert "B" ---> nur in Textfeld einfügen einfügen Werte "6,7,8,9,10"

Was ist der beste Weg, dies zu tun?

Vielen Dank.

Answer 1

EDIT

So, hier ist der Code ASP aktualisiert. Einige thigns zu beachten:

• I verwenden VS Leere Vorlage (also die Contentplaceholders), aber die Prämisse ist das gleiche.
• Sie müssen den Namen der Steuerelemente in Response.Write s ersetzen, damit sie Ihren Steuerelementen entsprechen.
• Sie können die <span> und alle Verweise darauf ($('#text-valid') ...) im JavaScript-Code entfernen, wenn Sie keine Fehlermeldung möchten.
• Dies verwendet einen Timer, um die Informationen zu validieren. Ich sah dies als die beste Methode, denn wenn Sie Option b wählen und versuchen, "10" einzugeben, würde es auf der 1 fehlschlagen. Ich habe die Verzögerung auf 1 Sekunde (1000ms) eingestellt, aber Sie können dies in der setTimeout(...) ändern.
• Ich verwendete jQuery der Einfachheit halber. Das ist keine schlechte Sache, macht es besser lesbar und browserübergreifend kompatibel.

Also hier ist es:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestingGround.WebForm1" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // Grab the two fields we want to work with (don't forget to 
      // change "combo" and "text" below to the name of your controls 
      var fldCombo = '#<% Response.Write(combo.ClientID); %>'; 
      var fldText = '#<% Response.Write(text.ClientID); %>'; 

      // validation function to see if the current value is one of the values 
      // specified in the combobox 
      var isValidValue = function() { 
       $('#text-valid').text(''); 
       var val = $(fldText).val(); 
       var range = $('option:selected', fldCombo).val().split(','); 
       for (var r = 0; r < range.length; r++) 
        if (val == range[r]) 
         return true; 
       $('#text-valid').text('Invalid, must fall within: ' + range.join(', ')); 
       return false; 
      }; 

      // does the actual validation of the field, or resets it to empty 
      // and sets focus back in to it 
      var validateField = function() { 
       if (!isValidValue()) 
        $(fldText).val('').focus(); 
      }; 

      // bind to the option (se we can validate the current value that's in 
      // the textbox between changes 
      $(fldCombo).change(function() { 
       validateField(); 
      }); 

      // delay timer for validation on keypress 
      var delayedValidate = null; 

      // validate when the field changes (mostly on tabs or lose focus) 
      $(fldText).change(function() { 
       clearTimeout(delayedValidate); 
       validateField(); 
      // also bind on a keypress (as they enter a value) 
      }).bind('keypress', function() { 
       delayedValidate = setTimeout(validateField, 1000); // allow you time to type in a valid number 
      }); 
     }); 
    </script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2>TextBox content based on ComboBox</h2> 
    <table> 
     <tr> 
      <td>Combo Box:</td> 
      <td><asp:DropDownList runat="server" ID="combo"> 
        <asp:ListItem Text="Option A" Value="1,2,3,4,5" Selected="True" /> 
        <asp:ListItem Text="Option B" Value="6,7,8,9,10" /> 
      </asp:DropDownList></td> 
     </tr> 
     <tr> 
      <td>Text Box Value:</td> 
      <td><asp:TextBox runat="server" ID="text" /><span id="text-valid" style="text-indent:5px;color:red;"></span> 
      </td> 
     </tr> 
    </table> 
</asp:Content> 

---

UPDATE

Hier ist eine Version mit der Möglichkeit, Bereiche zu spezifizieren. Auch hat ein bisschen robuste Prüfung (die Werte Parsing zuerst vor dem Vergleich zu Integer):

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="TestingGround.WebForm1" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var fldCombo = '#<% Response.Write(combo.ClientID); %>'; 
      var fldText = '#<% Response.Write(text.ClientID); %>'; 

      var isValidValue = function() { 
       var val = parseInt($(fldText).val()); 

       if (val == null || isNaN(val)) 
        return false; 

       $('#text-valid').text(''); 

       var range = $('option:selected', fldCombo).val().split(','); 
       for (var r = 0; r < range.length; r++) { 
        // is range[r] a numeric range 
        if (range[r].indexOf('-') != -1) { 
         var lowHigh = range[r].split('-'); 
         var low = parseInt(lowHigh[0]), high = parseInt(lowHigh[1]); 
         if (val >= low && val <= high) 
          return true; 
        } 
        // range[r] is just a straight number 
        var match = parseInt(range[r]); 
        if (val == match) 
         return true; 
       } 
       $('#text-valid').text('Invalid, must fall within: ' + range.join(', ')); 
       return false; 
      }; 
      var validateField = function() { 
       if (!isValidValue()) 
        $(fldText).val('').focus(); 
      }; 

      $(fldCombo).change(function() { 
       validateField(); 
      }); 
      var delayedValidate = null; 
      $(fldText).change(function() { 
       clearTimeout(delayedValidate); 
       validateField(); 
      }).bind('keypress', function() { 
       delayedValidate = setTimeout(validateField, 1000); // allow you time to type in a valid number 
      }); 
     }); 
    </script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2>TextBox content based on ComboBox</h2> 
    <table> 
     <tr> 
      <td>Combo Box:</td> 
      <td><asp:DropDownList runat="server" ID="combo"> 
        <asp:ListItem Text="Option A" Value="1-3,4,5,11-99" Selected="True" /> 
        <asp:ListItem Text="Option B" Value="6,7-9,10" /> 
      </asp:DropDownList></td> 
     </tr> 
     <tr> 
      <td>Text Box Value:</td> 
      <td><asp:TextBox runat="server" ID="text" /><span id="text-valid" style="text-indent:5px;color:red;"></span> 
      </td> 
     </tr> 
    </table> 
</asp:Content> 

Answer 2

Sie können MS verwenden AJAX-Erweiterungen. Es gibt eine Erweiterung für Textfeldsteuerelemente (FilteredTextBox Extender), die nur die Eingabe bestimmter Zeichen erlaubt. Sie können das verwenden, und wenn sich der ausgewählte Wert des Combobox ändert, können Sie ändern, welche Nummern von der Erweiterung von Code-Behind erlaubt sind.