Unable to call a Javascript method from a Razor 'IF' statement

Question

Question background:

I am attemting to check if a user is logged in to my site when a view is rendered.

The issue:

Currently I set the users username to a ViewBag property in a Controller then access this in its respective View. The issue I'm facing is the IF statement in my Razor syntax dosen't seem to be checking the ViewBag.userName property and in-turn is not then calling the JavaScript method to set the Inner HTML of a button with the users name.

As a side note I have - as a test - set the ViewBag property to a h3 tag just to make sure the users name is being passed to the view which it is.

The code:

My controller where the username is set:

ViewBag.userName = Session["userName"];

The View:

Check the status of the ViewBag property userName , if it not null i.e a users has logged in, then Call the ShowUsersName method to set the value to a buttons inner HTML.

@if (ViewBag.userName != null)
{
    <script>
       var userName= @ViewBag.userName;

        ShowUsersName(userName);
    </script>
}

ShowUsersName method:

<script type="text/javascript">

var ShowUsersName = function (userName) {

    var html = '<span class="glyphicon glyphicon-user"></span> Hi, '+ userName +'"<strong class="caret glyphicon glyphicon-triangle-bottom"></strong>';

    document.getElementById("userButton").innerHTML = html;

};
</script>

In order to make sure just check the view source of your page and if you find the statements in the IF block then it ran correctly and now the issue is in the JS function. — Kundan Singh Chouhan
– Kundan Singh Chouhan, Commented May 2, 2015 at 16:50
Are your code snippets complete? Do you have a closing script tag in ShowUsersName? Also I would enclose "@ViewBag.userName" with double quotes in var userName = "@ViewBag.userName"; — nimeshjm
– nimeshjm, Commented May 2, 2015 at 16:53

Abdul Ahmad · Accepted Answer · 2015-05-02 17:03:03Z

2

I don't think simply putting a script tag inside an if statement will cause javascript to run. You need to Bind this to on load of the body (or some other event)

<body onload='jsFunction()'>

if you're using jQuery you can have a script section with:

$(document).ready(function() {  
   //your code
});

one thing you could do is in your if statement create a hidden element or input that has the username value:

<div id='user-name' style='display:none;'>
@if (ViewBag.userName != null)
{
    @ViewBag.userName
}
</div>

and in your jQuery (if you're using jQuery):

$(document).ready(function() {  
   var userName = '';
   userName = $('#user-name').text();
   if (userName != '') {
    //your code if userName is not empty
   }
});

something along these lines. This is just a quick example, you may find an alternative way of doing this

edited May 2, 2015 at 17:03

answered May 2, 2015 at 16:53

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1352057 Over a year ago

Excellent answer. I am using JQuery and went with the hidden div method. It works perfectly. Out of interest when i refresh the page the changed html is lost, how can i keep it after a refresh?

Abdul Ahmad Over a year ago

When you refresh the page you're hitting an action method in the controller. Send over the username in a viewbag again. Hope that helps

Kristian Schneider · Accepted Answer · 2015-05-02 16:55:27Z

0

Make sure that your viewbag is not null. You could also try and remove the if statement to see if it renders the script. To test the content of the viewbag you could do:

<h1>@ViewBag.userName</h1>

answered May 2, 2015 at 16:55

Kristian Schneider

1751 silver badge7 bronze badges

Collectives™ on Stack Overflow

Unable to call a Javascript method from a Razor 'IF' statement

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related