CODEWITHSUNDEEP
c#ajaxasp.net-mvckendo-ui
moris62
moris62

Reputation: 1045

pass a list to view to bind an autocomplete search box

The problem is, when the page loads I want the auto search to be bound, in order to do so, I have no idea I should use jsonresult or only action result does that?to point out the problem here is what I have done in my controller:

[HttpPost]
public JsonResult IndexSearch () {
    //List of cars            
    var CarList = (from d in DB.AccessinfoCars select new {

        Town = d.City_name,
            CarName = d.Car_name
    }).ToList ();

    return Json (CarList, JsonRequestBehavior.AllowGet);
}

In the above code, I don't know if should use actionResult or jsonResult to achieve what I want, and I should pass with viewBag or Ajax call?

In my View, I simply want to bind the following Autocomplete:

    @(Html.Kendo().AutoComplete()
                              .Name("CarName") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
                              .DataTextField("input") //Specify which property of the Product to be used by the AutoComplete.
                              .DataSource(source =>
                               {
                                  source.Read(read =>
                                  {
                                      read.Action("IndexSearch", "Overview"); //Set the Action and Controller names.
                                  })
                                  .ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
                               })
                            )

but to bind that how should I get the data?

Upvotes: 0

Views: 381

Answers (1)

evilGenius
evilGenius

Reputation: 1101

Ajax

[HttpPost] public JsonResult GetAutocomplete(string prefix) { var CarList=(from d in DB.AccessinfoCars select new { Town=d.City_name, CarName=d.Car_name }).ToList();

    return Json(CarList,JsonRequestBehavior.AllowGet);
}

razor 

 @(Html.Kendo().AutoComplete()
      .Name("productAutoComplete") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
      .DataTextField("input") //Specify which property of the Product to be used by the AutoComplete.
      .DataSource(source =>
       {
          source.Read(read =>
          {
               read.Action("GetAutocomplete", "yourControler"); //Set the Action and Controller names.
          })
          .ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
       })
    )

Model

public ActionResult Index()
{
    YourModel model = new YourModel();

    return View(model );
}

@model your modal

 @(Html.Kendo().AutoComplete()
        .Name("yourName") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
        .DataTextField("nameYourControl") //Specify which property of the Product to be used by the AutoComplete.
        .BindTo(Model) //Pass the list of Products to the AutoComplete.
        .Filter("contains") //Define the type of the filter, which AutoComplete will use.
    )

Upvotes: 1

Related Questions