Setting up the value in ViewBag using Jquery

Question

I just want to ask, is there a way to set up the viewbag value dynamically using jquery? I try this code in my script,

$(".btn").on("click",function(){
@ViewBag.Id = $(this).attr("id")
});

i dont know if its correct but when i try to run my MVC 3 Project, this error appear in my firebug

Syntax Error
    = $(this).attr("id")

Please Help. Thanks

Aundrea

I'm Sorry, i notice i forget to type my error – Aundrea

Presumably @ViewBag.Id isn't defined somewhere so nothing is output (instead of an error), hence the left hand side of the assignment being nothing. Check your code to see where @ViewBag.Id is declared. – Arrogant

Answer 1

You're misunderstanding how the ViewBag works.

When working in MVC, and you open a webpage, this is what (roughly) happens:

1. The Method 'Index' of FooController is run. At the end, a View is returned.
2. Your MVC application will then find the view for you, and start rendering it according to the HTML it finds in the related .aspx file. If the program encounters items such as "@ViewBag.Id", it will basically do a string replace with whatever the ".Id" value is. (It's a bit more complicated than that, but for the sake of argument, it basically does a string replace).
3. After rendering, the HTML document is sent to your browser, who then displays it.

By the time your browser gets the page, your ViewBag has basically gone 'out of scope'. This is because your ASP (MVC) application uses the ViewBag, but Javascript only has a scope in the web browser document (this is the HTML code that was returned to the the browser by the application, after the ViewBag has gone out of scope. Javascript isn't part of the MVC application, only the resulting webpage.

So the short answer is, no you can't do it like that. Try to think of it as doing an inline string replace. You can only put the ViewBag value into the HTML page, not the other way around.

Suppose your Id is 5, the following code in the aspx file:

$(".btn").on("click",function(){
    @ViewBag.Id = $(this).attr("id")
});

Will be sent to the browser as

$(".btn").on("click",function(){
    5 = $(this).attr("id")
});

Since your browser only sees this last part, it just doesn't make sense in Javascript. In you case, With the syntax error, it just means your variable hasn't been initialised, and you are trying to access a null.

Steelwork

Thanks Flater. now i really understand your point. I can only display the value of viewbag but putting a value on it using jquery is imposible. Thanks a lot. – Aundrea

Is there any alternative for these kind of solutions. – Yellowbird

@anvesh.veerelli: If you want the server to be aware of a change made in the webpage; your webpage needs to connect back to the server. This can be done in many, many different ways, ranging from form posts, ajax calls, to more complex solutions like SignalR. Your question is very broad as it stands. – Steelwork

@Steelwork Hi! Then how will I get the values of dropdown (Values are stored in ViewBag) inside inline jqyery. What is the alternative method to get that value in jquery inline? I need to use the value of the Viewbag inside the inline jquery. – Petr

@Nabid You seem to have missed the point of the answer. Getting a value from the viewbag onto the page is easy. You can do it the way OP was trying to do it. It's getting a value from a loaded page to the viewbag that's more difficult. – Steelwork