how to change modelview via Ajax with dropdownchange value?

亡梦爱人 提交于 2020-06-28 03:55:19

问题


im stuck with a code.

on my mvc application, i had a view, the view contains a dropdownlist, and a bar chart from charts.js nugget. the datasources of the chart are the model.field1, and model.field2 for each axis,

so, im trying, to, when i change dropdownlist item my model change , im passing the dropdownlist.val() to an action in the controller, that action change the model, the model returns chaged to the view and the chart must change dinamicly, i post my code, dont know what i doing wrong, but dont work. debuggin i find that the value of the dropdown is passing to the action, but i dont know why the chart dont change.

my view

@model GestorBd.Models.FuenteDatos

<br /><br />

<div>

    @Html.DropDownList("TiposAFT", null, "--Opciones--", htmlAttributes: new { @class = "form-control", @onchange = "CargarPartial()" })

</div>


<div style="width:800px; height: 1600px; ">
    <canvas id="myChart" ></canvas>
</div>


@section Scripts{

<script>
    function CargarPartial() {
        var desc = $('#TiposAFT').val();
        $.ajax({
            url: '/Estadisticas/Index',
            type: "POST",
            data: JSON.stringify({ param: desc }),
            contentType: 'application/json',
            success: function (data) {                  
            }
        });
    }
</script>



<script src="~/Scripts/Chart.js"></script>
<script>
    var arregloarea = @Html.Raw(System.Web.Helpers.Json.Encode(Model.Area.ToArray()));
    var arregloCantidad = @Html.Raw(System.Web.Helpers.Json.Encode(Model.Cantidad.ToArray()));
    var label = @Html.Raw(System.Web.Helpers.Json.Encode(Model.label));
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: arregloarea,
            datasets: [{
                label: label,
                data: arregloCantidad,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

}

my action

public ActionResult Index(string param)
    {
        FuenteDatos nuevo = new FuenteDatos();

        if(string.IsNullOrEmpty(param))
                { param = "Computadora"; }


        nuevo = nuevo.ObjetenerDatosDescripcion(param);

        Listados a = new Listados();

        ViewBag.TiposAFT = a.TiposAFT();

        return View(nuevo);
    }

来源:https://stackoverflow.com/questions/62318159/how-to-change-modelview-via-ajax-with-dropdownchange-value

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!