2009-11-27 35 views
0

在我的MVC應用程序中,我正在使用ajax下拉列表和ajax Cascading下拉列表,我想編寫級聯下拉列表的onChange事件,請告訴我該怎麼做。我將如何調用ajax下拉列表的on change事件?

我發佈了我正在使用的視圖頁面以及創建級聯dropdownlist的js文件。請告訴我所有需要進行更改的位置。

的視圖是如下

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Index1</title> 

    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
    <script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script> 
    <script type="text/javascript" src="../../Scripts/CascadingDropDownList.js"></script> 
</head> 
<body> 


    <div> 

    <label for="Makes">Car Make:</label> 
    <%= Html.DropDownList("Makes")%> 

    &nbsp;&nbsp; 

    <label for="Makes">Car Model:</label>  
    <%= Html.CascadingDropDownList("Models", "Makes")%> 
     <br /> 
     <%=Html.TextBox ("id",ViewData ["id"]) %> 
    </div> 
</body> 
</html> 

其中正在形成的級聯下拉列表中的JavaScript:

public static class JavaScriptExtensions 
{ 
    public static string CascadingDropDownList(this HtmlHelper helper, string name, string associatedDropDownList) 
    { 
     var sb = new StringBuilder(); 

     // render select tag 
     sb.AppendFormat("<select name='{0}' id='{0}'></select>", name); 
     sb.AppendLine(); 

     // render data array 
     sb.AppendLine("<script type='text/javascript'>"); 
     var data = (CascadingSelectList)helper.ViewDataContainer.ViewData[name]; 
     var listItems = data.GetListItems(); 
     var colArray = new List<string>(); 
     foreach (var item in listItems) 
      colArray.Add(String.Format("{{key:'{0}',value:'{1}',text:'{2}'}}", item.Key, item.Value, item.Text)); 
     var jsArray = String.Join(",", colArray.ToArray()); 
     sb.AppendFormat("$get('{0}').allOptions=[{1}];", name, jsArray); 
     sb.AppendLine(); 
     sb.AppendFormat("$addHandler($get('{0}'), 'change', Function.createCallback(bindDropDownList, $get('{1}')));", associatedDropDownList, name); 
     sb.AppendLine(); 
     sb.AppendLine("</script>"); 

     return sb.ToString(); 

    } 
} 

public class CascadingSelectList 
{ 
    private IEnumerable _items; 
    private string _dataKeyField; 
    private string _dataValueField; 
    private string _dataTextField; 

    public CascadingSelectList(IEnumerable items, string dataKeyField, string dataValueField, string dataTextField) 
    { 
     _items = items; 
     _dataKeyField = dataKeyField; 
     _dataValueField = dataValueField; 
     _dataTextField = dataTextField; 
    } 

    public List<CascadingListItem> GetListItems() 
    { 
     var listItems = new List<CascadingListItem>(); 
     foreach (var item in _items) 
     { 
      var key = DataBinder.GetPropertyValue(item, _dataKeyField).ToString(); 
      var value = DataBinder.GetPropertyValue(item, _dataValueField).ToString(); 
      var text = DataBinder.GetPropertyValue(item, _dataTextField).ToString(); 
      listItems.Add(new CascadingListItem(key, value, text)); 
     } 
     return listItems; 
    } 
} 

public class CascadingListItem 
{ 
    public CascadingListItem(string key, string value, string text) 
    { 
     this.Key = key; 
     this.Value = value; 
     this.Text = text; 
    } 

    public string Key { get; set; } 
    public string Value { get; set; } 
    public string Text { get; set; } 
} 

回答

0

你應該註冊該應用程序初始化時的控制。這是您必須通過CascadingDropDownList擴展方法在頁面中呈現的內容。

Sys.Application.add_init(function() { 
    $create(NameSpace.ClassName, null, null, null, $get("id")); 
}); 

Type.registerNamespace("NameSpace"); 

NameSpace.ClassName = function(element) { 
    NameSpace.ClassName.initializeBase(this, [element]); 
} 

NameSpace.ClassName.prototype = { 

    initialize: function() { 
     NameSpace.ClassName.callBaseMethod(this, "initialize"); 
     $addHandler(this.get_element(), "change", Function.createDelegate(this, onChange)); 
    }, 

    dispose: function() { 
     NameSpace.ClassName.callBaseMethod(this, "dispose"); 
     $removeHandler(this.get_element(), "change", Function.createDelegate(this, onChange)); 
    }, 

    onChange: function() { 
     // Do somethings... 
    } 

} 

NameSpace.ClassName.registerClass(NameSpace.ClassName, Sys.UI.Control); 

上面的代碼段示出了如何添加處理程序change事件。