How to get List Items Count from SP List Using Visual webpart and ECMA script in SharePoint 2010

Hi  Guys,

Thanks for visiting my blog .

In my previous posts i explained how  to get the list items  count from SharePoint List Using Content editor and ecma script.

In this  Post I would like to explain the same concept using ECMA Script and Visual Studio.

Step :1 Open Visual Studio (Run as Administrator). Create an Empty SharePoint Project.

Step :2 Select Visual Webpart from available templates and add to the Solution .

Step :3 Open ascx file in Webpart. and Add the below Script files in order to refer SP.js files to start
            work with  ECMA Script .

                         <script src="//code.jquery.com/jquery-1.10.2.js"></script>


Step :4 I  want to display the list items count only when the button clicked not by default page gets
             loaded .
                    <input type="button" id="btnSubmit" value="Get The Item Count">.  

Step 5 : Add the Script file .

<script type="text/javascript">

    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', MainFunction);    
    });

    var objContext = null;
    var objWeb = null
    var objList = null;
    var objItem = null;

    function MainFunction() {
        objContext = new SP.ClientContext.get_current();
        objWeb = objContext.get_web();
        objList = objWeb.get_lists().getByTitle("SampleList");  // Passing the list name here.
        objContext.load(objList);

        objContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
    }

    function onSuccess(sender, args) {
   
        ItemSubmit(); //calls the button Click event.
    }

    function onFail(sender, args) {
        alert('Some error has occured.');
    }


    function ItemSubmit() {
        $("#btnSubmit").click(function () {
            alert('SharePoint Kitchen shows List items count : ' + objList.get_itemCount());
        });
    }

 </script>
 

Please find the screen shot below of code .

Please deploy the solution and place the web part in one site page and test by clicking on the button .
            
 

                      

Related Post