none
Enviar um array de um controller para uma função javascript em asp.net c# RRS feed

  • Pergunta

  • Bom dia!

    Estou criando uma aplicação em asp.net mvc 5, engine Razor, c#.

    Preciso fazer que retorne as coordenadas (Latitude e Longitude) do banco de dados em um array no controller, e enviar para outro array em javascript, como no trecho abaixo:

    var locations = [
          ['teste 1', -21.76894566, -43.35048437],
          ['teste 2', -21.76051609, -43.34988356],
          ['teste 3', -22.90708389, -43.18203747],
          ['teste 4', -22.93340892, -43.18474114],
          ['teste 5', -23.5505199, -46.6333094]
        ];

    Porém o array ficará dentro de um for.

    Alguém tem algum exemplo que possa me ajudar.

    Desde já agradeço.

    Att., Reivert.


    sexta-feira, 5 de agosto de 2016 14:33

Respostas

  • Obrigado pela resposta Raphael, mas encontrei o que buscava.

    Consegui da seguinte maneira:

    Na Controller passei por parâmetro o nome do vendedor, fiz uma consulta obtendo uma lista dos meus dados da model.

    public ActionResult Search(string vendedor)
            {
                var result = ws.VendaCompleto().Vendas.Where(x => x.NomeVendedor.StartsWith(vendedor)).ToList();
                return Json(result, JsonRequestBehavior.AllowGet);
            }

    No Javascript, criei um método utilizando o AJAX, que me retorna as informações da controller:

    $('#drop').change(function () {
                var x = $("#drop").val();
                for (i = 0; i < gmarkers.length; i++) {
                    gmarkers[i].setMap(null);
                }
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Search", "Home")',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ "vendedor": x }),
                    dataType: "json",
                    success: function (data) {
                        var table = "<table class='table'>";
                        $.each(data, function (index, value) {
                            table += "<tr><td>" + value.NomeFantasia + "</td></tr>";
                            var latlng = new google.maps.LatLng(value.Latitude, value.Longitude);
                            var marker = new google.maps.Marker({
                                ,
                                icon: "../Images/marker.png",
                                title: value.NomeFantasia,
                                zoom: 15,
                                map: map
                            });

                            gmarkers.push(marker);

                        });
                        table += "</table>";
                        $("#myData").html(table);

                        if (x == "") {
                            for (j = 0; j < gmarkers.length; j++) {
                                gmarkers[j].setMap(null);
                            }
                        }
                    }

                });
            });

    E por último na View, um dropdown para selecionar o Vendedor:

    <label class="font-noraml">Vendedores</label>
                        @Html.DropDownList("ddl", Model.Vendedores.Select(item => new SelectListItem
                        {
                            Value = item.IdVendedor.ToString(),
                            Text = item.NomeVendedor.ToString(),
                            Selected = "select" == item.NomeVendedor.ToString()
                        }), "Selecione...", new { @Class = "form-control", @id = "drop" })

    Depois exibi os clientes em uma table utilizando uma lista da Model:

    <table class="table">
                    <tr>
                        <td valign="top">
                            <div class="form-group">
                                @Html.TextBox("txtSearch", null, new { @placeholder = "Buscar Cliente", @Class = "form-control" })
                            </div>

                            <div id="myData" style="width:175px; height:600px; z-index:1; overflow: auto;">
                                <table class="table">
                                    @foreach (var item in @Model.Vendas)
                                    {
                                        <tr>
                                            <td>
                                               @item.NomeFantasia
                                            </td>
                                        </tr>
                                    }
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
    • Marcado como Resposta Reivert Zulato sexta-feira, 19 de agosto de 2016 20:40
    sexta-feira, 12 de agosto de 2016 19:56

