how to acces list object inside javascript funtion asp.net

Question

this is my list in c# view

@model SmartFeedBackModel.Models.Question;
@{
ViewData["Title"] = "Index";
}

@{
List<SmartFeedBackModel.Models.Question> list = ViewBag.Questions;

 }

this is my java script function

var i = 0;
    var qustid = 0 ;
    function aaa() {
        var a = @list[0].Answer1;
        alert(a);
        qustid = 22;
        i = i + 1;
    }

cannot assign value to variable a

both list and the js function are on the same view.so i need to get the list elements inside the js function and after that will display one by one manually by button click..if you have a better solution,let me know.thanks in advanced — sandun, Jan 18 '18 at 06:00
if you able to show an alert this element "@list[0].Answer1" .its better — sandun, Jan 18 '18 at 06:04
@NightOwl888 Not actually, the list value will be generated and inserted to html (if the script in same view). sandun If you open your browsers console, you should see there error, which will look something like this `ReferenceError: is not defined`. — SᴇM, Jan 18 '18 at 06:06

Prajwal · Answer 1 · 2018-01-18T07:25:13.043

2

You cannot use C# Objects directly in JavaScript. What you are trying to do is something like this.

On Server
--> Get the object & assign it to list.
--> create a script where line is var a = value of @list[0].Answer1

On Client 
--> Try to run  a = value of @list[0].Answer1

This doesn't work. Instead, you need to parse the list to JSON or JS Array. So, it will be something like this.

var jsList = JSON.parse('@Html.Raw(Json.Serialize(list))');
var i = 0;
var qustid = 0;
    function aaa() {
        var a = jsList[i].Answer1;
        alert(a);
        qustid = 22;
        i = i + 1;
    }

I'm assuming you need all the answers on client side and after calling aaa() you need to display next answer.

This is for converting C# array to JS Array.

How do I convert a C# List<string[]> to a Javascript array?

Edit: Json.Encode is not supported in .NET Core. Instead use Json.Serialize()updated the above code.

edited Jan 18 '18 at 07:25

answered Jan 18 '18 at 06:15

Prajwal

3,930
5
24
50

You can use c# objects in JS, if he add quotes `''` or `""` it will work fine, but anyway, it is not the best way to achieve that. – SᴇM Jan 18 '18 at 06:17
@SeM I know, I think what he want is that entire object. Not just one value. – Prajwal Jan 18 '18 at 06:18
I recommend this answer, its best to load the data to the client side then do whatever needs to be done on the JavaScript side. To be quiet frank, try reducing razor code to avoid slowness in rendering the page (since it is server side) - which is my biggest issue that I am facing with razor. – 93Ramadan Jan 18 '18 at 06:23
The best solution would be, if he will create a proper View Model, then use its values. – SᴇM Jan 18 '18 at 06:25
there is an error in Json.Encode .what should i do to avoid it – sandun Jan 18 '18 at 07:02
i'm using .net core .so if there is another way to do this plz hlp – sandun Jan 18 '18 at 07:04
"IJsonHelper' does not contain a definition for 'Encode' and no extension method 'Encode' accepting a first argument of type 'IJsonHelper' could be found (are you missing a using directive or an assembly reference? " this is the error... – sandun Jan 18 '18 at 07:22

score 0 · Accepted Answer · answered Jan 18 '18 at 06:03

0

Try changing @list[0].Answer1 to '@list[0].Answer1'

This will allow you to assign string razor values to a javascript variable.

answered Jan 18 '18 at 06:03

Anthony McGrath

792
5
7

var i =0 ; function aaa() { a = '@list[i].QuestionID'; alert(a); i = i + 1; } //here i need increment the i value..but error occurs saying name 'i' does not exist in the current context.plz hlp if you knok – sandun Jan 18 '18 at 06:43

how to acces list object inside javascript funtion asp.net

2 Answers2