how to create facebook type of comment system using Angularjswebservicec#and sqlserver

Last Reply 9 days ago By dharmendr

Posted 9 days ago

 Good evening sir/ma, i am trying to create a facebook type comment system as i am new to angularjs .i dont know how to load the child comments . i would be gratefull if my request is looked into.

<div class="row" id="divParent">
                        <ul class="media-list" ng-repeat="x in y">
                            <li class="media" data-id="{{x.ID}}">
                                <div class="media-left">
                                    <a href="#">
                                        <img id="ImageParent" class="media-object" style="width: 40px; height: 40px;" src="../backgrounds/conference.png" />
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading" style="font-size: 12px; font-family: Rockwell;">{{x.Username}}
                                    <small style="font-size: 13px;">
                                        <i>{{x.Created | date:'dd, MMMM yyyy'}}</i>
                                    </small>
                                        <small style="font-size: 13px; visibility: hidden;">
                                            <span id="lblID">{{x.ID}}</span>
                                        </small>
                                    </h4>
                                    <p class="media-text" style="font-size: 14px; font-family: Rockwell;">
                                        {{x.CommentMessage}}
                                    </p>
                                    <div class="" style="">
                                        <a class="link reply-link" style="cursor: pointer; text-decoration: none; font-size: 12px;">Reply</a>   &nbsp;&nbsp;
                                        <a class="link cancel-link" style="cursor: pointer; text-decoration: none; font-size: 12px;">Cancel</a>
                                    </div>

                                    <div class="media" ng-repeat="a in p">
                                        <div class="media-left">
                                            <a href="#">
                                                <img id="Img1" class="media-object" style="width: 40px; height: 40px;" src="../backgrounds/conference.png" />
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading" style="font-size: 12px; font-family: Rockwell;">{{a.Username}}
                                    <small style="font-size: 13px;">
                                        <i>{{a.Created | date:'dd, MMMM yyyy'}}</i>
                                    </small>
                                                <small style="font-size: 13px; visibility: hidden;">
                                                    <span id="Span1">{{a.ID}}</span>
                                                </small>
                                            </h4>
                                            <p class="media-text" style="font-size: 14px; font-family: Rockwell;">
                                        {{a.CommentMessage}}
                                    </p>
                                        </div>
                                    </div>






                                </div>
                            </li>
                        </ul>




                    </div>

 

.controller('blogDetailsPageController', function ($http, $cookies, user, $scope, $location, GetAllDatas, $route, $routeParams) {
                var vm = this;
                loadData();
                loadBlogPostDetails();
                countNumberOfComments();

                //load all the post details for me
                function loadBlogPostDetails() {
                    $http({
                        url: "../Services/svBlogPosts.asmx/Select",
                        method: "get",
                        params: { id: $routeParams.ID }
                    }).then(function (response) {
                        vm.abc = response.data[0];
                    });
                }
                function countNumberOfComments() {
                    $http({
                        url: "../Services/svBlogComments.asmx/GetAllBlogCommentByBlogID",
                        method: "get",
                        params: { id: $routeParams.ID }
                    }).then(function (response) {
                        vm.nopc = response.data.length;
                    });
                }

                vm.btnComment = function () {
                    if (vm.txtUsername == undefined || vm.txtComment == undefined) {
                        alert("One Or More Fields Empty!!!");
                    }
                    else {
                        var pid = 0;
                        $http({
                            url: "../Services/svBlogComments.asmx/insert",
                            method: "POST",
                            data: { un: vm.txtUsername, blogid: $routeParams.ID, cm: vm.txtComment, pid: pid },
                            headers: { 'content-Type': 'application/json' }
                        }).then(function (data) {
                            loadData();
                            countNumberOfComments();
                            $("#txtComment").val('');
                            $("#txtUsername").val('');
                        })
                    }
                };
                function loadData() {
                    $http({
                        url: '../Services/svBlogComments.asmx/GetAllBlogCommentByBlogID',
                        method: 'get',
                        params: { id: $routeParams.ID }
                    }).then(function (response) {
                        $scope.y = response.data;
                        //console.log($scope.y[i].ID);
                        $(document).on('click', '.reply-link', function () {
                            var commentForm = $("#divReply").show();
                            var media = $(this).closest('.media');
                            media.find(">.media-body>.media-text").after(commentForm);
                        });
                        $(document).on('click', '.cancel-link', function () {
                            var commentForm = $("#divReply").hide();
                            var media = $(this).closest('.media');
                            media.find(">.media-body>.media-text").after(commentForm);
                        });
                        vm.btnChildComment = function () {
                            var parentID = 0;
                            var commentForm = $("#divReply");
                            if (commentForm.parents('.media-list').length > 0) {
                                parentID += commentForm.closest('.media').attr("data-Id");
                            }
                            //alert(parentID);
                            try {
                                if (vm.txtChildUsername == undefined || vm.txtChildComment == undefined) {
                                    alert("One Or More Fields Empty!!!");
                                }
                                else {
                                    $http({
                                        url: "../Services/svBlogComments.asmx/insert",
                                        method: "POST",
                                        data: { un: vm.txtChildUsername, blogid: $routeParams.ID, cm: vm.txtChildComment, pid: parentID },
                                        headers: { 'content-Type': 'application/json' }
                                    }).then(function (data) {
                                        //childrenComments();
                                        $("#txtChildComment").val('');
                                        $("#txtChildUsername").val('');
                                    })
                                }
                            } catch (e) {
                                console.log(e);
                            }
                        }
                        function childrenComments() {
                            try {
                                for (var i = 0; i < $scope.y.length; i++) {
                                    $http({
                                        url: '../Services/svBlogComments.asmx/GetAllBlogCommentByParentID',
                                        method: 'get',
                                        params: { bid: $routeParams.ID, pid: $scope.y[i].ID }
                                    }).then(function (childcomments) {
                                        $scope.p = childcomments.data;
                                    });
                                }
                            } catch (e) {
                                console.log(e);
                            }
                        }
                    });
                };
                
            })

 

ALTER proc [jay].[spSelectBlogCommentsByParents]
@id int,@pid int
as
begin
	with cte_select(ID,Username,Title,CommentMessage,Created,BlogID,ParentID)
	as
	(
		select bc.ID,bc.Username,bp.Title,bc.CommentMessage,bc.Created,bc.BlogID,bc.ParentID
		from jay.tblBlogComments bc
		left outer join jay.tblBlogPost bp
		on bc.BlogID = bp.ID
	)
	select * from cte_select where BlogID=@id and ParentID = @pid
end

 

You are viewing reply posted by: dharmendr 9 days ago.
I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html