Question

I am attempting to manipulate an asp.net MVC2 view variable in Jquery…

(function () {
    debugger;
    var $a = 10;
    var $b = '<%:toggle %>';
    var $c = 12;
});

As you may have guessed, I am attempting to manipulate the toggle variable that I have initiated in an ASP.net MVC2 view in Jquery.

What I did above doesn’t seem to work at all. The page that I attempt to load, blows up every time I try and open it. Any ideas why that might be? Note… Even if I get rid of the ‘ ‘ (apostrophes) my page still blows up. I also attempted to make the variable in question public. That doesn’t seem to work either.

UPDATE EXPECTED vs WHAT I GET
I don’t expect to get this…

Here is what I do expect

I am having a hard time getting the error message that is being sent to the page. I have to figure out where its being generated and try and chase it down from there. My coworker set up some kind of Javascript error routing scenario for this particular page. And I am having a little trouble deciphering what is going on. If I knew the error I would probably be in good shape.

UPDATE 2 Just figured out the error

TemplateInfo.aspx(371): error CS0103: The name ‘toggle’ does not exist in the current context…

I am guessing that variable has to be somehow made public or put into scope somehow. How can. To my knowledge you can’t create public variables with MVC2? Can you?

Answer 1

It looks like the toggle variable that you are trying to use is nowhere defined in your view.

In ASP.NET MVC controller actions normally pass view models to views. Those view models contain properties that will be used by the view. So as always in an ASP.NET MVC application you start by defining a view model:

public class MyViewModel
{
    public bool IsToggle { get; set; }
}

then you write a controller action which instantiates this view model and passes it to the view:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        IsToggle = true
    };
    return View(model);
}

and finally you write a strongly typed view to this view model where you can use its properties:

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">
    (function () {
        debugger;
        var $a = 10;
        var $b = <%= Model.IsToggle %>;
        var $c = 12;
    });    
    </script>

</asp:Content>

Now let’s suppose that your view model contains some properties that are of type string or even other complex objects. In this case you will need to properly encode them. And the best way to ensure that you are properly encoding values that you are passing to javascript is to use javascript literals (JSON notation):

<script type="text/javascript">
(function () {
    debugger;
    // we JSON serialize the entire model:
    var model = <%= new JavaScriptSerializer().Serialize(Model) %>;

    // Now you can manipulate individual model properties:
    alert(model.SomeProperty);
});    
</script>

Note that the JavaScriptSerializer class is defined in the System.Web.Extensions assembly in the System.Web.Script.Serialization namespace so make sure to bring those into scope.