locked
Populate java script with dataset RRS feed

  • Question

  • User-183185495 posted

    I have a table of flags which I get simply as this.

    public void GetFlags()
    {
            var flags = _context.Flags.ToList();
            ViewBag.CountryFlags = flags;
    }

    I want to place it in a view bag but I need it in this format

    var isoCountries = [
            { id: 1, flag: 'af', country  : 'Afghanistan' },
            { id: 2, flag: 'ax', country  : 'Aland Islands' },
            { id: 3, flag: 'al', country  : 'Albania' },
            { id: 4, flag: 'dz', country  : 'Algeria' },
            { id: 5, flag: 'as', country  : 'American Samoa' },
            { id: 6, flag: 'ad', country  : 'Andorra' },
            { id: 7, flag: 'ao', country  : 'Angola' },
            { id: 8, flag: 'ai', country  : 'Anguilla' }
    ]
    

    How would I ensure that my class is encoded properly I know I should have the same elements as wanted in iso countries but how do I serialize, is correctly.

    Flags class

    public class Flags {
        public int id { get; set; }
        public string flag { get; set; }
        public string country  { get; set; }
    }
    

    This is how I produce the flag in the dropdown.

    <Script>
    
     $(function () {
        //Initialize Select2 Elements
        //$('.select2').select2()
        var isoCountries = @ViewBag.CountryFlags; 
    
        function formatCountry(country) {
            if (!country.id) { return country.text; }
            var $country = $(
                '<span class="flag-icon flag-icon-' + country.flag + ' flag-icon-squared"></span>' +
                '<span class="flag-text">' + country.country + "</span>"
            );
            return $country;
        };
    
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>
        $("[id='CountryOfBirth']").select2({
            placeholder: "Please Select a country",
            templateResult: formatCountry,
            data: isoCountries
        });
    
          $('#CountryOfBirth').trigger('change');
    
    });
    </script>

    What I tried

    public void GetFlags() {
       var flags = _context.Flags.ToList();
       var isoCountires = JsonConvert.SerializeObject(flags);
       ViewBag.CountryFlags = isoCountires;
     }

    I also tried using this as I noticed by json was having html encoding on it

     var isoCountries = { json : "@Html.Raw(JsonConvert.SerializeObject(@ViewBag.CountryFlags))" };
    

    Friday, August 28, 2020 8:25 PM

Answers

  • User475983607 posted

    The code is...

        <script>
            var isoCountries = @Html.Raw(Json.Encode(ViewBag.CountryFlags));
            console.log(isoCountries);
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 28, 2020 8:57 PM

All replies

  • User475983607 posted

    The code is...

        <script>
            var isoCountries = @Html.Raw(Json.Encode(ViewBag.CountryFlags));
            console.log(isoCountries);
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 28, 2020 8:57 PM
  • User-183185495 posted

    At least I was kinda closer this time 

    The code is...

        <script>
            var isoCountries = @Html.Raw(Json.Encode(ViewBag.CountryFlags));
            console.log(isoCountries);
        </script>

    Friday, August 28, 2020 9:53 PM
  • User-183185495 posted

    It needs to be this in .net core 3.1.7 folks encode is no longer there.

           var isoCountries = @Html.Raw(Json.Serialize(ViewBag.CountryFlags));

    This actually doesnt work and the page is freezing with this :-(

    Friday, August 28, 2020 9:57 PM
  • User475983607 posted

    The first example is ASP.NET MVC.  

    ASP.NET Core 3.1 uses the System.Text.Json namespace.

        <script>
            var isoCountries = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(ViewBag.CountryFlags));
            console.log(isoCountries);
        </script>

    Saturday, August 29, 2020 12:27 AM
  • User-183185495 posted

    For some reason it is causing my page to hang when I click on it theirs only 240 countrie entries so dont see why its haning before it was working fine when not in the database.

    <Script>
    
        $(function () {
            //Initialize Select2 Elements
            //      $('.select2').select2();
     
            var isoCountries = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(ViewBag.CountryFlags));
            console.log(isoCountries);
         
    
            function formatCountry(country) {
                if (!country.id) { return country.country; }
                var $country = $(
                    '<span class="flag-icon flag-icon-' + country.flag + ' flag-icon-squared"></span>' +
                    '<span class="flag-text">' + country.country + "</span>"
                );
                return $country;
            };
    
            //Assuming you have a select element with name country
            // e.g. <select name="name"></select>
            $("[id='CountryOfBirth']").select2({
                placeholder: "Please Select a country",
                templateResult: formatCountry,
                data: isoCountries
            });
    
              $('#CountryOfBirth').trigger('change');
    
        });
    
    </Script>

    The first example is ASP.NET MVC.  

    ASP.NET Core 3.1 uses the System.Text.Json namespace.

        <script>
            var isoCountries = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(ViewBag.CountryFlags));
            console.log(isoCountries);
        </script>

    Saturday, August 29, 2020 4:44 PM