How do I access ViewBag from JS

Question

My attempted methods.

Looking at the JS via browser, the @ViewBag.CC is just blank... (missing)

        var c = "#" + "@ViewBag.CC";
        var d = $("#" + "@ViewBag.CC").value;
        var e = $("#" + "@ViewBag.CC").val();

        var c = "@ViewBag.CC";
        var d = $("@ViewBag.CC").value;
        var e = $("@ViewBag.CC").val();

amd · Accepted Answer · 2016-09-30T14:20:27.460

75

if you are using razor engine template then do the following

in your view write :

<script> var myJsVariable = '@ViewBag.MyVariable' </script>

UPDATE: A more appropriate approach is to define a set of configuration on the master layout for example, base url, facebook API Key, Amazon S3 base URL, etc ...```

<head>
 <script>
   var AppConfig = @Html.Raw(Json.Encode(new {
    baseUrl: Url.Content("~"),
    fbApi: "get it from db",
    awsUrl: "get it from db"
   }));
 </script>
</head>

And you can use it in your JavaScript code as follow:

<script>
  myProduct.fullUrl = AppConfig.awsUrl + myProduct.path;
  alert(myProduct.fullUrl);
</script>

edited Sep 30 '16 at 14:20

answered Apr 04 '12 at 09:06

amd

20,637
6
49
67

4

Why the `@` before the ` – gdoron Apr 04 '12 at 09:07
Minus the @ symbol before Script, and this is the correct answer. Thanks – IAmGroot Apr 04 '12 at 09:17
1

you need the @ sign when using traditional – Dan Beaulieu May 28 '15 at 19:11
@amd this is very helpful. +1 – Hadi Jun 30 '17 at 15:41

score 14 · Answer 2 · answered Apr 04 '12 at 09:08

14

try: var cc = @Html.Raw(Json.Encode(ViewBag.CC)

answered Apr 04 '12 at 09:08

ZeNo

1,648
2
15
28

@Doomsknight. And I hope you won't use it. – gdoron Apr 04 '12 at 09:14
1

Well in that case, check the value of ViewBag.CC server side, you might not be setting it in some case. – ZeNo Apr 04 '12 at 09:15

score 9 · Answer 3 · answered Apr 04 '12 at 09:06

9

<script type="text/javascript">
      $(document).ready(function() {
                showWarning('@ViewBag.Message');
      });

</script>

You can use ViewBag.PropertyName in javascript like this.

answered Apr 04 '12 at 09:06

adt

4,320
5
35
54

Im not sure wht showWarning does. (didnt do anything for me) but the rest did contain the correct value. So I saw `showWarning('2');` in my code. – IAmGroot Apr 04 '12 at 09:17
1

I was using this code, it calls just alert and it works fine. you can change alert('@ViewBag.Message'); it will work. – adt Apr 04 '12 at 09:20

gdoron · Answer 4 · 2012-04-04T09:09:30.687

4

ViewBag is server side code.
Javascript is client side code.

You can't really connect them.

You can do something like this:

var x = $('#' + '@(ViewBag.CC)').val();

But it will get parsed on the server, so you didn't really connect them.

edited Apr 04 '12 at 09:09

answered Apr 04 '12 at 09:04

gdoron

147,333
58
291
367

I think you have an additional bracket? Ive tried similar to this but with `"`. – IAmGroot Apr 04 '12 at 09:08
@Doomsknight. `'` or `"` is the same thing. Well Did it work? – gdoron Apr 04 '12 at 09:09
On run time i see `var c = $('#' + '2').val();` – IAmGroot Apr 04 '12 at 09:11
@Doomsknight. O.k. **So it's working...** :) You have `2` in the `ViewBag.CC` – gdoron Apr 04 '12 at 09:13
Seeing the 2 now, Ive gone back to `var c = '@ViewBag.CC';` seems to be working now :/ Maybe running a few methods together were breaking it all. Thanks – IAmGroot Apr 04 '12 at 09:14

score 3 · Answer 5 · answered Jan 10 '17 at 12:10

3

You can achieve the solution, by doing this:

JavaScript:

var myValue = document.getElementById("@(ViewBag.CC)").value;

or if you want to use jQuery, then:

jQuery

var myValue = $('#' + '@(ViewBag.CC)').val();

answered Jan 10 '17 at 12:10

Arsman Ahmad

2,000
1
26
34

1

I guess the javascript alternative might help others +1. Also i think you can just write `'#@(ViewBag.CC)'` – IAmGroot Jan 10 '17 at 12:31
Yeah, you can be right @Doomsknight, because world consisting multiple solutions :-) – Arsman Ahmad Jan 11 '17 at 07:08
yes @Doomsknight, You're right. I was just try to elaborate is an easy way. ;-) – Arsman Ahmad Jul 01 '18 at 18:21

score 0 · Answer 6 · answered Oct 20 '21 at 20:37

0

None of the existing solutions worked for me. Here's another solution I found that did work:

Controller:

TempData["SuccessMessage"] = "your message here";

View:

let msg = '@TempData["SuccessMessage"]';

answered Oct 20 '21 at 20:37

JasperJustice

21
4

score 0 · Answer 7 · edited Jul 24 '22 at 07:35

0

Try this:

Anywhere in HTML: <input hidden value=@ViewBag.CC id="CC_id" />

In JS: var CC= document.getElementById("CC_id").value.toString();

edited Jul 24 '22 at 07:35

Mahyar Mottaghi Zadeh

1,178
6
18
31

answered Jul 20 '22 at 16:13

Ali Raji

41
2

How do I access ViewBag from JS

7 Answers7

Linked