Populate jquery list from SQL query result using MVC / razor

Question

I have a controller action which passes in a SQL query result to the view

    [HttpGet]
    [AllowAnonymous]
    public IActionResult Register(string returnUrl = null)
    {
        var viewModel = new RegisterViewModel
        {
            Organisations = _context.Organisations.ToList(),
        };
        ViewData["ReturnUrl"] = returnUrl;
        return View(viewModel);
    }

The view is a registration page which asks for the users email address. I want the email address to autofill with the domain relevant to their organisation after they type "@" - this is facilitated by jquery.email-autocomplete.js - Example image of input field in use: here

There are about 50 organisations and they are stored in a database table which is structured like:

ID | Name    | EmailDomain         
-----------------------------------
1    My Org    myorganisation.co.uk

I need a way to dynamically get the email domains from the organisation object into this bit of jquery code in the view:

<script>
$("#email").emailautocomplete({
  suggClass: "custom-classname", //default: "eac-sugg". your custom classname (optional)
  domains: ["example.com"] //additional domains (optional)
});
</script>

So when rendered, the line of code for domains needs to look something like:

domains: ["myorganisation.co.uk", "anotherorganisation.org.uk", "andanother.com"]

alexb · Accepted Answer · 2017-08-08 17:58:58Z

1

You need an action result in your controller to handle the autocomplete. Something like:

    public ActionResult AutocompleteEmail(string text)
    {
        var filteredItems = MethodToLookupDBValues(text);
        return Json(filteredItems, JsonRequestBehavior.AllowGet);
    }

You can then call it from js like so:

        $('#email').autocomplete({
            source: function (request, response) {
                $.getJSON('@Url.Action("AutocompleteEmail")', {
                    text: request.term
                }, response);
            },
            select: function (event, ui) {
                $('#selectedItem').val(ui.item.id);
            }
        });

answered Aug 8, 2017 at 17:58

alexb

2874 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

egmfrs Over a year ago

Thanks but not entirely sure how to implement. Would "source: " be where I put "domains: " in my case? Also I was hoping to make use of the organisations list already passed into the view to save another round trip to the database.

egmfrs · Accepted Answer · 2017-08-09 14:21:44Z

0

This is what I ended up doing

$("#email").emailautocomplete({
domains: [@foreach (var organisation in Model.Organisations)
             {
                @Html.Raw("\"") @organisation.EmailDomain 
                @Html.Raw("\", \r\n") 
             }
                @Html.Raw("]")
});

Which renders as:

$("#Email").emailautocomplete({
domains: ["domain1.gov.uk", 
"domain2.com", 
"domain3.gov.uk", 
"domain4.gov.uk", 
] 
});

answered Aug 9, 2017 at 14:21

egmfrs

1,3863 gold badges19 silver badges36 bronze badges

Collectives™ on Stack Overflow

Populate jquery list from SQL query result using MVC / razor

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related