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