问题
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