ASP.NET Dropdown Count always returns 0

Question

In my asp.net page, I have Ajax method which makes call to API controller and gets value when user clicks the dropdownbox based on other condition. This helps to avoid page refresh.

ASP.NET Page Code

<script> 
    $('#<%= ddOtherLocation.ClientID %>').click(function (e) {                
        var postData = {
            deptid: $('#<%= ddLocation.ClientID %>').val()                         
        };

        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: 'path/GetEmployeeDept',
            data: postData,
            dataType: "json",
            success: function (Result) {
                $('#<%= ddOtherLocation.ClientID %>').empty();
                $('#<%= ddOtherAdLocation.ClientID %>').append($("<option value=0>Select</option>"));
                $.each(Result, function (key, value) {
                    $('#<%= ddOtherLocation.ClientID %>').append($("<option></option>").val(value.DeptID).html(value.DeptName));
                });
            },
            error: function (xhr, err) {
                alert("Error occured" + xhr.responseText);
            }
        });                   
        }
    });
</script>
<asp:UpdatePanel ID="upCustAd" runat="server">
    <Triggers>            
        <asp:PostBackTrigger ControlID="btnSave" />
    </Triggers>
    <ContentTemplate>
        <asp:DropDownList ID="ddOtherLocation"
             DataTextField="Text"
             DataValueField="Value"
             runat="server"
             EnableViewState="true"
             CssClass="dropdownheight"
             ClientIDMode="Static">
        </asp:DropDownList>
        ------
        -----
        <asp:Button ID="btnSave" Text="Submit" runat="server" Width="100px" OnClick="CreateSomeThing" />
    </ContentTemplate>
</asp:UpdatePanel>

API Controller Code

public class DeptController : ApiController
{
    public List<DeptInfo> GetEmployeeDept(string deptid)
    {
        .......
        return listofItems;
    }
}

When I submit the page, the dropdown always returns item count as 0 and selecteditem value as 0 in csharp codebehind page. Any issue in my approach?

Answer 1

Your url seems to lack the extension of the page...

$.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        **url: 'path/GetEmployeeDept',**
        data: postData,
        dataType: "json",
        success: function (Result) {
            $('#<%= ddOtherLocation.ClientID %>').empty();
            $('#<%= ddOtherAdLocation.ClientID %>').append($("<option value=0>Select</option>"));
            $.each(Result, function (key, value) {
                $('#<%= ddOtherLocation.ClientID %>').append($("<option></option>").val(value.DeptID).html(value.DeptName));
            });
        },
        error: function (xhr, err) {
            alert("Error occured" + xhr.responseText);
        }
    });

should it be like url: 'path/GetEmployeeDept.aspx' ?

Answer 2

1. Try to wrap your js with $(document).ready(function(){ ... your code ... }); Because looks like that DOM wasn't ready and your control with id ddOtherLocation.ClientID wasn't rendered.

2. The list items of DropDownList in server controls are stored in the ViewState and do not passed via postback. And in this case you have 0 items, because no items are stored in viewstate or was added to DropDownList during page load/init/etc.