使用更新面板更新部分页面

Question

我正在创建“编辑我的个人资料页面”，其中有一些文本框和下拉列表。我有一个要求，即当我在第一个下拉列表中选择一个值时，应该填充第二个下拉列表。但这并没有发生。

 <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
                         <ContentTemplate >

                             <asp:Label runat="server" Id="lbljobIndus" Text="Preferred Job Industry" Font-Names="Calibri" Font-Size="Small" ForeColor="Black"></asp:Label>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: black; font-family: Calibri; font-size: small">:</span>&nbsp;&nbsp;  
                             <asp:Label runat="server" ID="lblPreferredJobIndustry" Font-Names="Calibri" Font-Size="Small" ForeColor="Black"></asp:Label>

                             <asp:DropDownList ID="tbPreferredJobIndustry" runat="server" Height="19px" OnSelectedIndexChanged="ddlTargetedIndustry_SelectedIndexChanged">
                                 <asp:ListItem Selected="True" Value="-1">--Select Industry--</asp:ListItem>
                                 <asp:ListItem Value="1">Administration</asp:ListItem>
                                 <asp:ListItem Value="2">Hospital/HealthCare</asp:ListItem>
                                 <asp:ListItem Value="3">Medical Transcription</asp:ListItem>
                             </asp:DropDownList>

                             <br />
                             <br />
                             <br />

                             <asp:Label runat="server" ID="lblJobCat" Text="Preferred Job Category" Font-Names="Calibri" Font-Size="Small" ForeColor="Black"></asp:Label>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: black; font-family: Calibri; font-size: small">:</span>&nbsp;&nbsp; 
                             <asp:Label runat="server" ID="lblJobCategory" Font-Names="Calibri" Font-Size="Small" ForeColor="Black"></asp:Label>
                             <asp:DropDownList ID="tbJobCategory" runat="server">
                                 <asp:ListItem Selected="True" Value="-1">-Position Category-</asp:ListItem>

                             </asp:DropDownList>
                             <br />
                             <br />
                         </ContentTemplate>
                  </asp:UpdatePanel>

这是填充第二个下拉列表的代码：-

protected void ddlTargetedIndustry_SelectedIndexChanged(object sender, EventArgs e)
    {

        DataSet ds = new DataSet();
        SqlDataAdapter myda = new SqlDataAdapter("Select s_CategoryName,FK_TargetedIndustryID FROM [OfinityJobSearch].[dbo].[tm_JobCategory] where FK_TargetedIndustryID='" + tbPreferredJobIndustry.SelectedItem.Value + "'", con);
        myda.Fill(ds);
        tbJobCategory.DataSource = ds;
        tbJobCategory.DataValueField = "FK_TargetedIndustryID";
        tbJobCategory.DataTextField = "s_CategoryName";
        tbJobCategory.DataBind();
        tbJobCategory.Items.Insert(0, new ListItem("--Select Job Category--", "0"));
    }

我使用了更新面板，以便其他文本框中的值不会在回发时被清除。但是现在，我认为回帖没有发生。你能检查我的代码并告诉我错误在哪里吗？

Answer 1

为第一个 ddl 设置 AutoPostBack=true

Answer 2

你可以使用AjaxToolkit CascadingDropDown，它非常有帮助和有用。但在 CascadingDropDown 的情况下，您需要额外的服务。

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"
    TargetControlID="DropDownList2"
    Category="Model"
    PromptText="Please select a model"
    LoadingText="[Loading models...]"
    ServicePath="CarsService.asmx"
    ServiceMethod="GetDropDownContents"
    ParentControlID="DropDownList1"
    SelectedValue="SomeValue" />

更新：

Full example here

你的 *.aspx

<asp:DropDownList ID="DropDownList1" runat="server" Width="170" />
<asp:DropDownList ID="DropDownList2" runat="server" Width="170" />
 <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"
            Category="Make"  PromptText="Please select a make"  LoadingText="[Loading makes...]"
            ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" />

and add code to page

 [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
    {
        return new CarsService().GetDropDownContents(knownCategoryValues, category);
    }

add web service

<%@ WebService
    Language="C#"
    CodeBehind="~/App_Code/CarsService.cs"
    Class="CarsService" %>

Code for service

[System.Web.Script.Services.ScriptService]
public class CarsService : WebService
{
    // Member variables
    private static XmlDocument _document;
    private static Regex _inputValidationRegex;
    private static object _lock = new object();

    // we make these public statics just so we can call them from externally for the
    // page method call
    public static XmlDocument Document
    {
        get
        {
            lock (_lock)
            {
                if (_document == null)
                {
                    // Read XML data from disk
                    _document = new XmlDocument();
                    _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml"));
                }
            }
            return _document;
        }
    }

    public static string[] Hierarchy
    {
        get { return new string[] { "make", "model" }; }
    }

    public static Regex InputValidationRegex
    {
        get
        {
            lock (_lock)
            {
                if (null == _inputValidationRegex)
                {
                    _inputValidationRegex = new Regex("^[0-9a-zA-Z \\(\\)]*$");
                }
            }
            return _inputValidationRegex;
        }
    }

    /// <summary>
    /// Helper web service method
    /// </summary>
    /// <param name="knownCategoryValues">private storage format string</param>
    /// <param name="category">category of DropDownList to populate</param>
    /// <returns>list of content items</returns>
    [WebMethod]
    public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
    {
        // Get a dictionary of known category/value pairs
        StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

        // Perform a simple query against the data document
        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category, InputValidationRegex);
    }