Ajax in MVC 6 - making search function

HerGiz 0
Viewed 35

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

asp.net-ajax asp.net-core-6.0 asp.net-core-mvc jquery javascript
2 Answers

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>
}
Yiyi You0

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 :)

HerGiz0
Related