selectedvalue of dropdown list wont update in asp:DropDownList using javascript and C#

Question

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (!String.IsNullOrEmpty(Request.QueryString["ApplicationTrackingID"]))
        {
            GetStatusIDByATID(Convert.ToInt32(Request.QueryString["ApplicationTrackingID"]));
        }
    }
    else
    {
        Master.SetPreviousPage(Master.GetMain());

        applicationTrackingID = Request.QueryString["atid"];
        jobTrackingID = Request.QueryString["jtid"];

        // Get Application status
        int.TryParse(applicationTrackingID, out appTrackingID);
        ApplicationSettings applicationStatus = new ApplicationSettings(appTrackingID);
        appStatus = applicationStatus.StatusCode; // get the full status code name

        // Get Job status
        int.TryParse(jobTrackingID, out jobTID);
        jobstatus = getJobStatusByJobTrackingId(jobTID);

        // Get Statement status using ATID
        statementStatus = getStatementStatusByApplicationTrackingID(appTrackingID);

        if (applicationTrackingID != null && jobTrackingID == "")
        {
            txtAppTrackingID_App.Text = applicationTrackingID;
            txtAppTrackingID_Stmt.Text = applicationTrackingID;
            ddlOldStatus_App.SelectedValue = appStatus.ToUpper();
            ddlOldStatus_Stmt.SelectedValue = appStatus.ToUpper();

            if (statementStatus != null)
            {
                ddlOldStatus_Stmt.SelectedValue = statementStatus.ToUpper();
            }
        }
        else if (applicationTrackingID != null && jobTrackingID != null)
        {
            txtAppTrackingID_App.Text = applicationTrackingID;
            txtJobTrackingID_Stmt.Text = jobTrackingID;
            txtJobTrackingID_Job.Text = jobTrackingID;

            // If the TID has run to job process 
            if ((jobstatus != "ERROR"))
            {
                // and is job is not in "ERROR" state
                ddlOldStatus_App.SelectedValue = appStatus.ToUpper();
                ddlOldStatus_Stmt.SelectedValue = jobstatus.ToUpper();
                ddlOldStatus_Job.SelectedValue = jobstatus.ToUpper();
            }
            else
            {
                // job is in "ERROR" state
                // Old ddls of all are set to the "ERROR" status of the job
                ddlOldStatus_App.SelectedValue = jobstatus.ToUpper();
                ddlOldStatus_Stmt.SelectedValue = jobstatus.ToUpper();
                ddlOldStatus_Job.SelectedValue = jobstatus.ToUpper();
            }
        }

        bindrgJobStatus();
    }
}


public void GetStatusIDByATID(int ApplicationTrackingID)
{
    using (SqlConnection sqlConnection = UTSqlConnection.GetSQLConnection("DynaBillDB"))
    {
        sqlConnection.Open();
        var sqlCommand = new SqlCommand("GetAppstatusByATID", sqlConnection);
        sqlCommand.CommandType = CommandType.StoredProcedure;
        SqlParameterCollection parameters = sqlCommand.Parameters;

        // Define the parameters used
        parameters.Add("@AppTrackingID", SqlDbType.Int).Direction = ParameterDirection.Input;
        parameters.Add("@AppStatus", SqlDbType.VarChar, 50).Direction = ParameterDirection.Output;

        // Populate the parameters
        parameters["@AppTrackingID"].Value = ApplicationTrackingID;

        sqlCommand.ExecuteNonQuery();

        string output = parameters["@AppStatus"].Value.ToString();
        ddlOldStatus_App.SelectedValue = output;
    }

    ddlOldStatus_App.SelectedValue = "AWAITING_DUPLICATE_FILE";
}

    <script type="text/JavaScript" src="Scripts/jquery-2.2.4.mis.js"></script>

<script type="text/javascript">
	function GetStatusIDByATID(val) {
		$.ajax({
			type: "GET",
			url: "ChangeProcessStatus.aspx?ApplicationTrackingID=" + val,
			contentType: "application/json",
			dataType: "json",
			Error: function (x, e) {
				alert("did not work");
			}
		});

		$('#ddlOldStatus_App').val("AWAITING_DUPLICATE_FILE");
	}
</script>

