使用javascript混合剃刀语法

时间:2013-12-17 05:39:57

标签: javascript asp.net asp.net-mvc razor

在我的 homecontroller的索引视图页面上,我想显示从Google地图上的数据库中提取的数据。因此,我所做的是在 homecontroller.cs 文件中包含 model.cs 文件,并将整个数据库数据传递给视图,方法是将其转换为列表并作为 Viewbag 对象。但是现在当我尝试根据数据库的数据在地图上显示标记时,它没有显示。即使是简单的javascript alert()语句也不会在屏幕上显示任何内容。以下是代码: -

----------------- 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的索引视图)----------------

@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
}
}

显示地图但不显示警告声明。此外,双击事件处理程序不起作用(虽然它在数据库中没有数据之前工作)。我检查了数据库,并且有一个表Events.mdf,其中包含我输入的一行数据。

有人可以告诉我这是什么问题吗?我是asp.net编程的新手,所以这可能是一个小问题。谢谢。

2 个答案:

答案 0 :(得分:2)

item.Description可能实际上并未存储有效的JavaScript字符串,如果存在,则表明它未正确编码。例如,如果item.Discription的值为"Hello World!",那么此

的渲染输出
alert(@item.Description);

就是这样:

alert(Hello World!);

这显然不是有效的javascript。

尝试这样的事情:

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

此外,如果您按照以下方式打印,则不需要在警报周围放置<text>(也不是有效的JavaScript):

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

虽然看起来<text>可能只是其他东西的占位符文本。

答案 1 :(得分:0)

您正在使用Razor输出一个字符串,该字符串在最终JavaScript的上下文中变为文字字符串。 JavaScript需要引用文字字符串。

试试这个:

alert("@item.Description");

例如,如果item.Description包含值旧金山,则最终的JavaScript输出最终为:

alert("San Francisco");

如果没有引号,您将拥有:

alert(San Francisco);

将使用JavaScript尝试找出 San Francisco 表示JavaScript标识符的含义。