How to correctly combine javascript with razor syntax

Question

I have the following code in my razor view, I need to set some javascript variables to set the value coming from razor.

However the values of the variables are not being set.

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

    }

Its not clear what your trying to achieve or what results your getting and what your expect. var list = new UnitOfWork(... is razor code and is evaluated on the server before its sent to the view (and is the result of .Where(x => x.ProveedorID == 0). Changing the javascript variable - proveedorID = dataItem.ProveedorID does not change the result of var list. — user3559349
– user3559349, Commented Feb 5, 2016 at 23:33
If your wanting to filter results on the client you need ajax to call a server method that returns the results that you want, or you need to store everything in the client (assigned to a javascript array) and search that array (but you would only do that if the unfiltered result set is small) — user3559349
– user3559349, Commented Feb 5, 2016 at 23:35

Atif Aziz · Accepted Answer · 2016-02-09 21:06:47Z

Given your concrete example, I would start by reducing the number of <text> blocks needed by instead just wrapping the shorter C# bits with @{ … }. This improves readability & lessens confusion. For example:

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);
    }

Next, to inject a C# value into JavaScript code being emitted by the server, you need to encode the value in JavaScript. The best way to do this is to convert it into JSON. This is done above using Json.Encode. In particular, the line reading:

        listPuntos = @Json.Encode(list);

I've used Json.Encode but of course you are free to use whatever JSON library du jour that fits your project.

This will only ever return exactly the same results each time it is run because list is always the results of .Where(x => x.ProveedorID == 0)

Oleg Sh · Accepted Answer · 2016-02-05 22:51:21Z

you should separate html code and javascript code. First at all, don't call any server code from View when View is loading. Push all necessary arrays etc via model property in appropriate format (i.e. in json format) and then fill any client list from value of that property. Secondly - move code like it :

        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);

to appropriate section, like it:

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

Collectives™ on Stack Overflow

How to correctly combine javascript with razor syntax

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related