Thursday, November 27, 2014

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

Posted by Santhosh on 10:33 PM No comments

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 .