Looking for a working example using a MVC Action method

11 posts, 0 answers
  1. Evert
    Evert avatar
    4 posts
    Member since:
    Dec 2011

    Posted 21 Dec 2011 Link to this post

    I am struggling getting the following to work:

    <div>

        <input id="searchSomething" />

    </div>

    <script type='text/javascript'>

        $(document).ready(function () {

            $("#searchSomething").kendoAutoComplete({

                minLength: 3,

                dataTextField: "Name",

                dataValueField: "Id",

                dataSource: {

                    transport: {

                        read: "Service/Search",

                        dialect: function (data) {

                            return { wildcard: $("#searchSomething").val() };

                        }

                    }

                }

            });

        });

    </script>


     Action method:

      public class ServiceController : Controller

        {

            public ActionResult Search(string wildcard)

            {

                return Something;

            }

        }


    My problems are:

    1. wildcard is always null.

    NOTE 1.1: By the way, the action method 'Search' is correctly called (of course after typing 3 characters)!
    NOTE 1.2: If I directly call the action method from the browser the wildcard is correctly filled.
     
    2. what should the ActionResult return?

    In other words I am looking for a working example.

    Thanks for any help!
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 22 Dec 2011 Link to this post

    Hello,

    The dialect setting has been renamed to parameterMap hence the problem. 

     In your action method you need to return JSON:

    public ActionResult Search(string wildcard)
    {
        var result = new[] { wildcard + "1", wildcard + "2" };
     
     
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    Find attached a running sample project.

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Evert
    Evert avatar
    4 posts
    Member since:
    Dec 2011

    Posted 22 Dec 2011 Link to this post

    Thank you very much, this works!!!

    A related question:
    Is it possible to embed with every text item a related value too, not visible to the user? The socalled Data/Text item combination.

    Evert 
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 22 Dec 2011 Link to this post

    Hi,

     You need to use a different widget to do this - try a combobox or a dropdownlist. The autocomplete is just a simple textbox which suggests a list of values to the user.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Evert
    Evert avatar
    4 posts
    Member since:
    Dec 2011

    Posted 22 Dec 2011 Link to this post

    Ok thank you!

    Sorry I did not ask this in my first posting, because I am now struggling with the server side paging stuff.
    I have added now:

                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,   

    But how do I get/read the values of a skip/take on the server? I saw the OData examples but could not transform it for my situation

    Thanks again for any help!


    By the way:
    I am transforming my ASP.NET Forms based site for a customer to a MVC 3 site based on your framework. An now I am amazed how simple things get! This is the way to code I think!.

  7. Evert
    Evert avatar
    4 posts
    Member since:
    Dec 2011

    Posted 22 Dec 2011 Link to this post

    An update: after browsing the fora, I now have changed my script to:

    <div style="margin-top: 0px; margin-left: 70px">

        <input id="searchSomething" style="width: 300px" />

    </div>

    <script type='text/javascript'>

        $(document).ready(function () {

            $("#searchSomething").kendoAutoComplete({

                minLength: 3,

                dataSource: {

                    transport: {

                        read: "Service/Search",

                        parameterMap: function (data) {

                            return {

                                wildcard: $("#searchSomething").val(),

                                take: data.take,

                                skip: data.skip                            

                            };

                        }

                    },

                    serverFiltering: true,

                    serverPaging: true,

                    pageSize: 10

                }

            });

        });

    </script>


    My MVC 3 Action method is:

      public ActionResult Search(string wildcard, int take, int skip)

      {

         

           var pagedResults = SomeService.Find(wildCard, skip, take);

           return Json(pagedResults(pr => pr.Id), JsonRequestBehavior.AllowGet);

      }



    As you can see I have added the skip and take. This seems to work: the very first call I get a 0 for skip and an expected 10 for take. I was hoping when scrolling down though the search results inside the autocomplete box (using the cursor keys or page down), automatically a new call would be made with skip 10 and take 10. Am I misinterpreting something?

    Best regards,

    Evert
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Dec 2011 Link to this post

    Hi,

     Currently the autocomplete will not make additional requests when scrolling. It will always load as many items as specified by the pageSize of the datasource.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Philip
    Philip avatar
    8 posts
    Member since:
    Jun 2011

    Posted 31 Dec 2011 Link to this post

    Dear Atanas,

    I tested this attached project and it doesn't seem to work.

    First time I enter 3 characters, it brings the options. This is fine.

    When I then enter a completely different set of characters I get nothing.

    Then I enter the originally entered characters and I get results again.

    It seems to be caching this. Do you know what's wrong?

    Kind regards
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Jan 2012 Link to this post

    Hello,

     Yes, the autocomplete is configured for client-side filtering in this example. This is the reason the action method is hit only once. Here is how to enable sever-side filtering:

    $("#searchSomething").kendoAutoComplete({
                minLength: 3,
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: "Home/Search",
                        parameterMap: function (data) {
                            return { wildcard: $("#searchSomething").val() };
                        }
                    }
                }
            });

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Kesavan
    Kesavan avatar
    2 posts
    Member since:
    Dec 2013

    Posted 05 Mar 2014 in reply to Atanas Korchev Link to this post

    Hi Atanas,

    Can you please send me the working copy of the example, having autocomplete with serverfiltering and Paging,
    I am struggling to work the same.
    my email id : kesavan.subramani@ibs.net

    I have attached the sample code which I have tried. 

    Thanks & Regards
    Kesavan
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 05 Mar 2014 Link to this post

    Hello,

    The sample application that ships with Telerik UI for ASP.NET MVC includes such an example out of the box. 

    View:

    Areas\razor\Views\web\autocomplete\serverfiltering.cshtml

    Controller:

    Controllers\HomeController.cs (the GetProducts method).

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready