title: Issue passing value from textbox to jquery function and onto controller function
body: <p>I came across an issue with passing values to jQuery where I want to pass the value from a textbox. </p>
  
  <p>Here is the <code>.cshtml</code>:</p>
  
  <pre><code>@Html.TextBoxFor(m =&gt; m.OrderNumber, new { @class = "form-control", id = "orderNumber" })
  </code></pre>
  
  <p>My script:</p>
  
  <pre><code>function maintenance_tapped(e) {
      var data = $('#orderNumber').val();
  
      $("#SapPopUp")
          .dialog({
              width: 600,
              height: 420,
              model: true,
              buttons: {
                  "OK": function() {
                      $.ajax({
                          url: '@Url.Action("RetrieveOrder", "Home")',
                          data: data,
                          type: "POST"
                      }).done(function() {
                          $(this).dialog("close");
                      });
                  },
                  "Cancel": function() {
                      $(this).dialog("close");
                  }
              }
          });
  }
  </code></pre>
  
  <p>Code in my controller:</p>
  
  <pre><code>[HttpPost]
  public async Task&lt;ActionResult&gt; RetrieveOrder(string number)
  {
      if (_sapHelper == null)
      {
          _sapHelper = new Helper();
      }
  
      return View();
  }
  </code></pre>
  
  <p>My issue is that if I put a breakpoint in the <code>RetrieveOrder</code> function and I check the value of <code>number</code> i get <code>null</code>.</p>
  
  <p>Then if go into <code>Chrome-&gt;inspect element-&gt;Console</code> and type <code>$('#orderNumber').val()</code>, I get the value I entered into the textbox.</p>
  
  <p>It also seems like its not passing the value into the function.</p>