How do I change the function that gets called in the controller of an ASP.NET MVC app when AngularJS is involved

Babak Sekandari
Babak Sekandari used Ask the Experts™
on
I have an ASP.NET MVC framework 4.5 with AngularJS that I’ve inherited and have to maintain.
The application had a .cshtml to PDF capability for a summary of all student questionnaires for a given term. The questions changed, and so we added a new .cshtml page for the new questions and renamed the .cshtml for the old questions.
Now there are
PrintSummary.cshtml
and
PrintSummaryBefore2019.cshtml.
What I’m trying to do is to have a condition somewhere in the code that will call PrintSummaryBefore2019.cshtml for queries before 2019 and call PrintSummary.cshtml for queries starting with 2019 and after.

The anchor tag for the Print To PDF functionality was originally coded like this:

   
<div style="padding-bottom: 10px; text-align: right;">
        <a class="btn btn-danger" href="../Survey/PrintSummaryPDF?Term={{term.Term}}&Campus={{campus.CampusId}}&Faculty={{faculty}}&Dept={{dept}}" target="_blank"><span class="glyphicon glyphicon-print"></span> Bulk Print </a>
    </div>

Open in new window

I changed it to this:
       
 <a class="btn btn-danger" onclick="setHref" target="_blank"></a>

Open in new window

And I added this JavaScript:
<script>  
    function setHref(term, campusid, faculty, dept) {
        var term = document.getElementById("term");
        if (Number(term) <= 20190)
            window.location.href = "../Survey/PrintSummaryPDFBefore2019?Term=" + term +
                "&Campus=" + campusid +
                "&Faculty=" + faculty +
                "&Dept=" + dept ;
        else
            window.location.href = "../Survey/PrintSummaryPDF?Term=" + term +
                "&Campus=" + campusid +
                "&Faculty=" + faculty +
                "&Dept=" + dept ;
        return false;
    }
</script>

Open in new window

But the debugger never even reaches this script. It seems that if a page is setup for AngularJS then it won’t parse regular JavaScript calls; I don’t know.

Then in the PrintSummaryPDF() function of the Survey controller, the previous programmer had code that parsed the Url, altered it to call a different function in the Survey controller, and then started a process like this:

[AllowAnonymous]
public ActionResult PrintSummaryPDF()
{
    string fileNameDatePart = DateTime.Now.ToLongTimeString().Replace(":", string.Empty).Replace(" ", string.Empty);
    string pdfFileName = "Survey" + fileNameDatePart + ".pdf";
    var outputPath = ConfigurationManager.AppSettings["WkHtmlToPdfOutputPath"] + pdfFileName;
    Process process = null;
    ProcessStartInfo processStartInfo = new ProcessStartInfo();
    processStartInfo.FileName = ConfigurationManager.AppSettings["WkHtmlToPdfExePath"];
    processStartInfo.Verb = "runas";
    processStartInfo.WindowStyle = ProcessWindowStyle.Hidden;
    processStartInfo.RedirectStandardError = true;
    processStartInfo.RedirectStandardOutput = true;
    processStartInfo.CreateNoWindow = true;
    processStartInfo.UseShellExecute = false;

    processStartInfo.Arguments = HttpContext.Request.Url.AbsoluteUri.Replace("PrintSummaryPDF", "PrintSummary") + " " +
            " --load-error-handling ignore" + " --cookie .ASPXAUTH " + Request.Cookies["DCCCDCookie"].Value + " \"" + outputPath + "\""; 


    process = Process.Start(processStartInfo);
            
    process.WaitForExit(Convert.ToInt32(ConfigurationManager.AppSettings["TimeOut"]));

    int exitCode = process.ExitCode;
    string stdout = process.StandardOutput.ReadToEnd();
    string stderr = process.StandardError.ReadToEnd();

    return File(outputPath, "application/pdf");
}

Open in new window


As you can see from above, the PrintSummary() function of the Survey controller will get called.
I added code to replace the Url based on the term, like this:

string[] query = HttpContext.Request.Url.Query.Split('&');
int equalSignIndex = query[0].IndexOf('=');
int termAsNum;
string term = query[0].Substring(equalSignIndex + 1);
int.TryParse(term, out termAsNum);
            
if (termAsNum >= 20191)
{
    processStartInfo.Arguments = HttpContext.Request.Url.AbsoluteUri.Replace("PrintSummaryPDF", "PrintSummary") + " " +
        " --load-error-handling ignore" + " \"" + outputPath + "\"";
}
else
{
    processStartInfo.Arguments = HttpContext.Request.Url.AbsoluteUri.Replace("PrintSummaryPDF", "PrintSummaryBefore2019") + " " +
        " --load-error-handling ignore" + " \"" + outputPath + "\"";
}

Open in new window


Strangely, even though I step through the debugger and see that it is hitting the correct condition, the PrintSummaryBefore2019() function in the Survey controller never gets hit in the debugger.

How do I change the function that gets called in the controller of an MVC app when AngularJS is involved and when the function is already being altered within controller as shown above?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Babak SekandariProgrammer / Analyst

Author

Commented:
I'm going to try this: AngularJS Conditional HREF and see if that works.
Babak SekandariProgrammer / Analyst

Author

Commented:
Here's what I'm trying so far:
All I did was change:
<a class="btn btn-danger" href="../Survey/PrintSummaryPDF?Term={{term.Term}}&Campus={{campus.CampusId}}&Faculty={{faculty}}&Dept={{dept}}" target="_blank"><span class="glyphicon glyphicon-print"></span> Bulk Print </a>

Open in new window

to
<a class="btn btn-danger" href="../Survey/{{returnConditionalDisplayLocation()}}?Term={{term.Term}}&Campus={{campus.CampusId}}&Faculty={{faculty}}&Dept={{dept}}" target="_blank"><span class="glyphicon glyphicon-print"></span> Bulk Print </a>

Open in new window

and I added this:
    $scope.returnConditionalDisplayLocation = function returnConditionalDisplayLocationFn() {
        if ($scope.term.Term <= 20190)
            return "PrintSummaryPDFBefore2019";
        else
            return "PrintSummaryPDF";
    }

Open in new window

I'm testing to see if this works.
leakim971Multitechnician
Top Expert 2014
Commented:
regarding what you tried, I believe you need to ue ngHref : https://docs.angularjs.org/api/ng/directive/ngHref
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
ng-href will just ensure that the binding will happen after the variables in the string are defined.

This works for me
<body ng-app="app">
<div class="wrapper" ng-controller="mainCtrl">
	<a class="btn btn-danger" ng-href="../Survey/{{returnConditionalDisplayLocation()}}?Term={{term.Term}}&Campus={{campus.CampusId}}&Faculty={{faculty}}&Dept={{dept}}" target="_blank"><span class="glyphicon glyphicon-print"></span> Bulk Print </a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.js"></script>
<script>
(function() {
  'use strict';
  angular.module('app',[])
    .controller('mainCtrl', mainController);

  function mainController($scope)
  {
    $scope.term = {
      Term: 2018
    }
    $scope.campus = {
      CampusId: 10
    }
    $scope.faculty = 'Cooking';
    $scope.dept = 'dept';
    
    $scope.returnConditionalDisplayLocation = function returnConditionalDisplayLocationFn() {
      if ($scope.term.Term <= 2019)
        return "PrintSummaryPDFBefore2019";
      else
        return "PrintSummaryPDF";
    }
  }
})();
</script>
</body>

Open in new window

You can see it working here
Babak SekandariProgrammer / Analyst

Author

Commented:
Using ng-href instead of href helped. Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial