正确的方式ASP.net CascadingDropDown的编程方式触发更改事件使用JavaScript [英] Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript

问题描述

标记

 ＆LT; ASP：的ScriptManager =服务器/＆GT;
国家code
＆LT; ASP：文本框ID =Coutry codeTextBox=服务器的onblur =selectCountry（this.id）;＆GT;
＆LT; / ASP：文本框＆GT;＆LT; ASP：DropDownList的ID =CountryDropDownList=服务器＆GT;
＆LT; / ASP：DropDownList的＆GT;＆LT; ajaxToolkit：CascadingDropDown
    ID =CountryDropDownListCascadingDropDown=服务器
    的TargetControlID =CountryDropDownList
    分类=国家
    ServiceMethod =的getCountries
    ServicePath =〜/ CountryData.asmx
    LoadingText =载入中...
    PromptText =SELECT＆GT;
＆LT; / ajaxToolkit：CascadingDropDown＆GT;
＆LT; ASP：DropDownList的ID =CityDropDownList=服务器＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; ajaxToolkit：CascadingDropDown
    ID =CityDropDownListCascadingDropDown=服务器
    ParentControlID =CountryDropDownList
    的TargetControlID =CityDropDownList
    分类=城市ServiceMethod =GetCities
    ServicePath =〜/ CountryData.asmx
    LoadingText =载入中...
    PromptText =SELECT＆GT;
＆LT; / ajaxToolkit：CascadingDropDown＆GT;
 

Web服务（〜/ CountryData.asmx）

  [WebService的空间（namespace =htt​​p://tempuri.org/）]
[WebServiceBinding（ConformsTo = WsiProfiles.BasicProfile1_1）
[System.ComponentModel.ToolboxItem（假）]
[ScriptService]
公共类CountryData：System.Web.Services.WebService
{
    [的WebMethod]
    公共CascadingDropDownNameValue []的getCountries（字符串knownCategoryValues​​，串类）
    {
        清单＆LT; CascadingDropDownNameValue＆GT;值=新的List＆LT; CascadingDropDownNameValue＆GT;（）;        values​​.Add（新CascadingDropDownNameValue（美国，美国））;
        values​​.Add（新CascadingDropDownNameValue（加拿大，CA））;        返回values​​.ToArray（）;
    }    [的WebMethod]
    公共CascadingDropDownNameValue [] GetCities（字符串knownCategoryValues​​，串类）
    {
        StringDictionary KV = CascadingDropDown.ParseKnownCategoryValues​​String（knownCategoryValues​​）;
        字符串全国=千伏[国家];        清单＆LT; CascadingDropDownNameValue＆GT;值=新的List＆LT; CascadingDropDownNameValue＆GT;（）;        开关（国家）
        {
            案美国：
                values​​.Add（新CascadingDropDownNameValue（加州，CA））;
                values​​.Add（新CascadingDropDownNameValue（纽约，NY））;
                打破;
            案CA：
                values​​.Add（新CascadingDropDownNameValue（多伦多，TO））;
                values​​.Add（新CascadingDropDownNameValue（蒙特利尔，MO））;
                打破;
        }        返回values​​.ToArray（）;
    }}
 

jQuery的

  VAR selectCountry =功能（ID）
    {
        VAR国家codeTextBox = $（＃+ ID）;
        VAR countryDropDownList = $（＃CountryDropDownList）;        countryDropDownList.val（国家codeTextBox.val（））;
        countryDropDownList.change（）;
    }
 

JavaScript函数改变CountryDropDownList选定值。然而，级联控制CityDropDownList不会自动填充。

什么是触发使用jQuery父控件更改事件的正确方式，使相关的控制（S）能自动级联？

解决方案

根据您，我如何可以触发一个onchange我的答案？事件手动也可以解决你的问题：

  

有一对夫妇的方法可以做到这一点。如果的onchange 监听器
  是通过 element.onchange 属性设置功能，你不
  困扰有关该事件的对象或冒泡/传播，最简单的
  方法是只调用该函数：

  element.onchange（）;
 

如果您需要它完全模拟真实事件，或者如果你设置了
  通过HTML属性的事件或的addEventListener / 的attachEvent ，你
  需要做一些特征检测的正确触发事件：

 如果（createEvent文件）{
    变种EVT = document.createEvent（HTMLEvents）;
    evt.initEvent（变，假的，真正的）;
    element.dispatchEvent（EVT）;
}
其他
    element.fireEvent（平变化）;
 

Markup

<asp:ScriptManager runat="server" />
Country Code
<asp:TextBox ID="CoutryCodeTextBox" runat="server" onblur="selectCountry(this.id);">
</asp:TextBox>

<asp:DropDownList ID="CountryDropDownList" runat="server">
</asp:DropDownList>

<ajaxToolkit:CascadingDropDown
    ID="CountryDropDownListCascadingDropDown" runat="server"
    TargetControlID="CountryDropDownList"
    Category="Country"
    ServiceMethod="GetCountries"
    ServicePath="~/CountryData.asmx"
    LoadingText="Loading ..."
    PromptText="SELECT">
</ajaxToolkit:CascadingDropDown>


<asp:DropDownList ID="CityDropDownList" runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown
    ID="CityDropDownListCascadingDropDown" runat="server"
    ParentControlID="CountryDropDownList"
    TargetControlID="CityDropDownList"
    Category="City" ServiceMethod="GetCities"
    ServicePath="~/CountryData.asmx"
    LoadingText="Loading ..."
    PromptText="SELECT">
</ajaxToolkit:CascadingDropDown>

Web Service (~/CountryData.asmx)

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class CountryData : System.Web.Services.WebService
{
    [WebMethod]
    public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues, string category)
    {
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        values.Add(new CascadingDropDownNameValue("United States", "US"));
        values.Add(new CascadingDropDownNameValue("Canada", "CA"));

        return values.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] GetCities(string knownCategoryValues, string category)
    {
        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        string country = kv["Country"];

        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        switch (country)
        { 
            case "US":
                values.Add(new CascadingDropDownNameValue("California", "CA"));
                values.Add(new CascadingDropDownNameValue("New York", "NY"));
                break;
            case "CA":
                values.Add(new CascadingDropDownNameValue("Toronto", "TO"));
                values.Add(new CascadingDropDownNameValue("Montreal", "MO"));
                break;
        }

        return values.ToArray();
    }

}

jQuery

    var selectCountry = function (id)
    {
        var countryCodeTextBox = $("#" + id);
        var countryDropDownList = $("#CountryDropDownList");

        countryDropDownList.val(countryCodeTextBox.val());
        countryDropDownList.change();
    }

The javascript function changes the selected value of CountryDropDownList. However, the cascaded control CityDropDownList is not populated automatically.

What is the correct way to trigger the change event in the parent control using jQuery so that the related control(s) are cascaded automatically?

解决方案

According to you, my answer on How can I trigger an onchange event manually? also solves your problem:

There's a couple of ways you can do this. If the onchange listener is a function set via the element.onchange property and you're not bothered about the event object or bubbling/propagation, the easiest method is to just call that function:

element.onchange();

If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener/attachEvent, you need to do a bit of feature detection to correctly fire the event:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

这篇关于正确的方式ASP.net CascadingDropDown的编程方式触发更改事件使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！