开发者

JQuery autoSuggest Plugin usage with asp.net mvc

I've been trying to use this plugin -> http://code.drewwilson.com/entry/autosuggest-jquery-plugin (broken link, see github), but i've been having some problems.

Here's what my view looks like.

<span>
    <label for="registrars">Registrar</label>
    <input id="registrars" type="text" name="registrars" />
</span>

<script type="text/javascript">
         $(function () {

              var data = { items: @Html.Action("GetRegistrars", new { area = "Registrar", controller = "Home", organizationId = "0007511"}) };
         $("#registrars").autoSuggest(data.items, { selectedItemProp: "name", searchObjProps: "name" });

         });
    </script>

Here's my controller

[HttpGet]
    public ActionResult GetRegistrars(string organizationId)
    {
        var registrars = _registrationService.GetRegistrarBy(r => r.Id== organizationId)
            .Select(s => new { 
                    id = s.ID,
                   name = s.Name
            }).ToList();

        return new JsonResult
        {
            Data = registrars,
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            ContentType = "application/json"
        };

    }

When I browse to the view this is contained on instead of seeing the page i see the raw html for the entire view.

By the way when i browse to the url http://localhost/Registrar/Home/GetRegistrar?organizationId=0007511 here's what i get back.

[{"id":"000641","name":"TELSER, KAREN L"},{"id":"001195","name":"ALLRED, NANCY J"},{"id":"001196","name":"ANDERSON, NANC开发者_Go百科Y L"},{"id":"001197","name":"BRENNER, SUSAN RICH"},{"id":"001198","name":"BRUGGER, BETTY O"},{"id":"001200","name":"ELSASS, JUDITH W"}]

Thanks for any help!


I use it a little differently...This may work for you too. Instead of trying to render out all of the Registrars onto the page in an array and then getting the autosuggest work off that array, I pass it the URL to an action method that returns Json data..

In this example im using a Url Helper to build the Url, but you could just hard code it if you want.

      $(document).ready(function () {
         $("#autosuggest").autoSuggest(
                     "@Url.Blogging().Posts().FindCategories()",
                    {   
                    minChars: 2,
                    selectedItemProp: "name",
                    searchObjProps: "name",
                    asHtmlID: 'Categories' 
                    }
            );
    }); 

Here is the JsonResult that brings back the data.

    public JsonResult FindCategories(string q)
    {
        var results = Services.Post.FindCategories(q);
        var model = Mapper.Map<IEnumerable<Category>, IEnumerable<AutoSuggestViewModel>>(results);
        return Json(model, JsonRequestBehavior.AllowGet);
    }

Hope this helps.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