Как заставить Telerik AutoComplete Box работать с использованием синтаксиса Razor в моем приложении ASP.NET MVC

Question

Я пытаюсь получить данные из определенного столбца в таблице базы данных для заполнения поля автозаполнения Telerik, используя синтаксис Razor Template в ASP.NET MVC3. Вот мой HTML-код:

@using Telerik.Web.Mvc.UI
@model IEnumerable<COOLTool.Models.Agency>

@{
   ViewBag.Title = "Index";
}

<h2 id="searchHeading2">Search</h2>
<br/>
@(Html.Telerik().AutoComplete()
   .BindTo(IEnumerable < COOLTool.Models.Agency > ViewData["CA_AgencyName"])
   .Render();       

)

Вот мой класс C #:

namespace COOLTool.Models

{ используя Систему; using System.Collections.Generic;

public partial class Agency
{
    public int CA_AgencyID { get; set; }
    public string CA_AgencyName { get; set; }
    public string CA_AgencyAcronym { get; set; }
    public string CA_AgencyAcronym_SOLID { get; set; }
    public string CA_AgencyHomePageURL { get; set; }
    public string CA_AgencyContact { get; set; }
    public string CA_AgencyCredentialType { get; set; }
    public string CA_AgencyStreetAddress1 { get; set; }
    public string CA_AgencyStreetAddress2 { get; set; }
    public string CA_AgencyCity { get; set; }
    public string CA_AgencyState { get; set; }
    public string CA_AgencyZip { get; set; }
    public string CA_AgencyCountry { get; set; }
    public string CA_AgencyPhonePrimary { get; set; }
    public Nullable<int> CA_AgencyPhonePrimaryExtension { get; set; }
    public string CA_AgencyPhoneSecondary { get; set; }
    public string CA_AgencyFax { get; set; }
    public System.DateTime CA_AgencyRecordAddedDate { get; set; }
    public string CA_AgencyRecordAddedUserID { get; set; }
    public System.DateTime CA_AgencyRecordUpdatedDate { get; set; }
    public string CA_AgencyRecordUpdatedUserID { get; set; }
    public int CA_AgencyStatus { get; set; }
    public bool CA_Active { get; set; }
    }
}

Answer 1

Я не уверен, что именно ваш вопрос, но судя по тому, с чем вы, скорее всего, столкнулись, по нескольким причинам.

Прежде всего, следует отметить, что автозаполнениекомпонент должен быть привязан к IEnumerable<string>, а не к IEnumerable вашего пользовательского объекта, как описано в этой статье документации .Это будет означать, что это: .BindTo(IEnumerable < COOLTool.Models.Agency > ViewData["CA_AgencyName"]) должно быть изменено на следующее: .BindTo(IEnumerable < string > ViewData["CA_AgencyName"]).

Теперь вам нужно убедиться, что вы действительно что-то сохраняете в своих ViewData под ключом «CA_AgencyName»,Если это не так, то это снова объясняет, почему вы сталкиваетесь с проблемами.В качестве примера у меня есть следующий ActionResult для представления под названием «Индекс»:

public ActionResult Index()
{
    List<Agency> myList = new List<Agency>();
    myList.Add(new Agency() { CA_AgencyName = "Name 1" });
    myList.Add(new Agency() { CA_AgencyName = "Name 2" });
    myList.Add(new Agency() { CA_AgencyName = "Different" });

    List<String> listToBind = new List<String>();

    foreach (var item in myList)
    {
        listToBind.Add(item.CA_AgencyName);
    }

    ViewData["CA_AgencyName"] = listToBind;

    return View();
}

Конечно, это просто фиктивные данные, но они дают вам общее представление.Теперь в моем представлении я только что сделал следующее:

@(Html.Telerik().AutoComplete().Name("Test").BindTo((IEnumerable<String>)ViewData["CA_AgencyName"]))

Обратите внимание, что, поскольку я использую @(...), я не вызываю явно .Render();, поскольку это должно использоваться только при использовании @{...}.

Все вышеперечисленное дает вам работающий компонент Telerik AutoComplete на вашей странице.

Answer 2

Это метод Jquery, который будет вызывать контроллер. Он возьмет первые три символа поиска и отправит его параметру контроллеру.

  $(document).ready(function () {
            $("#AutoComplete").keypress(function () {
                var title = $("#AutoComplete").val();
                var availableTags = [];
                if (title.length == 3) {
                    $.get("/Wk/GetTitle/" + title, function (data) {
                        var arr = jQuery.makeArray(data.split(','));
                        for (var i = 0; i < arr.length; i++) {
                            availableTags.push(arr[i]);
                        }
                        $("#AutoComplete").autocomplete({
                            source: availableTags
                        });
//                        $("#AutoComplete").select();
                    });

                }
            });
        });

Тогда это код контроллера.

 [HttpGet]
    public StringBuilder GetTitle(string inputString)
    {
        StringBuilder sb = new StringBuilder();
        List<string> title = new List<string>();
        int i = 0;
        string slug = RouteData.Values.Values.ElementAt(2).ToString();
        title = pageBL.GetTitleAutocomplete(slug);

        for (i = 0; i <= title.Count - 1; i++)
        {
            if (i != title.Count -1 )
                sb = sb.Append(title.ElementAt(i) + ",");
            else
                sb = sb.Append(title.ElementAt(i) );
        }
        return sb;
    }

Этот контроллер принимает параметр и возвращает желаемый результат в строителе строк.Формат For For: Индия, Индиана, Индонезия ... Jquery использует оператор и показывает его в поле поиска. Здесь #Autocomplete - текстовое поле, в котором выполняется поиск.проблема

Answer 3

Я могу дать вам код http://docs.jquery.com/Plugins/autocomplete "Автозаполнение Jquery" рабочий код. Если вам это нужно, ответьте мне