Episerver 2つのドロップダウンリストが接続されました

Question

したがって、私はEpiserverのSelection Factoryを使用して2つのドロップダウンリストを作成しようとしています。しかし、私は何とかそれらを接続したい。国などの

何か - >地域、

は、私はDOJOを使用せずにいることを行うことができます方法はありますか？または私はそれを使用する必要がありますか？

[SelectOne(SelectionFactoryType = typeof(CustomCountryFactory))] 
    public string Country { get; set; } 

    [SelectOne(SelectionFactoryType = typeof(CustomCountryFactory1))] 
    public string Region{ get; set; } 



public class CustomCountryFactory : ISelectionFactory 
{ 
    public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata) 
    { 
     var languages = new List<SelectItem> 
     { 
      new SelectItem() { Text = "All", Value = "All" }, 
      new SelectItem() { Text = "Norway", Value = "Norway" }, 
      new SelectItem() { Text = "Sweden", Value = "Sweden" }, 
     }; 

     return languages; 
    } 
} 

私は何をすべきかわかりません。

Answer 1

同様の問題のためにEPiServer Worldにsolutionがあります。それは道場を大きく使います。実際に2つの別々のドロップダウンが必要な場合は、それを試すことができます。記事はここにアクセスできないだろうというときのためにアンダースHattestadによってコードの追加

：

class DependedItem : ISelectItem 
    { 
     public string Parent { get; set; } 
     public object Value { get; set; } 
     public int Level { get; set; } 
     public string Text { get; set; } 
     public string Name { get { return Text; } } 
    } 

    public class ContinentCountryRegionSelectionFactory : ISelectionFactory 
    { 
     public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata) 
     { 
      var _geolocationProviderBase = ServiceLocator.Current.GetInstance<GeolocationProviderBase>(); 
      var _localizationService = ServiceLocator.Current.GetInstance<LocalizationService>(); 
      var list = new List<ISelectItem>(); 
      foreach (var continentKey in _geolocationProviderBase.GetContinentCodes()) 
      { 
       var continent = new DependedItem() 
       { 
        Value = continentKey, 
        Parent = "", 
        Level=0, 
        Text = _localizationService.GetString("/shell/cms/visitorgroups/criteria/geographiclocation/continents/" + continentKey) 
       }; 
       list.Add(continent); 
       foreach (var countryKey in _geolocationProviderBase.GetCountryCodes(continentKey)) 
       { 
        var country = new DependedItem() 
        { 
         Value = continentKey+"-"+ countryKey, 
         Parent= continentKey, 
         Level=1, 
         Text = _localizationService.GetString("/shell/cms/visitorgroups/criteria/geographiclocation/countries/" + countryKey) 
        }; 

        list.Add(country); 

        foreach (var regionKey in _geolocationProviderBase.GetRegions(countryKey)) 
        { 
         var region = new DependedItem() 
         { 
          Value = continentKey + "-" + countryKey+"-"+ regionKey, 
          Parent= continentKey + "-" + countryKey, 
          Level=2, 
          Text = regionKey 
         }; 
         list.Add(region); 
        } 
       } 
      } 

      return list; 
     } 
    } 

/* 
Dojo widget for editing a list of strings. Also see property type PropertyStringList in /Models/Properties. 
*/ 

