如何正确组合javascript与剃刀语法

时间:2016-02-05 22:32:01

标签: javascript c# asp.net-mvc asp.net-mvc-4 razor

我的剃刀视图中有以下代码,我需要设置一些javascript变量来设置来自剃刀的值。

但是没有设置变量的值。

var listPuntos =[];
    function onSelect(e) {
        var dataItem = this.dataSource.view()[e.item.index()];
        @{
            var proveedorID = 0;
            <text>proveedorID = dataItem.ProveedorID</text>
            var list = new UnitOfWork().PuntosVentaProveedorRepository.Get().Where(x => x.ProveedorID == proveedorID);
            proveedorID = 0;
            <text>listPuntos = list; </text>;
            <text>
                var displayText;
                $.each(listPuntos, function (key, value) {
                    if (displayText == undefined)
                        displayText = value.Nombre + ', ';
                    else
                        displayText = displayText + value.Nombre + ', ';
                });
                document.getElementById("puntos").value = displayText.slice(0,-2);
            </text>
        }

    }

2 个答案:

答案 0 :(得分:2)

根据您的具体示例,我将首先减少所需的<text>块的数量,而不是仅使用@{ … }包裹较短的 C#位。这提高了可读性和安全性。减少混乱。例如:

var listPuntos =[];
    function onSelect(e) {
        var dataItem = this.dataSource.view()[e.item.index()];
        @{ var proveedorID = 0; }
        proveedorID = dataItem.ProveedorID;
        @{ var list = new UnitOfWork().PuntosVentaProveedorRepository.Get().Where(x => x.ProveedorID == proveedorID); }
        proveedorID = 0;
        listPuntos = @Json.Encode(list);
        var displayText;
        $.each(listPuntos, function (key, value) {
            if (displayText == undefined)
                displayText = value.Nombre + ', ';
            else
                displayText = displayText + value.Nombre + ', ';
        });
        document.getElementById("puntos").value = displayText.slice(0,-2);
    }

接下来,要将注入 C#值转换为服务器发出的JavaScript代码,您需要在JavaScript 中对值进行编码。执行此操作的最佳方法是将其转换为JSON。以上使用Json.Encode完成此操作。特别是,读行:

        listPuntos = @Json.Encode(list);

我已经使用了Json.Encode,但您当然可以自由使用适合您项目的任何JSON库。

答案 1 :(得分:1)

你应该分开html代码和javascript代码。 首先,在加载View时不要从View调用任何服务器代码。通过适当格式的模型属性(即以json格式)推送所有必需的数组等,然后从该属性的值填充任何客户端列表。 其次 - 移动代码:

        var displayText;
        $.each(listPuntos, function (key, value) {
            if (displayText == undefined)
                displayText = value.Nombre + ', ';
            else
                displayText = displayText + value.Nombre + ', ';
        });
        document.getElementById("puntos").value = displayText.slice(0,-2);

适当的部分,如:

@section scripts
{
    <script>
.....
    </script>
}