我如何调用ajax下拉列表的on change事件？

In my MVC application I am using an ajax dropdownlist and an ajax Cascading dropdownlist I want to write the onChange event of the cascading dropdownlist please tell me what shall I do.

在我的MVC应用程序中，我使用ajax下拉列表和ajax Cascading下拉列表我想编写级联下拉列表的onChange事件，请告诉我该怎么办。

I am posting the view page that I am using and the js file that creates the cascading dropdownlist.Please tell me where all the places I need to do the changes.

我发布了我正在使用的视图页面以及创建级联下拉列表的js文件。请告诉我所有需要进行更改的地方。

The view Page is as follows

视图页面如下

<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>

The javascript where the cascading dropdown list is being formed:

正在形成级联下拉列表的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; }
}

1 个解决方案

#1

You should register the control during the application initialization. It's what you have to render in the page via CascadingDropDownList extension method.

您应该在应用程序初始化期间注册控件。这是你必须通过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);

The above code snippet illustrates how to add an handler for change event.

上面的代码片段说明了如何为change事件添加处理程序。

#1