Tech Junkie Blog - Real World Tutorials, Happy Coding!: End-to-End ASP.NET MVC : Add JQuery Library Using NuGet

Saturday, June 18, 2016

End-to-End ASP.NET MVC : Add JQuery Library Using NuGet

In the previous blog we've created an empty ASP.NET MVC  project.  It's a great starting point but, it's missing a lot things that we will need later.  In this blog we will add JQuery to the empty ASP.NET MVC  project that we've just created.

Step-By-Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"





3. In the search box on the right of NuGet window type "JQuery", the search result will be displayed, you will see that an old version is installed for the project.  Click on the "Update" button to update to the latest version as of this post which is 3.3.1.















4. Click on the "OK" button on the "Preview Changes" dialog
















5. Now the latest version of jQuery is installed


6.  Now you should see the JQuery scripts in the "Scripts" folder


7.  To use the JQuery .js script reference the jquery-3.3.1.min.js file with the following code between the <head> element
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

8. You can use the following code to test if JQuery is working in your ASP.NET MVC project
    <script>
    $(document).ready(alert("jquery is working"));
    </script>

9. So you can modify the "Index.cshtml" to have the following markup to test if JQuery is working or not, if JQuery is working you should get an alert box saying "jquery is working"
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        Hello World! 
    </div>
    <script>
    $(document).ready(alert("jquery is working"));
    </script>

</body>
</html>



Similar Posts:


20 comments:

  1. Its recommended that we use Bower Config to for client side dependencies

    ReplyDelete
  2. Thank you for the tutorial, so far works as expected

    ReplyDelete
  3. before running application ,please match the name of the file in script folder with the name in tagging you have added on cshtml view

    ReplyDelete
  4. This is not what I was looking for, but it helped thanks.

    ReplyDelete
  5. I'm not 100% sure but I think you should create bundles in "BundleConfig.cs" and then initialize them in your "_layout.cshtml".


    //create jquery bundle from files that are located in ~/scripts/ and start with jquery-
    bundles.Add(new ScriptBundle("~/bundles/jquery")
    .Include("~/Scripts/jquery-{version}.js"));

    //and then initialize the bundle at the bottom of your layout
    @Scripts.Render("~/bundles/jquery")

    ReplyDelete
  6. Thanks for the valuable information and insights you have so provided here... ring camera

    ReplyDelete
  7. composed language in the third thousand years BC. C. In any case, the distinctions in working strategies Cooperate Identity design

    ReplyDelete
  8. Your blogs are easily accessible and quite enlightening so keep doing the amazing work guys. Shock Wave Therapy

    ReplyDelete
  9. I would like to say that this blog really convinced me to do it! Thanks, very good post. youtube views

    ReplyDelete
  10. I feel extremely cheerful to have seen your site page and anticipate such a large number of all the more engaging circumstances perusing here. Much appreciated yet again for every one of the points of interest. ClassyPrice

    ReplyDelete
  11. I have perused your article, it is exceptionally enlightening and helpful for me.I respect the profitable information you offer in your articles. Thanks for posting it. Phone Price in Bangladesh

    ReplyDelete
  12. If closely examined, one code is for vascular and the other, nonvascular. New coders, however, may focus on the term not elsewhere classified and miss the important distinction between the two codes.ergonomic chair for back pain

    ReplyDelete
  13. Well, that’s the first time on your blog but I really like your post.

    I have my own blog where I post about E Scooter App Development and much more take a look.

    ReplyDelete
  14. Experience With My Roommates Girl friend
    Hi friends, I am Maxx not real name 24, with an athletic body type college sex video . I am a new reader of this site. I like many stories published in it. Today I want to share one of my sexual experiences which I enjoyed very much. It all started 4 months ago in Kolkata when I changed my job from Hyderabad to Kolkata. This is a very common thing in a BPO sector in the day of induction I met a cool guy Sunny, before long we became good friends.

    ReplyDelete
  15. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. situs judi online

    ReplyDelete
  16. I have perused your article, it is exceptionally enlightening and helpful for me.I respect the profitable information you offer in your articles. Thanks for posting it. Mobile Phone Price in Bangladesh

    ReplyDelete
  17. Discover the world of iphone 6 charger. Compare models, find more iPhone 6 power and iPhone 6 cable accessories and shop online.

    ReplyDelete
  18. It is safe to say that you are looking for the best touchscreen laptop under 300 in 2020? The correct method to buy tablets is through the online sites. There are various sites that include enormous measure of biggest screen tablets.

    ReplyDelete
  19. With the slide scanner, you can still have your old photos restored as long as you have the negatives. BEST SLIDE SCANNERS REVIEWS

    ReplyDelete

Search This Blog