Load All List Names using Client Object Model- SharePoint 2010

SharePoint 2010 Client Object model
Main js files...
----------------
SP.js
SP.debug.js
SP.Runtime.js
SP.Core.js
SP.UI.Dialog.js
SP.Ribbon.js
--------------------
We are going to work on : Load SharePoint List names using CSOM.
Open VS2010
Create New projet
Empty Project
Give Any Name: Demo
OK
Select farm Solution
Finish
Right click on the Project
Click on Add
Click On New Item
Select Visual Web Part
Give name: DemoJS
Add
You will see all files..DemoJs.cs,DemoJSUserControl.ascx, DemoJS.webpart, Elements.xml
Open DemoJSUserControl.ascx
1)Using Javascript
Add Script tags to get the intellisense
<!--Start-->
<script src="/_Layouts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/_Layouts/SP.debug.js" type="text/javascript"></script>
<!--End-->
<script type="text/javascript" language="javascript">
var Lists;
function LoadLists(){
var context = SP.ClientContext.get_current();
Lists=context.get_web().get_Lists();
context.load(Lists);
context.executeQueryAsync(Function.createDelegate(this.this.OnSuccess),Function.createDelegate(this,this.OnFail));
}
function OnSuccess(sender, args){
var html = "<ul>";
var ListEnumerator = Lists.getEnumerator();
while (ListEnumerator.moveNext()) {
var List =ListEnumerator.get_current();
html +="<li>" +list.get_title() + "</li>";
}
html +="</ul>";
document.getElementById("results").innerHTML=html;
}
function OnFail(sender, args){ alert("Fail");
}
</script>
<input type="button" value="Get All Lists" onclick="LoadLists()" />
<div id=results" />
Note: Remove intellisense script tags which we added in the top.
Build
Deploy
Open SharePoint
Click Edit page
Add Webpart
Add DemoJS webpart
Click on Get All Lists
You will able to see all List Names...
2)Using jQuery
Download jquery from http://Jquery.com site.
You will get jquery-1.6.2.mi.js
Add above file to _layouts in SharePoint
Right click on Demo project
Click on Add
Click on SharePoint "Layouts" Mapped folder
It will create new folder with Project Name
Paste your jquery file in that folder.
Create JQ folder.
Add new jquery reference
<script src="/_Layouts/Demo/jquery-1.6.2.mi.js" type="text/javascript"></script>
Now change OnSuccess method...
function OnSuccess(sender, args){
$("results").slideUp("slow");
var html = "<ul>";
var ListEnumerator = Lists.getEnumerator();
while (ListEnumerator.moveNext()) {
var List =ListEnumerator.get_current();
html +="<li>" +list.get_title() + "</li>";
}
html +="</ul>";
$("results").html(html);
$("results").sliderDown("slow");
}
Save
Deploy the project
refresh the page
You can see sliding of the List names...
When we develop first time we have to add jQuery file to our solution. Let's assume, some one has added jquery file to SharePoint Layout folder.
Now i want to use that.
Delete jquery reference script
Right click on the project
Add New
Click on New Item
Select "Empty Element"
Name it: InstallJquery
Open Elements.xml from InstallJquery
Add below Script
Between Elements tag...
<Elements xmlns=".........................." >
<CustomAction ID="Demo.Jquery"
Title="Install Jquery"
Location="ScriptLink"
ScriptSrc="" />
</Elements>
Save
Make sure that your 2 feature scope = site
Deploy
Now jquery will load from Server, we didn't add in ascx page.