Get a C# function to trigger when no longer focusing on an asp:TextBox

Question

 <div id="pm-search" class="main-box-body-only min-padding clearfix">
                            <div class="searchFormNoBox span12">
                                <span>
                                    <label>App Tracking ID</label>
                                    <asp:TextBox ID="txtAppTrackingID_App" runat="server" Width="100px"  OnTextChanged="txtAppTrackingID_App_TextChanged" AutoPostBack="True"></asp:TextBox>
                                </span>
                                <span>
                                    <label>Old Status</label>
                                    <asp:DropDownList ID="ddlOldStatus_App" runat="server" AutoPostBack = "true" 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>

    protected void txtAppTrackingID_App_TextChanged(object sender, EventArgs e)
    {
        applicationTrackingID = txtAppTrackingID_App.Text;
        ApplicationSettings applicationStatus = new ApplicationSettings(appTrackingID);
        appStatus = applicationStatus.StatusCode; // get the full status code name

        ddlOldStatus_App.SelectedValue = appStatus;

    }

what i want to happen, is that the above function will run, when the text box "txtAppTrackingID_App" is no longer the focus.

the purpose of the function is to select a value from the dropdown menu that matches the status of an object with that ID

Changing focus in the browser is a client event. Your server code only runs until the page is rendered. There's no direct way to handle this event in server code. You'll need to write JavaScript. You could write code to force a postback of the entire page, but that may be overkill. You could write code to do an Ajax post to the server, get a response, and update the client code accordingly. But it's probably easiest by far if you do the whole thing on the client in JavaScript. — Scott Hannen, Dec 20 '17 at 23:55
do you have any tips on how to implement this with javascript? ive never done javascript before but i think it would be better for my purposes. — Hassan Mehdi, Dec 21 '17 at 14:38
The good news is that if you've never used JavaScript, something this small is a decent place to start. You'll need to assign an event handler for when a given element loses focus, and in that event handler set the selected value of your `select`. The bad news is that it's a little too much to do from scratch in a SO answer. — Scott Hannen, Dec 21 '17 at 19:06

Joel Coehoorn · Answer 1 · 2017-12-21T21:00:19.777

Remember: The textbox in your server code is only dealing with a temporary construct that will eventually be used to render HTML for the browser to work with. The actual textbox only exists in the browser, and not on the server. The only way for the C# server code to run when a UI change like this occurs is to post back to the server.

In case it's not clear, that means the browser sends a new HTTP request to the server, destroys the local DOM, and waits for an HTTP response so it construct a new DOM and render it to the screen. This means the server is generating a completely new set of HTML for the entire page... it's not just running that one function.

Is that really what you want to happen? Most of the time, you really want to handle this work entirely in javascript.

i defnitely want this to be handled client side. i have no experience with javascript. i created a webmethod that will use sql to grab the information i need based on the trackingID. would the code snippet posted by Objectively C work for what i want? — Hassan Mehdi, Dec 21 '17 at 18:19

score 0 · Answer 2 · answered Dec 21 '17 at 16:50

0

Add the following to your view.

<script type="text/javascript">
    $("#txtAppTrackingID_App").blur(function () {
        $.post("/controller/method" + id);
    });
</script>

answered Dec 21 '17 at 16:50

objectively C

960
9
25

1

https://stackoverflow.com/questions/3863927/lost-focus-method-for-asp-net-textbox and https://stackoverflow.com/questions/10949937/how-to-call-a-controller-method-from-javascript – objectively C Dec 21 '17 at 16:51
1

The question relates to webforms. There is no view, and doing Ajax is different with webforms. If someone isn't familiar with this then an MVC-specific answer could add confusion. – Scott Hannen Dec 21 '17 at 19:09

score 0 · Answer 3 · answered Dec 21 '17 at 21:13

Here is how I've done it in WebForms, and it sounds like you're part of the way there (using WebMethod).

Create your WebMethod in PageNameGoesHere.aspx:

[WebMethod]
public static bool DoSomething(int id)
{
  // do something on id
}

Create the JavaScript to call it via Ajax (untested for blur, for mine it was on click). What objectively C leverages for the blur event may be correct here, not sure:

$('form').on('blur', '#txtAppTrackingID', function() {
  var data = new Object();
  data['id'] = 12;

  $.ajax({
    url: 'PageNameGoesHere.aspx/DoSomething',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data),
    success: function (response) {
      // whatever you want to do on success.
    },
    error: function (response) {
      // probably some messaging something went wrong.
    }
  })
});

Get a C# function to trigger when no longer focusing on an asp:TextBox

3 Answers3