Question

我有一个控制器操作，它将SQL查询结果传递给视图

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

该视图是一个注册页面，询问用户的电子邮件地址。我希望电子邮件地址在键入＆＃34; @＆＃34;后自动填充与其组织相关的域名。 - jquery.email-autocomplete.js促进了这一点 - 正在使用的输入字段的示例图像： here

大约有50个组织，它们存储在数据库表中，其结构如下：

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

我需要一种方法来动态地将组织对象中的电子邮件域转换为视图中的jquery代码：

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

因此，在渲染时，域的代码行必须类似于：

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

Answer 1

您需要控制器中的操作结果才能处理自动完成。类似的东西：

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

然后您可以从js中调用它：

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

Answer 2

这就是我最终做的事情

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

呈现为：

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

使用MVC / razor

2 个答案: