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" })

When the correct name is found through autocomplete and then submitted that will screw up the Model Binding. — eaglei22
– eaglei22, Commented Dec 11, 2015 at 17:54
Your json should come in this format [ { id:1, value: 'you value'} ] — RBoschini
– RBoschini, Commented Dec 11, 2015 at 18:05

Community · Accepted Answer · 2017-05-23 11:44:42Z

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.

Collectives™ on Stack Overflow

asp.net MVC autocomplete with Html.TextBoxFor

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related