Javascript 如何使用dropdownchange值通过Ajax更改modelview?

Javascript 如何使用dropdownchange值通过Ajax更改modelview?,javascript,c#,ajax,asp.net-mvc,razor,Javascript,C#,Ajax,Asp.net Mvc,Razor,我被一个密码困住了 在我的mvc应用程序中,我有一个视图,该视图包含一个dropdownlist和charts.js nugget中的一个条形图。图表的数据源是每个轴的model.field1和model.field2 所以,当我改变dropdownlist项我的模型改变时,我会把dropdownlist.val()传递给 控制器中的一个操作,该操作改变了模型,模型返回到视图,图表必须进行动态更改,我发布代码,不知道我做错了什么,但不工作。debuggin我发现下拉列表的值正在传递给动作,但我不

我被一个密码困住了

在我的mvc应用程序中,我有一个视图,该视图包含一个dropdownlist和charts.js nugget中的一个条形图。图表的数据源是每个轴的model.field1和model.field2

所以,当我改变dropdownlist项我的模型改变时,我会把dropdownlist.val()传递给 控制器中的一个操作,该操作改变了模型,模型返回到视图,图表必须进行动态更改,我发布代码,不知道我做错了什么,但不工作。debuggin我发现下拉列表的值正在传递给动作,但我不知道为什么图表没有改变

我的看法

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

如果可能,加载JSON并将其从服务器分配给图表数据,同时更改下拉值JSON将更改并更新图表@jishansiddique不明白你的答案,我现在正在研究图表更新功能来解决我的问题,我相信我必须将图表更新方法放在javascript功能中,如果可能的话,加载JSON并将其从服务器分配给图表数据,同时更改下拉值JSON将更改并更新图表@jishansiddique不明白你的答案,我现在正在研究图表更新功能来解决我的问题,我相信我必须将图表更新方法放在javascript功能中
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);
    }