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
8. You can use the following code to test if JQuery is working in your ASP.NET MVC project
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"
Similar Posts:
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:
- End-to-End ASP.NET MVC : Create an ASP.NET MVC Empty Project
- ASP.NET MVC Empty Project: Add Bootstrap Library Using NuGet
- ASP.NET MVC Empty Project: Add JQuery UI Library Using NuGet
- ASP.NET MVC Empty Project : _ViewStart.cshtml The Default Layout
- ASP.NET MVC Empty Project : Adding BundleConfig From Scratch
Its recommended that we use Bower Config to for client side dependencies
ReplyDeleteThank you for the tutorial, so far works as expected
ReplyDeletebefore running application ,please match the name of the file in script folder with the name in tagging you have added on cshtml view
ReplyDeleteThis is not what I was looking for, but it helped thanks.
ReplyDeleteI'm not 100% sure but I think you should create bundles in "BundleConfig.cs" and then initialize them in your "_layout.cshtml".
ReplyDelete//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")