РЕДАКТИРОВАТЬ
Итак, вот обновленный код ASP.Некоторые заметки:
- Я использовал VS Пустой шаблон (таким образом ContentPlaceHolders), но предпосылка та же.
- Вам нужно заменить имя элементов управления в
Response.Write s, чтобы они соответствовали вашим элементам управления. - Вы можете удалить
<span> и все ссылки на него ($('#text-valid') ...) в коде JavaScript, если не хотите получать сообщение об ошибке. - Используется таймер для проверки информации.Я видел это как лучший метод, потому что, если вы выберете опцию b и попробуете ввести «10», она не будет работать на 1. У меня задержка установлена на 1 секунду (1000 мс), но вы можете изменить это в
setTimeout(...). - Я использовал jQuery для простоты.Это не так уж плохо, просто делает его более разборчивым и совместимым с браузерами.
Так вот:
<%@ 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>
ОБНОВЛЕНИЕ
Вот версия с возможностью указания диапазонов.Также добавлена более надежная проверка (перед сравнением анализируются значения до целого числа):
<%@ 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>