Tech Junkie Blog - Real World Tutorials, Happy Coding!: ASP.NET MVC 5 From Scratch : Add KnockoutJs to Project With NuGet

Saturday, June 18, 2016

ASP.NET MVC 5 From Scratch : Add KnockoutJs to Project With NuGet

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


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
 

18 comments:

  1. 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.

    ReplyDelete
  2. Do 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.

    ReplyDelete
  3. The exam with regard to wealthy outcomes allows you to exceed your own publicly obtainable page from the actual organized
    best UI designers

    ReplyDelete
  4. They are incredibly professional in addition to reliable.
    design firms San Francisco

    ReplyDelete
  5. I'd like to take the power of thanking you for that specialized guidance I've constantly enjoyed viewing your blog.
    design agencies SF

    ReplyDelete
  6. 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.

    ReplyDelete
  7. You should take part in a contest for one of the best blogs on the web. I will recommend this site! 토토사이트

    ReplyDelete
  8. 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

    ReplyDelete
  9. The 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

    ReplyDelete
  10. When it comes to luxury windows, Quartz Luxury Windows is my go-to choice. Check out their website, quartzluxurywindows.com
    , for inspiration.

    ReplyDelete
  11. https://www.dotnetnoob.com/2012/09/security-through-http-response-headers.html?sc=1696938898659#c2181817878516324551

    ReplyDelete

Search This Blog