MVC3 Razor: Merging javascript with c# RSS

• • Reply
  

  2

  Member

  30 Points

  20 Posts

  MVC3 Razor: Merging javascript with c#

  Feb 01, 2011 10:03 AM|LINK

  Hello, I want to access to the ViewBag from javascript, so I can access to this variable in the future from javascript.

  
  

  Im trying to do this:

  var array = new Array();

  @for (int i = 0; i < 5; i++)

          {

               array[i] = @ViewBag.FriendsId[i]);

          }

  
  

  but it doesn't work. Anyone can help me? Thanks

• • Reply
  

  ignatandrei

  All-Star

  135210 Points

  21690 Posts

  Moderator

  MVP

  Re: MVC3 Razor: Merging javascript with c#

  Feb 01, 2011 10:09 AM|LINK

  1.What kind of type is

  @ViewBag.FriendsId[i]

  ?

  it is string ?

  2. please try
  

  array[i] = '@ViewBag.FriendsId[i])';

  3. Please tell the generated HTML output( view => source )
  

  4. Please tell what do you mean by

  2

  it doesn't work.

  
  

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  2

  Member

  30 Points

  20 Posts

  Re: MVC3 Razor: Merging javascript with c#

  Feb 01, 2011 10:18 AM|LINK

  ViewBag.FriendsId is a List<string>

  
  

  I've tried that: 

  
  

  var array = new Array();

          @for (int i = 0; i < 5; i++)

          {

              array[i] = '@ViewBag.FriendsId[i]';

          }

  
  

  
  

  But I get this error:

  Compiler Error Message: CS1012: Too many characters in character literal

  
  

  I think the problem is that it can't find the array variable in that context.

  
  

  
  

  EDIT: Also, if I write this, as before:

  var array = new Array();

          @for (int i = 0; i < 5; i++)

          {

              array[i] = @ViewBag.FriendsId[i];

          }

  
  

  This is the error

  Compiler Error Message: CS0103: The name 'array' does not exist in the current context
  

  
  

  • Edited by 2 on Feb 01, 2011 10:31 AM
• • Reply
  

  ignatandrei

  All-Star

  135210 Points

  21690 Posts

  Moderator

  MVP

  Re: MVC3 Razor: Merging javascript with c#

  Feb 01, 2011 11:08 AM|LINK

              array[i] = '@(ViewBag.FriendsId[i])';

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  sachingusain

  Star

  8786 Points

  1702 Posts

  Re: MVC3 Razor: Merging javascript with c#

  Feb 01, 2011 06:26 PM|LINK

  Here is a sample:

  The controller:

  namespace Razor.Controllers
  {
      public class JSController : Controller
      {
          //
          // GET: /JS/
  
  
          public ActionResult Index()
          {
              List<string> FriendsId = new List<string> { "S1", "S2", "S3", "S4" };
              ViewBag.FriendsId = FriendsId;
              return View();
          }
  
  
      }
  }

  The index view:

  @{
      ViewBag.Title = "Index";
  }
  
  <h2>Index</h2>
  <script type="text/javascript">
  var array = new Array();
  
  @{   
   string message=""; 
   }
  
          @for (int i = 0; i < 3; i++) {
             message += "array[" + i + "]=\"" + ViewBag.FriendsId[i] + "\";";
          }
  
          @MvcHtmlString.Create(message);
          alert(array[0]);
  </script>
  
  
  

  Note how I constructed the javascript dynamically above.
  
   

  Please "Mark As Answered" if it helped you.
  
  Thanks.
  • Marked as answer by 2 on Feb 02, 2011 07:56 AM
• • Reply
  

  2

  Member

  30 Points

  20 Posts

  Re: MVC3 Razor: Merging javascript with c#

  Feb 02, 2011 07:55 AM|LINK

  sachingusain

  Here is a sample:

  The controller:

  <div class="dp-highlighter"><div class="bar"><div class="tools">view plaincopy to clipboardprint?</div></div>

  1. namespace Razor.Controllers  
  2. {  
  3.     public class JSController : Controller  
  4.     {  
  5.         //  
  6.         // GET: /JS/  
  7.   
  8.         public ActionResult Index()  
  9.         {  
  10.             List<string> FriendsId = new List<string> { "S1", "S2", "S3", "S4" };  
  11.             ViewBag.FriendsId = FriendsId;  
  12.             return View();  
  13.         }  
  14.   
  15.     }  
  16. }  

  </div>

  namespace Razor.Controllers
  {
      public class JSController : Controller
      {
          //
          // GET: /JS/
  
  
          public ActionResult Index()
          {
              List<string> FriendsId = new List<string> { "S1", "S2", "S3", "S4" };
              ViewBag.FriendsId = FriendsId;
              return View();
          }
  
  
      }
  }

  The index view:

  <div class="dp-highlighter"><div class="bar"><div class="tools">view plaincopy to clipboardprint?</div></div>

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.   
  5. <h2>Index</h2>  
  6. <script type="text/javascript">  
  7. var array = new Array();  
  8.   
  9. @{     
  10.  string message="";   
  11.  }  
  12.   
  13.         @for (int i = 0; i < 3; i++) {  
  14.            message += "array[" + i + "]=\"" + ViewBag.FriendsId[i] + "\";";  
  15.         }  
  16.   
  17.         @MvcHtmlString.Create(message);  
  18.         alert(array[0]);  
  19. </script>  

  </div>

  @{
      ViewBag.Title = "Index";
  }
  
  <h2>Index</h2>
  <script type="text/javascript">
  var array = new Array();
  
  @{   
   string message=""; 
   }
  
          @for (int i = 0; i < 3; i++) {
             message += "array[" + i + "]=\"" + ViewBag.FriendsId[i] + "\";";
          }
  
          @MvcHtmlString.Create(message);
          alert(array[0]);
  </script>
  
  
  

  Note how I constructed the javascript dynamically above.
  
   

  
  

  It worked! I would never figured out how to do it. Thanks!

• • Reply
  

  jamiealtizer

  Member

  2 Points

  1 Post

  Re: MVC3 Razor: Merging javascript with c#

  May 06, 2013 01:40 PM|LINK

  This answer has some age to it so I present this as a more modern alternative (and I believe better) method for providing CLR data as javascript to a View would be to transform CLR objects into javascript objects using JSON. I personally use Newtonsoft to serialize CLR objects to JSON, complex objects and simple ones. I would push from your controller to your view, exactly what you need. If you do not care to have the enumerable list FriendsID in the view then you could only pass down the JSON object as your item in the ViewBag. For example...

  // Controller Action
  public ActionResult Index()
  {
      string[] FriendsId = new string[] { "S1", "S2", "S3" };
      ViewBag.FriendsIdJS = Newtonsoft.Json.JsonConvert.SerializeObject(this.FriendsId);
      return View();
  }
  
  // View Code
  /* output the FriendsIdJS just like any inline javascript ... the @ViewBag.FriendsIdJS will insert as text  which should be represented as a string like ['S1', 'S2', 'S3']
  
  */
  
  
  var friendsIdArray = @ViewBag.FriendsIdJS;
  
  /*
     the resulting javascript should load in looking like the following (just as though you typed the array yourself)
  
  var friendsIdArray = ['S1', 'S2', 'S3'];
  */