skip to Main Content

I have a new project and decided to go with c# .net 6 MVC in VS2022…

In may old projects this code works flawless.

@section Scripts
{
<script type="text/javascript">
        $("#Klijent_Name").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("SearchKlijenti")",
                    type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.label, value: item.label, id: item.id };
                    }))
                }
            })
    },
        minLength: 1,
    select: function (event, ui) {
        $("#KlijentId").val(ui.item.id);
        $("#KlijentLabel").html(ui.item.label);
        $("#SearchKupac").val("");
        return false;
    }
    });
</script>
}

and latest variation of controller endpoint:

public JsonResult SearchKlijenti(string term)
    {
        var klijentVM = _klijent.Search(term);
        if (klijentVM != null)
        {
            var items = klijentVM.Select(x => new { id = x.KlijentId, label = x.FriendlyName });
            return new JsonResult(Ok(items));
        }
        return new JsonResult(Ok());
    }

Using latest jQuery 3.6.1, and bootstrap 5.2.0. Tried using jquery-ui.js, jquery.unobtrusive-ajax.js…

Problem is that the call is not triggered, or not finding it’s way to controller action. Have tried putting alert(); and omitting data manipulation and calls, but still nothing. When testing jQuery:

$("SearchKupac").keyup(function() {
            alert();
    });

works.

Tried to debug using Firefox, but either I don’t know to use it, or the call is not triggered.

I don’t know where and what to look anymore…

EDIT: Here is also HTML snippet

<label asp-for="Klijent.Name">Ime</label>
<input class="form-control ajax" asp-for="Klijent.Name" />
<span asp-validation-for="Klijent.Name" class="text-danger"></span>

I also tried selecting with $("input.ajax")… Tried double and single quotes. Bare in mind, this is a working code from MVC 5 project. It doesn’t work in new project

2

Answers


  1. Chosen as BEST ANSWER

    So Firefox developer tool was of no help. Crome developer tool find an error. It was not apparent immediately, but the jquery-ui.js (of version 1.13.2 in my case) resolved the issue.

    <script src="~/js/jquery-ui-1.13.2/jquery-ui.min.js"></script>
    

    There was also an issue in controller. it has to be of type JsonResult and return Json(items) not Json(Ok(items))

    public JsonResult SearchKlijenti(string term)
        {
            var klijentVM = _klijent.Search(term);
            if (klijentVM != null)
            {
                var items = klijentVM.Select(x => new 
                { 
                    id = x.KlijentId,
                    name = string.IsNullOrEmpty(x.Name) ? " " : x.Name,
                    friendly = string.IsNullOrEmpty(x.FriendlyName) ? " " : x.FriendlyName,
                    person = string.IsNullOrEmpty(x.PersonName) ? " " : x.PersonName,
                    tel = string.IsNullOrEmpty(x.Contact) ? " " : x.Contact,
                    mail = string.IsNullOrEmpty(x.Mail) ? " " : x.Mail,
                    oib = string.IsNullOrEmpty(x.OIB) ? " " : x.OIB,
                    adresa = string.IsNullOrEmpty(x.Adress) ? " " : x.Adress,
                });
                return Json(items);
            }
            return Json(null);
        }
    

    And for completeness, here is my script:

    @section Scripts
    {
    <script type="text/javascript">
        $("input.ajax").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("SearchKlijenti")",
                    type: "GET",
                    dataType: "json",
                    data: { term: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.friendly,
                                value: item.friendly,
                                id: item.id, 
                                name: item.name,
                                friendly: item.friendly,
                                person: item.person,
                                tel: item.tel, 
                                mail: item.mail, 
                                oib: item.oib, 
                                adresa: item.adresa
                                 };
                        }))
                    }
                })
            },
            minLength: 1,
            select: function (event, ui) {
                $("#Klijent_KlijentId").val(ui.item.id);
                $("#Klijent_KlijentName").val(ui.item.name)
                $("#Klijent_FriendlyName").val(ui.item.label)
                $("#Klijent_OIB").val(ui.item.oib)
                $("#Klijent_PersonName").val(ui.item.person)
                $("#Klijent_Contact").val(ui.item.tel)
                $("#Klijent_Mail").val(ui.item.mail)
                $("#Klijent_Adress").val(ui.item.adresa)
                return false;
            }
        })
    </script>
    

    }

    Did not yet test return Json(null), but that is not part of this exercise :)


  2. If you want to use keyup event,here is a demo:

    <input id="SearchKupac" />
    

    js:

    $("#SearchKupac").keyup(function() {
                alert();
        });
    

    If the id of input is SearchKupac,you need to use $("#SearchKupac") in js.Also,you can use $("#SearchKupac") with autocomplete.

    @section Scripts
    {
    <script type="text/javascript">
            $("#SearchKupac").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "@Url.Action("SearchKlijenti")",
                        type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.label, value: item.label, id: item.id };
                        }))
                    }
                })
        },
            minLength: 1,
        select: function (event, ui) {
            $("#KlijentId").val(ui.item.id);
            $("#KlijentLabel").html(ui.item.label);
            $("#SearchKupac").val("");
            return false;
        }
        });
    </script>
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search