Setting up the value in ViewBag using Jquery

Napaka Pangit Q Talga picture Napaka Pangit Q Talga · Aug 14, 2012 · Viewed 80.8k times · Source

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

Answer

Flater picture Flater · Aug 14, 2012

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.