I am trying to refresh my partial views whenever my dropdown closes and pass the string from the dropdown into those views (when necessary, some do not require the string to be input). However, I am not sure how to be able to get the javascript and razor to work with each other.
I have tried updating the Model.ProdLine.Id value whenever the DropDown closes but I read that the model essentially disappears after the page is created so that is not a viable option. Next I tried to have a JS function pass the parameter into the method but because they are rendered client side, they never get re-rendered to update the changes, without resetting the main view and essentially being reset to the default.
<script>
function OnClose() {
var chart = $("#safetyIncident-chart").data("kendoChart");
//Just refresh MonthlyPSAGauge and pass in the current string to the method.
chart.dataSource.read();
}
function DropDownValue() {
var value = $("#productionLine-dropdown").data("kendoDropDownList").value();
return { selectProductionLine: value };
}
</script>
I used KendoUI TabStrip for this but each content method can be considered its own partial view so that should not effect anything.
@(Html.Kendo().TabStrip()
.Name("display-tabstrip")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add().Text("Safety")
.Selected(true)
.Content(@<text>
@Html.Action("MonthlySafetyChart", "Display")
</text>);
tabstrip.Add().Text("PSA")
.Content(@<text>
@Html.Action("MonthlyPSAGauge", "Display", new { selectProductionLine = Model.ProdLine.Id})
</text>);
})
)
What I want is to be able to select a different value from the production line and have the partial views update to match that value, but I cannot have the whole page refresh only the partial views. Feel free to ask for clarification and I will try my best!
