Installing JQuery in Visual Studio step by step

All the knowledge is out there, but for people new to jQuery it can be a challenge to make a more or less clean integration in Visual Studio. The key components are the nuget package manager and the script manager component, which often are described separately. Keep in mind there are multiple methods to get a valid jQuery installation, this is just a method that is both easy to install and maintain, and more or less connects with the “aspnet” way of doing things. The method described below uses nuget to install the needed packages for easy updating, and uses the script manager to expose jQuery in your programming environment.

Install the packages

Use the nuget packet manager or console to install the following packages:

• AspNet.ScriptManager.jQuery
• jQuery

Place a script manager

Place a script manager component on the page you want to use jqeury on, as shown below:

<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Name="jquery" />
    </Scripts>
</asp:ScriptManager>
<div>

Use JQuery

You can now freely use the jQuery functions in your web page, for example:

<div id="blok1" class="blok">
    This block will be static
</div>
                
<asp:Panel runat="server" ID="PanelFeedBackTest">
<div id="blok2" class="blok">
    This block will be fading
</div>                    
</asp:Panel>
        
<script type="text/javascript">
    $(document).ready(function() {
        $("#blok2").css("background-color", "lightgreen");
        $("#blok2").fadeOut(2000);
        $("#blok2").fadeIn(2000);
        $("#blok2").fadeOut(2000);
    });
</