0

I am making an asp.net MVC client application which has a "mainpage.cshtml" in which is running on Angularjs. I have a controller action which on clicking a button returns a partial view(orgdetailsview.cshtml) to "mainpage.cshtml". Problem is javascripts in "orgdetailsview.cshtml" are not running when they get finally embeded into "mainpage.cshtml" on clicking button.

To make things work, i copied "orgdetailsview.cshtml" scripts in "mainpage.cshtml". Scripts are now working but in console following error is displayed 

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.5.6/$rootScope/inprog?p0=%24digest

here is my "orgdetailsview.cshtml"

<div style="text-align:center;background-color: #dfdf00 ;font-size:18px;"><b>ORGANIZATION DETAILS</b></div>

<div style="padding-top:7px;width:100%;overflow:scroll;text-align:center" id="outputorgdetails">
<a id="mainorgbutton" class="btn-circle">+</a> <span class="buttonheadings">&nbsp;&nbsp;&nbsp;&nbsp;Main Organization Details</span>
<button id="clickme" onclick="myfunction()">click</button>
</div>

here is "mainpage.cshtml"

 <script>

var app = angular.module("myapp", ['ngSanitize']);
app.controller('myctrl', ['$scope', '$http', '$sce', function ($scope, $http, $sce) {

    $scope.gobutton = function () {

        $scope.userdetails = $sce.trustAsHtml("<img src='http://api.ning.com/files/wdDZeipuIRydeFO-o32jfjGVFK5H7DEvHdNew3CRBmmFjYGmg-B1KXAU-R3CYL3tDZJSc67U*jacIZY9Fc*dCLMOOySBoVMA/circleloadinganimation.gif'  width='300' text-align='center'/>");
        $scope.personaids = $sce.trustAsHtml("<img src='http://api.ning.com/files/wdDZeipuIRydeFO-o32jfjGVFK5H7DEvHdNew3CRBmmFjYGmg-B1KXAU-R3CYL3tDZJSc67U*jacIZY9Fc*dCLMOOySBoVMA/circleloadinganimation.gif'  width='300' text-align='center'/>");


        $http.get('/profile/userdetails/' + $scope.uidng).success(
            function (response) {
                $scope.userdetails = $sce.trustAsHtml(response);
            },
            function (failure)
            { console.log("failed :(", failure); });

        $http.get('/profile/orgdetailsview').success(
            function (response) {
                $scope.orgdetails = $sce.trustAsHtml(response);
                alert($scope.orgdetails);
            },
            function (failure)
            { console.log("failed :(", failure); });            

    }
}
]);

</script>

<div ng-app="myapp" ng-controller="myctrl">
<!--this is header on top-->
<div id="header" style="padding:10px;background-color: rgb(0, 50, 150)">
<div align="center" style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size:30px;color: #ffffff "><b>VOL User Profile</b></div>
</div>
<hr align="left" width="100%">

<div name="belowheader">
    <div id="inputarea" style="text-align:center">
        <span style="font-size:23px"> Enter User ID : </span><input type="text" ng-model="uidng" placeholder="user id" style="padding:2px">
        <a class="myButton" ng-click="gobutton()">GO</a>
    </div>
    <br />

    <div id="output" style="padding-top:25px">
        <div style="width:50%;float:left">
            <div class="outputboxes" ng-bind-html="userdetails"></div>
        </div>
        <div ng-bind-html="orgdetails" style="width:45%;float:left;padding-left:50px"></div>

    </div>
</div>


@*script from "orgdetailsview.cshtml"*@
<script>
function myfunction() {
    alert("function working");
    @*alert(@VOluserprofile.UI.Models.personas.a);*@
    $.ajax({
        url: "/profile/orgdetails/" + @VOluserprofile.UI.Models.personas.a,
        success: function (data) {
            alert(data);
        }
    });
}
alert("script working");

</script>

2nd problem is "VOluserprofile.UI.Models.personas.a" is assigned to a static class when "usersdetails" ajax in angularjs script gets successfully completed... but its showing error in console not able to read value in "ordetailsview.cshtml" script.

Is this the correct way to do things or there is a better solution using angular only and not using partial view.

Mehul Parmar
  • 347
  • 4
  • 21
  • You need to recompile angular on the partial view - http://stackoverflow.com/questions/36239097/ng-click-not-working-in-mvc-partial-view – Denys Wessels Jun 19 '16 at 07:22
  • in partial view there is no angular.. ajax calls in partial view were not working, therefore i decided to use razor and jquery. Found out that actually no Scripts are working in partial view!! – Mehul Parmar Jun 19 '16 at 15:20
  • Scripts work perfectly fine in partial views, what do you think is jQuery? – Denys Wessels Jun 20 '16 at 04:16
  • yeah exactly @DenisWessels.Here no javascripts are working in partial view. I think the problem is in the way i am appending partial view to mainpage through angular js. Refer the code please – Mehul Parmar Jun 20 '16 at 04:19
  • It's not working because you are doing something wrong.Check the Google Chrome console for errors – Denys Wessels Jun 20 '16 at 04:20

0 Answers0