asp.net MVC autocomplete with Html.TextBoxFor

Question

I am modifying a preexisting application. I am trying to add the jquery autocomplete functionality. I have it working and calling the controller but the problem is the name attribute in the input field is "someClass.someMethod" so because I can't put this in the controller parameter like this, but still want to satisfy asp.net's Model Binding rules, what can I do?

Controller:

        public JsonResult GetPs(string pN, PSModel pS)
    {
        List<string> pNs = null;

        pNs= pS.PEntryBL.BusinessLayerPS.PS
                      .Where(x => x.Text.StartsWith(pN)).Select(y => y.Text).ToList();

        return Json(pNs, JsonRequestBehavior.AllowGet);
    }

View:

     $(function () {
         $("#autoCompletePNBox").autocomplete({
             source: '@Url.Action("GetPs", "PS", new {pS = @Model})'
         });
     });

In Form:

            @Html.Label("Scan PN:   ", new { @class = "DFont"})

        @Html.TextBoxFor(r => r.PEntryBL.PS, new { @class = "pageFont", id = "autoCompletePNBox" })

[Override the name attribute](http://stackoverflow.com/questions/6057865/asp-net-mvc-3-override-name-attribute-with-textboxfor). — Jasen, Dec 11 '15 at 17:52
When the correct name is found through autocomplete and then submitted that will screw up the Model Binding. — eaglei22, Dec 11 '15 at 17:54
Your json should come in this format [ { id:1, value: 'you value'} ] — RBoschini, Dec 11 '15 at 18:05
Jasen, PEntryBL is a model in the application and I want to store the name in the PS property. When I use: r => r.PEntryBL.PS in the TextBoxFor and view the source, Razor uses "PEntryBL.PS" for the name, and is looking for "PEntryBL.PS" in the controller to pass the value to. — eaglei22, Dec 11 '15 at 18:10
What is the best way to grab the input and pass it along with the autocomplete call to collect inside the controller? So instead of relying on Binding for the autocomplete function sake, but still leave the binding for the its original form intentions. Example: User inputs "m" and autocomplete is run, how can I capture "m" and receive it in the controller? Sorry, my jquery/javascript isn't very strong yet, so this may be a simple solution. — eaglei22, Dec 11 '15 at 18:14
Thanks RBoschini, I am not really sure what you're telling me to do, based off of what I am asking. Can you give an example? — eaglei22, Dec 11 '15 at 18:31

score 0 · Accepted Answer · edited May 23 '17 at 11:44

Using This Post

I was able to get it working by grabbing the value of the input field and passing it on each function call (or each time a user enters a character).

Now when the user selects the item from the autocomplete list, and selects submit then the frameworks form model binding behind the scenes will still work as originally implemented.

Here is the jquery code change:

      <script type="text/javascript">
          $(function () {
              var src = '@Url.Action("GetPs", "PS", new {pS = @Model})'
              $("#autoCompletePNBox").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          url: src,
                          dataType: "json",
                          data: {
                              pN: $("#autoCompletePNBox").val()
                          },
                          success: function (data) {
                              response(data);
                          }
                      });
                  }
              });
          });

I couldn't figure this out right away as my Jquery skills are not very strong. Hopefully this helps someone.

asp.net MVC autocomplete with Html.TextBoxFor

1 Answers1