Installation

Install lookup package from nuget.

> Install-Package NonFactors.Lookup.Mvc6

Include lookup dialog partial view to your shared views folder, it can be found at:

Windows: %UserProfile%\.nuget\packages\NonFactors.Lookup.Mvc6\{version}\content\Views\
Linux/Mac: ~/.nuget/packages/NonFactors.Lookup.Mvc6/{version}/content/Views/

MVC views application

<Project name>
    Views
        Shared
+           MvcLookup
+               _Dialog.cshtml

Razor pages application

<Project name>
    Pages
+       MvcLookup
+           _Dialog.cshtml
                

Add lookup extensions to known namespaces in _ViewImports.cshtml

@using NonFactors.Mvc.Lookup;

@addTagHelper *, Mvc.Lookup.Core // Optional for tag helpers

Render lookup dialog's partial in the page.

<html>
    <body>
+       @Html.Partial("MvcLookup/_Dialog")

        @RenderBody()
    </body>
</html>

Include lookup stylesheet to your project and your page, it can be found at.

Windows: %UserProfile%\.nuget\packages\NonFactors.Lookup.Mvc6\{version}\content\css\mvc-lookup\
Linux/Mac: ~/.nuget/packages/NonFactors.Lookup.Mvc6/{version}/content/css/mvc-lookup/
<html>
    <head>
+       <link href="~/css/mvc-lookup/mvc-lookup.css" rel="stylesheet">
    </head>
    <body>
        @Html.Partial("MvcLookup/_Dialog")

        @RenderBody()
    </body>
</html>

Include lookup scripts to your project and your page, it can be found at.

Windows: %UserProfile%\.nuget\packages\NonFactors.Lookup.Mvc6\{version}\content\js\mvc-lookup\
Linux/Mac: ~/.nuget/packages/NonFactors.Lookup.Mvc6/{version}/content/js/mvc-lookup/
<html>
    <head>
        <link href="~/css/mvc-lookup/mvc-lookup.css" rel="stylesheet">
    </head>
    <body>
        @Html.Partial("MvcLookup/_Dialog")

        @RenderBody()

+       <script src="~/js/mvc-lookup/mvc-lookup.js"></script>
    </body>
</html>

Initialize lookup instances after rendering lookup html

<html>
    <head>
        <link href="~/css/mvc-lookup/mvc-lookup.css" rel="stylesheet">
    </head>
    <body>
        @Html.Partial("MvcLookup/_Dialog")

        @RenderBody()

        <script src="~/js/mvc-lookup/mvc-lookup.js"></script>
        <script>
+           document.querySelectorAll(".mvc-lookup").forEach(element => new MvcLookup(element));
        </script>
    </body>
</html>