HOW TO USE MODEL VALUE IN JAVASCRIPT IN RAZOR VIEW

Harsh kumar srivastava

Total Post:43

Points:303
C#  Mvc4 
C#
 221  View(s)
Ratings:
Rate this:

Here is my code but i am not able to use model value in java script code.

@model IEnumerable<MindStickInterview.Web.Models.MarksDetails>


<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
    </div>
    <div id="piechart" style="width: 600px; height: 400px"></div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
    </div>
</div>

<script>
    google.charts.load('current', {
        packages: ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);


    function drawChart() {

        var data = new google.visualization.DataTable();
        var total = 0;

        data.addColumn('string', 'InterviewPapers');
        data.addColumn('number', 'InterviewMarks');

        //for (var i = 0; i < model.length; i++) {
        // data.addRow(["Correct " + model[i].Type + " Questions" + " (" + model[i].Marks + ")", model[i].Marks]);
        // //data.addRow([" InCorrect " + model[i].Type + " Questions" + " (" + model[i].InCorrectQuestions + ")", model[i].InCorrectQuestions]);
        // total = parseInt(model[i].InCorrectQuestions) + parseInt(model[i].Marks);
        // data.addRow(["Total " + model[i].Type + " Questions" + " (" + total + ")", total]);
        //}

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        var options = {
            title: "",
            position: "top",
            fontsize: "14px",
            is3D: true,
            width: 650,
            height: 450,
            pieSliceText: 'value',
            sliceVisibilityThreshold: 0
        };

        chart.draw(data, options);
    }
</script>



  1. Odilian Gosselin

    Post:1

    Points:7
    Re: How to use model value in javascript in razor view

    Hi Harsh,

    You can use following line of code to encode your model value 

    var model = @Html.Raw(Json.Encode(Model))

    This particular line of code can be integrated in the program in the following manner

    @model IEnumerable<MindStickInterview.Web.Models.MarksDetails>
    

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div id="piechart" style="width: 600px; height: 400px"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
        </div>
    </div>

    <script>
        google.charts.load('current', {
            packages: ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        var model = @Html.Raw(Json.Encode(Model))

        function drawChart() {

            var data = new google.visualization.DataTable();
            var total = 0;

            data.addColumn('string', 'InterviewPapers');
            data.addColumn('number', 'InterviewMarks');

            for (var i = 0; i < model.length; i++) {
                data.addRow(["Correct " + model[i].Type + " Questions" + " (" + model[i].Marks + ")", model[i].Marks]);
                //data.addRow([" InCorrect " + model[i].Type + " Questions" + " (" + model[i].InCorrectQuestions + ")", model[i].InCorrectQuestions]);
                total = parseInt(model[i].InCorrectQuestions) + parseInt(model[i].Marks);
                data.addRow(["Total " + model[i].Type + " Questions" + " (" + total + ")", total]);
            }

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            var options = {
                title: "",
                position: "top",
                fontsize: "14px",
                is3D: true,
                width: 650,
                height: 450,
                pieSliceText: 'value',
                sliceVisibilityThreshold: 0
            };

            chart.draw(data, options);
        }
    </script>


Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!