Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • J 447 posts 864 karma points
    Mar 20, 2016 @ 15:29
    J
    0

    Pass razor variable to Javascript

    Struggling with this and hoping someone could help me here.

    I have the below code:

    @if (Model.Children.Where("Visible").Any())
    {
        var naviLevel = Model.Children.Where("Visible").First().Level;
        <ul class="level-@naviLevel">            
            @foreach (var childPage in Model.Children.Where("Visible"))
            {
                var ID = @childPage.Id;
                var CustName = @childPage.Name;
                var CustAge = @childPage.Age;
                var CustCountry = @childPage.Country;
            }
        </ul>
    }
    

    The above code goes through the childpage and gets all the value from the properties and adds them to each variable.

    I then have the below javascript. This accepts an array of the above customers which is then displayed in the browser. I have added a few extra repeating lines to show that if the above razor code returns 10 customers then the 10 customers details would be displayed on 10 different lines:

    <script type="text/javascript">
    
        var Customers = [
          ['Name', Age, Country, ID],
          ['Name', Age, Country, ID],
          ['Name', Age, Country, ID],
          ['Name', Age, Country, ID],
          ['Name', Age, Country, ID]
          ....
          .....
        ];
    ....
    .....
    </script>
    
    1. Within the razor code instead of having individual variables (var ID, CustName etc), i think i should create an object called customer with the variables as properties. If this is the correct approach, then

    A). How can i create this object?

    B). How can i pass this object to the Javascript, so it would display all the customers found?

  • Aristotelis Pitaridis 84 posts 402 karma points
    Mar 20, 2016 @ 15:52
    Aristotelis Pitaridis
    101

    I would do it using an AJAX call and ask for a json object from a controller in order to use in my code but I could easily change your code in order to do what you want.

    <script type="text/javascript">
        var Customers = [
    
    @if (Model.Children.Where("Visible").Any())
    {
        var naviLevel = Model.Children.Where("Visible").First().Level;
    
        foreach (var childPage in Model.Children.Where("Visible"))
        {
            var ID = @childPage.Id;
            var CustName = @childPage.Name;
            var CustAge = @childPage.Age;
            var CustCountry = @childPage.Country;
            <text>['@CustName', @CustAge, '@CustCountry', @ID],</text>
        }
    }
        ];
    </script>
    

    I suppose that ID and Age are numbers, Name and country to be string. I have not tested it but it should work. Inform me if you have a problem with this code.

  • J 447 posts 864 karma points
    Mar 20, 2016 @ 17:14
    J
    0

    Thank you!!!!

    You saved me hours of pain!!

  • Richard 1 post 71 karma points
    May 01, 2018 @ 08:18
    Richard
    0

    Exactly what i needed to quote razor in jquery! Thank you!!

Please Sign in or register to post replies

Write your reply to:

Draft