<div class="searchFormNoBox span12">
	<span>
		<label>App Tracking ID</label>
		<asp:TextBox ID="txtAppTrackingID_App" onblur="GetStatusIDByATID(this.value)" AutoPostBack="true" runat="server" Width="100px"></asp:TextBox>
	</span>
	<span>
		<label>Old Status</label>
		<asp:DropDownList ID="ddlOldStatus_App" AutoPostBack="true" EnableViewState="true" runat="server" Width="170px">
			<asp:ListItem Value="" Selected="True"></asp:ListItem>
			<asp:ListItem Value="AWAITING_CONF">AWAITING_CONF</asp:ListItem>
			<asp:ListItem Value="AWAITING_DUPLICATE_FILE">AWAITING_DUPLICATE_FILE</asp:ListItem>
			<asp:ListItem Value="CANCELLED">CANCELLED</asp:ListItem>
			<asp:ListItem Value="COMPLETE">COMPLETE</asp:ListItem>
			<asp:ListItem Value="CONFIRM_APPROVED">CONFIRM_APPROVED</asp:ListItem>
			<asp:ListItem Value="CONFIRM_REJECTED">CONFIRM_REJECTED</asp:ListItem>
			<asp:ListItem Value="COPY_FINISHED">COPY_FINISHED</asp:ListItem>
			<asp:ListItem Value="COPY_STARTED">COPY_STARTED</asp:ListItem>
			<asp:ListItem Value="DUPLICATE_FILE_APPROVED">DUPLICATE_FILE_APPROVED</asp:ListItem>
			<asp:ListItem Value="DUPLICATE_FILE_REJECTED">DUPLICATE_FILE_REJECTED</asp:ListItem>
			<asp:ListItem Value="EMAIL_READY">EMAIL_READY</asp:ListItem>
			<asp:ListItem Value="EMAIL_COMPLETE">EMAIL_COMPLETE</asp:ListItem>
			<asp:ListItem Value="ERROR">ERROR</asp:ListItem>
			<asp:ListItem Value="FILE_PROCESSING">FILE_PROCESSING</asp:ListItem>
			<asp:ListItem Value="FILE_READY">FILE_READY</asp:ListItem>
			<asp:ListItem Value="FILE_RECEIVED">FILE_RECEIVED</asp:ListItem>
			<asp:ListItem Value="HOLD">HOLD</asp:ListItem>
			<asp:ListItem Value="PROCESSING_APP">PROCESSING_APP</asp:ListItem>
			<asp:ListItem Value="PROCESSING_QC">PROCESSING_QC</asp:ListItem>
			<asp:ListItem Value="QUICKCHANGE_READY">QUICKCHANGE_READY</asp:ListItem>
			<asp:ListItem Value="READY">READY</asp:ListItem>
			<asp:ListItem Value="SCHEDULED">SCHEDULED</asp:ListItem>
			<asp:ListItem Value="WEBVIEW_READY">WEBVIEW_READY</asp:ListItem>
		</asp:DropDownList>
	</span>

I'm trying to get the drop down list selected value to be set to a certain value after its corresponding text box has lost focus. I'm not 100% sure what is happening. I know it's running page_load multiple times and in the end it is not setting the selected value.

You may notice, in the snippets of code I posted:

ddlOldStatus_App.SelectedValue = "AWAITING_DUPLICATE_FILE";

That is because I've already confirmed that the selected Value is being updated in the code (hovering over the SelectedValue in visual studio shows its new value changes to what is right of the = sign)

I'm focused on it actually visibly changing on the web page.

Win · Accepted Answer · 2017-12-27 21:43:53Z

0

What you are doing is calling the entire ASPX Page from client-side JavaScript.

ASP.NET Web Form is not designed that way like ASP.NET MVC or Web API. Instead, you need a static WebMethod like this -

[WebMethod]
public static string GetStatusIDByATID(int ApplicationTrackingID)
{
   ...
}

answered Dec 27, 2017 at 21:43

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hassan Mehdi Over a year ago

i took your advice and made the function a webmethod. thank you. just to update this did NOT fix the issue of the ddl not selecting

Win Over a year ago

You still need to change the URL to url: <%= ResolveUrl("~/ChangeProcessStatus.aspx/GetStatusIDByATID") %>, and use HTTPPOST with data: JSON.stringify({ApplicationTrackingID: val})

ADyson · Accepted Answer · 2017-12-27 21:46:57Z

0

It's running page_load multiple times because you set AutoPostBack="true" which causes it to post back to the server every time the textbox loses focus. See https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.autopostback(v=vs.110).aspx . You also have the same property set on the dropdown list, which will cause it to post back every time the selection changes.

Therefore your JS (and thus your ajax request) never gets chance to run before the page is posted back and the browser renders the fresh page from the server. If you want to do something using JavaScript when an event happens on your elements, then remove the AutoPostBack property, or set it to False.

BTW, not directly related, but making an ajax call to a .aspx page is not a good design, as these pages are designed for rendering whole pages to the browser, not returning data or HTML snippets. Your instruction ddlOldStatus_App.SelectedValue = "AWAITING_DUPLICATE_FILE"; within the C# GetStatusIDByATID method would never work anyway, as the ajax call does not update the page, and doesn't run in a full page rendering context. It might even throw an exception. You should use a separate webservice (e.g. a WebMethod or a .svc WCF HTTP data service) as the endpoint instead. I think perhaps you should also familiarise yourself more thoroughly with how AJAX works and the key concepts.

edited Dec 27, 2017 at 21:46

answered Dec 27, 2017 at 21:41

ADyson

62.9k16 gold badges87 silver badges100 bronze badges

5 Comments

Hassan Mehdi Over a year ago

Thankyou for the advice. i set autopostback to false for both the text box and dropdownlist. the drop down list is still not being set. do you have aby more suggestions?

ADyson Over a year ago

have you debugged your Javascript code to check it's executing? Also $('#ddlOldStatus_App') will not find the element, unless you've set ASP.NET to use static IDs. .NET generates unique IDs for your elements when rendering them to HTML so that it avoids clashes of server-side IDs - e.g. if you include a user control in the page, which could use the same server-side element ID within its context. $('<%=ddlOldStatus.ClientID %>') should find it, I think (this uses ASP.NET to inject the correct ID into the Javascript).

Hassan Mehdi Over a year ago

I assumed it was working because the C# function is executing when the textbox loses focus. and I believe onblur is a javascript event. also i updated the function to be a webmethod

ADyson Over a year ago

Don't assume, instead actually test and verify. Your browser has very sophisticated developer tools to help with JS debugging. Anyway yeah if it's executing the C# via the ajax call, then it should be running. Does my suggestion of how to capture the client-side ID help, or not?

ADyson Over a year ago

My bad, it should be $('#<%=ddlOldStatus.ClientID %>') - the # is still required to tell jQuery to select by ID

Collectives™ on Stack Overflow

selectedvalue of dropdown list wont update in asp:DropDownList using javascript and C#

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related