Saturday, June 18, 2016
In this blog we will add the KnockoutJs JavaScript library to our MvcApp project. KnockoutJs is a great lightweight data binding library. Follow the steps below to add KnockoutJs to your ASP.NET MVC project.
Step-By-Step Instructions:
1. Right-click on the project's "References" node, then select "Manage NuGet Packages"
2. In right hand side type in "knockoutjs", then click on the "Install" button next to the knockoutjs package
4. In the "Scripts" folder you will see the knockout JavaScript files
5. Now that we have the knockoutjs files we need to add the files to the BundleConfig.cs file to register them
6. Open the BundleConfig.cs file in the "App_Start" folder type the following lines of code inside the RegisterBundles method, this tells MVC to include any files in the "Scripts" folder that starts with the string "knockout"
The entire code looks like the following up to this point in our project.
7. In the "Views" → "Shared" folder, open the "_Layout.cshtml" file and add the following code
If you press Ctrl+F5 to run the application and look at the browser source code you will see that the knockout js files have been added to the page
Step-By-Step Instructions:
1. Right-click on the project's "References" node, then select "Manage NuGet Packages"
2. In right hand side type in "knockoutjs", then click on the "Install" button next to the knockoutjs package
3. You should see a green checkmark after you finished adding the knockoutjs library to the MvcApp project.
4. In the "Scripts" folder you will see the knockout JavaScript files
5. Now that we have the knockoutjs files we need to add the files to the BundleConfig.cs file to register them
6. Open the BundleConfig.cs file in the "App_Start" folder type the following lines of code inside the RegisterBundles method, this tells MVC to include any files in the "Scripts" folder that starts with the string "knockout"
bundles.Add(new ScriptBundle("~/bundles/knockout").Include( "~/Scripts/knockout*")); BundleTable.EnableOptimizations = false; bundles.UseCdn = true;
The entire code looks like the following up to this point in our project.
using System.Web; using System.Web.Optimization; namespace MvcApp { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrap","https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js").Include("~/Scripts/bootstrap.js","~/Scripts/respond.js")); bundles.Add(new ScriptBundle("~/bundles/knockout").Include( "~/Scripts/knockout*")); bundles.Add(new StyleBundle("~/Content/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css").Include("~/Content/bootstrap.css")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Styles.css")); BundleTable.EnableOptimizations = false; bundles.UseCdn = true; } } }
7. In the "Views" → "Shared" folder, open the "_Layout.cshtml" file and add the following code
@RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/knockout")
If you press Ctrl+F5 to run the application and look at the browser source code you will see that the knockout js files have been added to the page
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
DevOps
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Linux Mint
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Software Development
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Unix
View
Web Forms
WildFly
XML
cshtml
githu
Are you wishing to purchase the Best Cheap BB guns? Well, everyone desires to buy because bb guns are the best for Airgun sports. People use these guns for target practice and training.
ReplyDeleteDo you wish to buy the best scope for AR 15 under $100? ? It is true that people loves to hunt wild animal. However, you must have a complete accessory for hunting. We know that the most used guns are AR 15.
ReplyDeleteThe exam with regard to wealthy outcomes allows you to exceed your own publicly obtainable page from the actual organized
ReplyDeletebest UI designers
They are incredibly professional in addition to reliable.
ReplyDeletedesign firms San Francisco
printed
ReplyDeletefloral
abstract
I'd like to take the power of thanking you for that specialized guidance I've constantly enjoyed viewing your blog.
ReplyDeletedesign agencies SF
Mua vé tại Aivivu, tham khảo
ReplyDeleteVé máy bay đi Mỹ
đăng ký bay từ mỹ về việt nam
vé máy bay từ canada về việt nam giá rẻ
khi nào mở lại đường bay nhật bản việt nam
bay từ hàn quốc về việt nam
Vé máy bay từ Đài Loan về Việt Nam
chuyến bay chuyên gia
It's a fantastic combination of creativity and time-saving. Put your time and money where it counts. You already spend too much time in front of the computer; adding more time to your assignment is not a good idea. Contact any online programming help service provider to complete your work from the comfort of your own home.
ReplyDeleteYou should take part in a contest for one of the best blogs on the web. I will recommend this site! 토토사이트
ReplyDeletesumitomo 82c
ReplyDeleteinno splicing machine
ReplyDeleteoxygen machine rental
ReplyDeleteoxygen machine
cpap machine rental
Mobile CRM
ReplyDeleteLow Cost HR Software
I am delighted to report that it is an interesting post to read. I learned something new from your article; you're doing an excellent job. Keep up the good work. Thank you so much for sharing. elechi amadi polytechnic post utme form
ReplyDeleteThe sketch is tasteful and your authored subject matter is important. It’s a useful and helpful update. A million thanks for sharing. plapoly(nsuk-affiliated) postgraduate admission form this year
ReplyDeletehttps://www.dotnetnoob.com/2012/09/security-through-http-response-headers.html?sc=1696938898659#c2181817878516324551
ReplyDeleteAgriculture land for sale in koovathur with arable soil, ideal for a variety of crops, ensuring a bountiful harvest year-round. The picturesque surroundings provide a serene backdrop, creating an idyllic setting for those seeking a peaceful retreat or a thriving agricultural enterprise. With its proximity to key transportation hubs and urban centers, this land offers the perfect blend of rural charm and modern convenience.
ReplyDeleteHome Renovation Contractors In Chennai
ReplyDeleteDiscover a diverse menu with Brahmin Catering Services in Nanganallur curated to suit various tastes and preferences, from exquisite appetizers to mouthwatering main courses and decadent desserts. Our skilled chefs use only the finest, freshest ingredients to create dishes that not only please the palate but also visually enchant. Whether you're hosting a corporate event, a wedding celebration, or a private gathering, our catering services are meticulously tailored to meet the audience's unique needs. Choose Sriram catering service for a culinary journey that goes beyond expectations, delivering excellence to your targeted audience and making every event a cherished memory.
ReplyDeleteOneplus mobile service center in chennai
ReplyDeleteOneplus mobile service center in alwarpet
Nice post mate, keep up the great work, just shared this with my friendz I also wanna talk about the best online metabolic weight loss doctor.
ReplyDelete