Visual Web Part In SharePoint 2013 With External JS And CSS files

Introduction

In this article I have explained how we can create the Visual Web Part in SharePoint 2013 using Visual Studio 2012.

It will be good idea to store our JS and CSS files externally, so that we can avoid most of the deployments as we can directly update our JS and CSS files if we have access to the site.

In the following sample I have also explained how we can incorporate our external JS and CSS files in Visual Web Part.

Steps to create Visual Web Part

1. Open Visual Studio run as administrator (You may get permission issue if we open in normal mode).
   
   
   
   
2. Create new SharePoint Visual Web Part,
   
   
   
   
3. Provide your site url to deploy this web part, and make sure that you have selected the farm solution.
   
   
   
   
4. Delete the existing/created Visual Web part and add new farm solution web part. If we rename the existing web part we may face some issues, so it is better to delete the existing one and create new.
   
   
5. I have added some div tags and added my custom JS and CSS links in this designer code. We can also add our custom C# code in code behind.
   
   
   
   
6. By default this Visual web part will add in feature, rename the feature and it will help in identifying our feature easily.
   
   
   
   
7. Save the solution and deploy.
   
   
   
   
   
   
8. Make sure that the feature is activated.
   
   
   
   
9. Add our custom JS and CSS files in mentioned path.
   
   
   
   
10. Create a new web part page to add this webpart.
    
    
    
    
    
    
11. Edit the web part page and add our custom web part, it will exist in custom web part section.
    
    
    
    
12. Browse the page, you can see your update page.