Mixing razor syntax with javascript

Question

On my homecontroller's index view page, I want to display data extracted from database on a Google map. So, what I do is include the model.cs file in homecontroller.cs file and pass the entire database data to view by converting it to list and passing as a Viewbag object. But now when I try to display markers on the map based on database's data, it doesn't show. Even a simple javascript alert() statement doesn't show anything on screen. Following is the code:-

-----------------EventsRegister.cs(Model page)------------

namespace CampusConnect.Models
{
    public class EventReg
    {
        public int ID { get; set; }
        public string UniqueId { get; set; }
        public float Latitude { get; set; }
        public float Longitude { get; set; }
        public string Description { get; set; }
    }

    public class EventDBContext: DbContext
    {
        public DbSet<EventReg> Events { get; set; }
    }
}

-----------------Homecontroller.cs-----------------------

namespace CampusConnect.Controllers
{


    public class HomeController : Controller
    {


        private EventDBContext db = new EventDBContext();
        private List<EventReg> list;

        public ActionResult Index()
        {
            list = db.Events.ToList();
            ViewBag.Message = "Please Register/Login to continue";
            ViewBag.EntireList= list;
            return View();
        }
    }
}

----------------Index.cshtml(Homecontroller's index view)----------------

@section bodyOrMap {
@if (Request.IsAuthenticated)
{
    <text>
        <div class="content-wrapper">

            @*Google Maps included*@

            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
                <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC7TFDjCbI4A10H2J-f6zBFHToFQIs6Z2M&sensor=true"></script>
                <script type="text/javascript">

                    function InitializeMap() {
                        var geocoder = new google.maps.Geocoder();
                        var latlng = new google.maps.LatLng(29.8644, 77.8964);
                        var myOptions = {
                            disableDoubleClickZoom: true,
                            zoom: 17,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map(document.getElementById("map"), myOptions);
                        @foreach (var item in ViewBag.EntireList)
                        {
                        <text>
                        alert(@item.Description);  -------->THIS DOESN'T PRINT
                        </text>
                         }


                        var aListener = google.maps.event.addListener(map, 'dblclick', function (event) {
                            alert("Double click displays values" + event.latLng.lat() + " " + event.latLng.lng());

                        });
                    } //Initialise map function ends
                    window.onload = InitializeMap;

                </script>

                <div id="map" style="top: 0px; left: 0px; /*width: 500px;*/ height: 338px; position: relative; float: left; display: inline; width:49%">

                </div>

            </asp:Content>

        </div>
    </text>
}
else
{
    //some HTML
}
}

The map gets displayed but the alert statement doesn't print. Also, the double click event handler doesn't work(Although, it worked before when no data was there in the database). I have checked the database and there is a table Events.mdf with a row of data that I entered.

Can somebody tell me what the problem is? I am a newbie at programming in asp.net so it might be a minor point. Thanks.

Answer 1

You're using Razor to output a string, which in the context of the final JavaScript becomes a literal string. JavaScript requires quotes around literal strings.

Try this:

alert("@item.Description");

For example, if item.Description contains the value San Francisco then your final JavaScript output ends up being:

alert("San Francisco");

Without the quotes you will have:

alert(San Francisco);

which will have JavaScript trying to figure out what San and Francisco mean as JavaScript identifiers.

Answer 2

It's likely that item.Description doesn't actually store a valid JavaScript string, or if it does, that it's not properly encoded. For example if item.Discription had the value "Hello World!" then the rendered output of this

alert(@item.Description);

would be this:

alert(Hello World!);

which is obviously not valid javascript.

Try something like this instead:

alert(@Html.Raw(Json.Encode(item.Description)));

Also, you don't need to put <text> around the alert (which is also not valid JavaScript) if you print it like this:

@foreach (var item in ViewBag.EntireList)
{
    @:alert(@Html.Raw(Json.Encode(item.Description)));
}

Although, it seems like that <text> was probably just some placeholder text for something else.