define([ 
    "dojo/_base/array", 
    "dojo/_base/connect", 
    "dojo/_base/declare", 
    "dojo/_base/lang", 

    "dijit/_CssStateMixin", 
    "dijit/_Widget", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 

    "dijit/form/TextBox", 

    "epi/epi", 
    "epi/shell/widget/_ValueRequiredMixin", 
    "dojo/store/Memory", 
    "dijit/form/FilteringSelect" 
], 
function (
    array, 
    connect, 
    declare, 
    lang, 

    _CssStateMixin, 
    _Widget, 
    _TemplatedMixin, 
    _WidgetsInTemplateMixin, 

    Textarea, 
    epi, 
    _ValueRequiredMixin, 

    Memory, 
    FilteringSelect 
) { 

    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], { 

     templateString: "<div class=\"dijitInline\">\ 
          <div data-dojo-attach-point=\"stateNode, tooltipNode\" >\ 
           <div data-dojo-attach-point=\"textBox\" type=\"hidden\" data-dojo-type=\"dijit.form.TextBox\"></div>\ 
          </div>\ 
          <div data-dojo-attach-point=\"inputLevel1\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"min-width: 300px;\">\ 
          </div>\ 
          <div data-dojo-attach-point=\"area2\" style=\"display:block;padding-left:30px;display:none;\">\ 
           <div data-dojo-attach-point=\"inputLevel2\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"min-width: 300px;\">\ 
           </div>\ 
           <div data-dojo-attach-point=\"area3\" style=\"display:block;padding-left:30px;display:none;\">\ 
            <div data-dojo-attach-point=\"inputLevel3\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"min-width: 300px\">\ 
            </div>\ 
           </div>\ 
          </div>\ 
         </div>", 
     intermediateChanges: false, 
     value: null, 
     allItemsStore: null, 
     selected: null, 
     onChange: function (value) { 
      // Event 
     }, 

     postCreate: function() { 
      // call base implementation 
      this.inherited(arguments); 

      // Init textarea and bind event 
      this.textBox.set("intermediateChanges", this.intermediateChanges); 
      this.connect(this.textBox, "onChange", this._onTextBoxChanged); 
      this._setUpStores(1); 
      this.selected = this._findSelected(""); 
      this.connect(this.inputLevel1, "onChange", this._onLevelBoxChanged1); 
      this.connect(this.inputLevel2, "onChange", this._onLevelBoxChanged2); 
      this.connect(this.inputLevel3, "onChange", this._onLevelBoxChanged3); 
     }, 
     postMixInProperties: function() { 
      this.inherited(arguments); 
      var test = this.selections; 

      this.allItemsStore = new Memory({ idProperty: "value", IsType: "Continent", data: this.selections }); 
     }, 
     isValid: function() { 
      return !this.required || (this.value.length > 0 && this.value!= ""); 
     }, 

     // Setter for value property 
     _setValueAttr: function (value) { 
      this._setValue(value, true,true); 
     }, 

     _setReadOnlyAttr: function (value) { 
      this._set("readOnly", value); 
      this.textBox.set("readOnly", value); 
     }, 

     _setIntermediateChangesAttr: function (value) { 
      this.textBox.set("intermediateChanges", value); 
      this._set("intermediateChanges", value); 
     }, 

     _onTextBoxChanged: function (value) { 
      this._setValue(value, false,false); 
     }, 
     _onLevelBoxChanged1: function (value) { 
      var me = this._findSelected(value); 
      //this.selected = this._findSelected(value); 
      if (this.selected.level1 != me.level1) { 
       this.selected = me; 
       this._setUpStores(2); 
       this._setValuesInDropDowns(); 
       this._setValue(value, true, false); 
      } else { 
       //this._setValue(value, true, false); 
      } 
     }, 
     _onLevelBoxChanged2: function (value) { 
      var me = this._findSelected(value); 
      if (this.selected.level2!=me.level2) 
      { 
       this.selected = me; 
       this._setUpStores(3); 
       this._setValuesInDropDowns(); 
       this._setValue(value, true, false); 
      } 
      //this._setUpStores(); 
      //this._setValue(value, true,false); 
     }, 
     _onLevelBoxChanged3: function (value) { 
      var me = this._findSelected(value); 
      if (this.selected.level3 != me.level3) { 
       this.selected = me; 
       //this._setUpStores(3); 
       this._setValuesInDropDowns(); 
       this._setValue(value, true, false); 
      } 
     }, 
     _findSelected: function (value) { 
      var result = { level1: "", level2: "", level3: "" }; 
      var item = this.allItemsStore.query({ value: value }); 

      if (item.length != 0) { 
       if (item[0].level == 2) { 
        result.level3 = item[0].value; 
        item = this.allItemsStore.query({ value: item[0].parent }); 
       } 
       if (item[0].level == 1) { 
        result.level2 = item[0].value; 
        item = this.allItemsStore.query({ value: item[0].parent }); 
       } 
       if (item[0].level == 0) { 
        result.level1 = item[0].value; 
       } 
      } 
      return result; 
     }, 
     _setValuesInDropDowns: function() { 
      this.inputLevel1.set("value", this.selected.level1); 
      this.inputLevel2.set("value", this.selected.level2); 
      this.inputLevel3.set("value", this.selected.level3); 
      this.area2.style.display=(this.selected.level1!="")?"block":"none"; 
      this.area3.style.display=(this.selected.level2!="")?"block":"none"; 
     }, 
     _setUpStores: function (level) { 
      if (level == 1 || level == 0) { 
       var level1 = this.allItemsStore.query({ level: 0 }); 
       var level1Store = new Memory({ idProperty: "value", data: level1 }); 
       this.inputLevel1.set("store", level1Store); 
      } 

      if ((level == 2 || level == 0) && this.selected.level1 != "") { 
       var level2 = this.allItemsStore.query({ level: 1, parent: this.selected.level1}); 
       var level2Store = new Memory({ idProperty: "value", data: level2 }); 
       this.inputLevel2.set("store", level2Store); 
      } 
      if ((level == 3 || level == 0) && this.selected.level2 != "") { 
       var level3 = this.allItemsStore.query({ level: 2, parent: this.selected.level2 }); 
       var level3Store = new Memory({ idProperty: "value", data: level3 }); 
       this.inputLevel3.set("store", level3Store); 
      } 



     }, 
     _setValue: function (value, updateTextbox,updateDropDown) { 
      if (updateDropDown) { 
       this.selected = this._findSelected(value); 
       this._setUpStores(0); 
       this._setValuesInDropDowns(); 
      } 
      if (this._started && epi.areEqual(this.value, value)) { 
       return; 
      } 

      // set value to this widget (and notify observers) 
      this._set("value", value); 

      // set value to textarea 
      if (updateTextbox) { 
       this.textBox.set("value", value); 

      } 


      if (this._started && this.validate()) { 
       // Trigger change event 
       this.onChange(value); 
      } 
     } 
    }); 
}); 

[ClientEditor(ClientEditingClass = "iterasite/editors/SelectAreaEditor", SelectionFactoryType = typeof(ContinentCountryRegionSelectionFactory))] 
public virtual string SelectArea { get; set; }