Is it possible to get data from C#/Razor in jQuery by way of HTML?

Question

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 compiler. Am I doing it wrong?

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 compiled at run you'll be able to compile and run it without issues. — Steven V, Aug 16 '13 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, Aug 16 '13 at 19:03
@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, Aug 16 '13 at 19:07
You're using Razor/ASP.NET MVC to compose 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, Aug 16 '13 at 19:12
@BrianWarshaw: What I'm thinking is jQuery will not know what to do with a "@"; am I wrong? I'd like to see some sample code that puts Razor data into jQuery. — B. Clay Shannon-B. Crow Raven, Aug 16 '13 at 19:18
By the way, it wouldn't mutiny if you give it a list, just do a `ToString`, which is pretty useless: ``System.Collections.Generic.List`1[System.Int32]``. — Tim S., Aug 16 '13 at 19:33

score 3 · Accepted Answer · answered Aug 16 '13 at 19:26

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();

score 2 · Answer 2 · answered Aug 16 '13 at 21:11

2

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(',');

answered Aug 16 '13 at 21:11

Tim B James

20,084
4
73
103

Thanks; I'll be glad to try this once I get past this weird behavior: http://stackoverflow.com/questions/18282029/why-is-visualstudio-firefox-giving-me-a-ysod-from-code-in-an-excluded-class – B. Clay Shannon-B. Crow Raven Aug 16 '13 at 21:17

score 2 · Answer 3 · edited Aug 17 '13 at 08:26

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>

score 1 · Answer 4 · answered Aug 16 '13 at 19:26

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

Is it possible to get data from C#/Razor in jQuery by way of HTML?

4 Answers4