title: Get the ID of MVC textbox to send to Ajax
body: <p>I need to separate my MVC view with jQuery that is in the top of the page. I am not sure what should I use instead of these lines:</p>
  
  <p>This is data that is pass to Ajax call.</p>
  
  <pre><code> var data = {
              '@Html.IdFor(model =&gt; model.SearchMethod)': searchMethod,
              '@Html.IdFor(model =&gt; model.FirstName)': firstName,
              '@Html.IdFor(model =&gt; model.LastName)': lastName
          };
  </code></pre>
  
  <p>These are my textboxes in MVC:</p>
  
  <pre><code> @Html.DropDownListFor(model =&gt; model.SearchMethod, Model.AvailableSearchMethods, new { onchange = "toggleDIvDisplay(this.value)", id = "SearchMethod" })
  
   @Html.TextBoxFor(model =&gt; model.FirstName, new { id = "FirstName" })
   @Html.TextBoxFor(model =&gt; model.LastName, new { id = "LastName" })
  </code></pre>
  
  <p>I try this but it is not working. (it does not find any record as I thing can't get the value of the textboxed correctly.</p>
  
  <pre><code>        var data = {
              '$("#SearchMethod").val()': searchMethod,
              '$("#FirstName").val()': firstName,
              '$("#LastName").val()': lastName 
          };
  </code></pre>
  
  <p>and this is my complete Ajax call that is working when I use Html.IdFor.</p>
  
  <pre><code> $.ajax({
              url: '@Url.Action("GetCustomer", "Doc")',
  
              type: 'POST',
              data: data,
              dataType: 'json',
              success: function (data) {
  
                  if (data &amp;&amp; data.data) {
                      $.unblockUI();
                      renderResults(data.data);
  
                  }
  </code></pre>