Todas as Respostas

  • "...o array ficará dentro de um for..."

    Não entendi bem a que se refere, mas vou tentar ajudar (já que você não deu muita informação):

    - No banco de dados, você tem a lista de coordenadas, certo? Imagino que as colunas sejam "nome", "lat" e "lon", certo? Então, teriamos um resultado da SQL assim:

    nome                     lat                 lon

    teste 1                   -21.76051609  -43.34988356

    teste 2                   -21.76051609  -43.34988356

    teste 3                   -22.90708389  -43.18203747

    teste 4                   -22.93340892  -43.18474114

    teste 5                   -23.5505199    -46.6333094

    (select nome, lat, lon from coordenadas)

    - Esse resultado, você vai popular uma lista de mesmo tipo, com as mesmas propriedades (List<Coordenadas>), onde as propriedades, serão respectivamente, "Nome, Lat e Lon". Correto?

    - Na Model da sua página, você cria a propriedade List<Coordenadas> lstCoordenadas, a qual vai ser preenchida no carregar de seu controler, e usava lá na View.

    - Na View, basta efetuar o "foreach" e para cada item, a marcação html.

    No geral, é isso que tu tem que fazer.

    Caso queira a mesma representação dele na View, para javascript, você pode fazer na View:

    var oCoordenadas = (@Html.Raw(JsonConvert.SerializeObject(Model)));
    Obs: no caso acima, estou fazendo uso do Newtonsoft (um excelente serializados para .NET), que pode ser baixado gratuitamente através do Nuget.









    • Editado undefined error segunda-feira, 8 de agosto de 2016 17:45
    • Marcado como Resposta Reivert Zulato sexta-feira, 19 de agosto de 2016 20:40
    • Não Marcado como Resposta Reivert Zulato sexta-feira, 19 de agosto de 2016 20:40
    segunda-feira, 8 de agosto de 2016 17:40
  • Obrigado pela resposta Raphael, mas encontrei o que buscava.

    Consegui da seguinte maneira:

    Na Controller passei por parâmetro o nome do vendedor, fiz uma consulta obtendo uma lista dos meus dados da model.

    public ActionResult Search(string vendedor)
            {
                var result = ws.VendaCompleto().Vendas.Where(x => x.NomeVendedor.StartsWith(vendedor)).ToList();
                return Json(result, JsonRequestBehavior.AllowGet);
            }

    No Javascript, criei um método utilizando o AJAX, que me retorna as informações da controller:

    $('#drop').change(function () {
                var x = $("#drop").val();
                for (i = 0; i < gmarkers.length; i++) {
                    gmarkers[i].setMap(null);
                }
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Search", "Home")',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ "vendedor": x }),
                    dataType: "json",
                    success: function (data) {
                        var table = "<table class='table'>";
                        $.each(data, function (index, value) {
                            table += "<tr><td>" + value.NomeFantasia + "</td></tr>";
                            var latlng = new google.maps.LatLng(value.Latitude, value.Longitude);
                            var marker = new google.maps.Marker({
                                ,
                                icon: "../Images/marker.png",
                                title: value.NomeFantasia,
                                zoom: 15,
                                map: map
                            });

                            gmarkers.push(marker);

                        });
                        table += "</table>";
                        $("#myData").html(table);

                        if (x == "") {
                            for (j = 0; j < gmarkers.length; j++) {
                                gmarkers[j].setMap(null);
                            }
                        }
                    }

                });
            });

    E por último na View, um dropdown para selecionar o Vendedor:

    <label class="font-noraml">Vendedores</label>
                        @Html.DropDownList("ddl", Model.Vendedores.Select(item => new SelectListItem
                        {
                            Value = item.IdVendedor.ToString(),
                            Text = item.NomeVendedor.ToString(),
                            Selected = "select" == item.NomeVendedor.ToString()
                        }), "Selecione...", new { @Class = "form-control", @id = "drop" })

    Depois exibi os clientes em uma table utilizando uma lista da Model:

    <table class="table">
                    <tr>
                        <td valign="top">
                            <div class="form-group">
                                @Html.TextBox("txtSearch", null, new { @placeholder = "Buscar Cliente", @Class = "form-control" })
                            </div>

                            <div id="myData" style="width:175px; height:600px; z-index:1; overflow: auto;">
                                <table class="table">
                                    @foreach (var item in @Model.Vendas)
                                    {
                                        <tr>
                                            <td>
                                               @item.NomeFantasia
                                            </td>
                                        </tr>
                                    }
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
    • Marcado como Resposta Reivert Zulato sexta-feira, 19 de agosto de 2016 20:40
    sexta-feira, 12 de agosto de 2016 19:56