I want to get data from a C# function, store it in a hidden HTML field, and then access it in jQuery.

This is what I'm thinking:

C#:

public static string getDuckbillDepts()
{
    List<string> duckbillDptsStr = new List<string>();
    for (int i = 2; i < 100; i++)
    {
        duckbillDptsStr.Add(i);
    }
    return string.Join(",", duckbillDptsStr); // <-- will this work?
}

Razor:

// I first wanted to use List<int> but then realized HTML would probably mutiny if I tried to give it that data type
@{string duckbillDeptsCSV = CCRReporterUtils.getDuckbillDepts()}

HTML:

<input type="hidden" name="AllDepts" id="hiddenAllDepts" value="@duckbillDeptsCSV" />

jQuery:

var deptsArray = $('hiddenAllDepts').val();

...but "duckbillDeptsCSV" in the HTML is red, indicating (right?) that it's confusing the piler. Am I doing it wrong?

I want to get data from a C# function, store it in a hidden HTML field, and then access it in jQuery.

This is what I'm thinking:

C#:

public static string getDuckbillDepts()
{
    List<string> duckbillDptsStr = new List<string>();
    for (int i = 2; i < 100; i++)
    {
        duckbillDptsStr.Add(i);
    }
    return string.Join(",", duckbillDptsStr); // <-- will this work?
}

Razor:

// I first wanted to use List<int> but then realized HTML would probably mutiny if I tried to give it that data type
@{string duckbillDeptsCSV = CCRReporterUtils.getDuckbillDepts()}

HTML:

<input type="hidden" name="AllDepts" id="hiddenAllDepts" value="@duckbillDeptsCSV" />

jQuery:

var deptsArray = $('hiddenAllDepts').val();

...but "duckbillDeptsCSV" in the HTML is red, indicating (right?) that it's confusing the piler. Am I doing it wrong?

• c#
• javascript
• jquery
• asp-mvc
• razor

• Possibly. Visual Studio can have issues with errors in views. What does it say when you hover on the error? Or what happens when you run it? Normally views are piled at run you'll be able to pile and run it without issues. – Steven V Commented Aug 16, 2013 at 19:01
• Have you tried loading the page and seeing what the actual error message is? That could go a long way toward telling you your problem. My first flag though, is that you aren't terminating your assignment statement. That's a problem right there. Second, you don't need to use a hidden field to do what you're talking about. You can pass (please don't retrieve from utils in your view) your data to the view, and then use Razor-mingled javascript to create variables and set their initial values. – Brian Warshaw Commented Aug 16, 2013 at 19:03
• @Steven V: It says, "Cannot resolve symbol" – B. Clay Shannon-B. Crow Raven Commented Aug 16, 2013 at 19:05
• 1 @BrianWarshaw: "razor-mingled javascript"? JS doesn't know anything about Razor, does it? IOW, never the twain shall meet? – B. Clay Shannon-B. Crow Raven Commented Aug 16, 2013 at 19:07
• You're using Razor/ASP.NET MVC to pose an HTML document, just the same as if you did it by hand, or with PHP, or anything else that determines the output that's sent to the browser. So if you've got it "in Razor", you can output it within your javascript tags as part of whatever else you have in there. JS doesn't know anything about PHP, or your keyboard, or anything else, either. A document is sent to the browser--Razor is just helping you form that document. – Brian Warshaw Commented Aug 16, 2013 at 19:12

4 Answers 4

You could replace your <input type="hidden"... with Html.Hidden:

@Html.Hidden("AllDepts", duckbillDeptsCSV, new { id = "hiddenAllDepts" })

And update your jQuery to use # to tell it to look for that id (as is, it's looking for a <hiddenAllDepts> tag)

var deptsArray = $('#hiddenAllDepts').val();

If you are not against having some JavaScript within the MVC View, then you can just add the code directly into the JavaScript. e.g.

<script>
    var deptsArray = '@CCRReporterUtils.getDuckbillDepts()';
</script>

This is just an alternative way to the other answers.

To convert this into an array you should be able to just do something like;

var deptsArray = ('@CCRReporterUtils.getDuckbillDepts()').split(',');

You can just instantiate a variable in javascript passing it the C# value and then retrieve it in jquery. Using Html.Raw and the Json.Encode method

In C# return the array instead of joining it:

public static List<string> getDuckbillDepts()
{
    List<string> duckbillDptsStr = new List<string>();
    for (int i = 2; i < 100; i++)
    {
        duckbillDptsStr.Add(i.ToString());
    }
    return duckbillDptsStr;
}

In your view you would have something like:

<script type="text/javascript">
   var deptsArray = @Html.Raw(Json.Encode(CCRReporterUtils.getDuckbillDepts()));
</script>

And then in jquery you would just do something with it, since you would have an array of strings it seems:

<script type="text/javascript">
   $.each(deptsArray, function (i,e) {
      // Do something with each value
   });
</script>

Try using the right # filter with jquery to get the element by id, for sample:

var deptsArray = $('#hiddenAllDepts').val(); // get a string

If you want a array, you have to use .split() method of javascript and get the value as a array, for sample:

var deptsArray = $('#hiddenAllDepts').val().split(','); //get a array of strings