Search This Blog

Monday, September 1, 2014

How To Add Jquery In sharepoint 2010 Using visual studio

We Know how to add jquery in sharepoint master page using designer but how we add jquery using visual studio.

Using vs 2010 we have two option.
1). Farm Solution
2). Sandbox Solution  

1). Farm Solution
  • Open Visual Studio 2010.
  • Create an "Empty SharePoint Project".
  • Right click on the solution and click on Add =>Sharepoint "Layouts" Mapped Folder.
  • Copy your jquery file in layouts folder.
Now create new Usercontrol. open that control and add your jquery script like

<script language="javascript" type="text/javascript" src="/_layouts/ScriptPath"></script>


Add as much as jquery or css  you like
OK your work is done now create one Element file and add Usercontrol in MasterPage head using delegate control like this

<Control Id="AdditionalPageHead" ControlSrc="~/_controltemplates/path/your usercontrol .ascx"></Control>


Great work now deploy your project and find your jquery in firebug.
This technique is called delegate control how to edit master page using vs.

2). Sandbox Solution

    In sandbox solution there isn't layout folder so how you can add your jquery.
    for sandbox we have to create new documentlibrary which is hidden in sharepoint site.
    we add all our jquery in documentlibrary using module.

    lets start
    first of all add new list defination in your solution you have to select document library as list defination. 
   
             <ListInstance Title="JsCode"
                OnQuickLaunch="False"
                TemplateType="101"
                FeatureId="00bfea71-e717-4e80-aa17-d0c71b360101"
                Url="Lists/JsCode"
                Hidden="True"
                Description="JsCode - Contains supporting files ">
             </ListInstance>
 
  know add new module in your solution and paste all jquery in module

    <Module Name="AddSupportingDocsModule" Url="Lists/JsCode">
     <File Path="AddSupportingDocsModule\Sample.js" Url="Sample.js" />
    </Module>
 
Done now deploy project and check your jquery in JsCode library.

Now add one Empty Element File and call jquery using customaction using below code 

    <CustomAction
     ScriptSrc="~site/Lists/JsCode/yourjs.js"
     Location="ScriptLink"
     Sequence="100"
    >
    </CustomAction>
 

In this blog we can see both the method that how to add jquery in sharepoint 2010 using vs 2010.

No comments:

Post a Comment