Changing graph on radio button selection change - ASP.NET MVC

Question

I use Microsoft chart and I have below line of code to get chart.

 <img src="@Url.Action("GetChart")" alt="Bar Chart using MVC" class="img-responsive" />

I have a radio button list and upon changing the selection, i need to show a different chart in the same place.

<form method="post" id="frmFormType">
        @Html.Label("Select Chart Type")
        @Html.RadioButton("rbChartType", "1", isChecked: true) @Html.Label("First Option")
        @Html.RadioButton("rbChartType", "2", isChecked: false) @Html.Label("Second option")
    </form>

I'm not sure if I can use jQuery change function on this "rbChartType" or use something take advantage of Form. I don't really need to re-post the page but only to change graph. I am not sure how to refetch new chart when selection changed using jQuery. Can anyone please throw some light on this? Thanks

Answer 1

Have both the images:

Make them this way:

 $(function () { $("input").click(function () { $(".graph").addClass("hidden"); $("#" + $(this).attr("value")).removeClass("hidden"); }); }); 

 img {display: block;} .hidden {display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <label><input type="radio" name="graph" value="graph-1" /> Graph 1</label> <label><input type="radio" name="graph" value="graph-2" /> Graph 2</label> <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%201&w=200&h=200" class="graph hidden" id="graph-1" /> <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%202&w=200&h=200" class="graph hidden" id="graph-2" /> 

Answer 2

you can try it!

$(function(){
   $(":radio").click(function() { 
       //do something 
    }); 
})

if above soluation did not work,please use the debug of browser to look for the correct documents. in this way ,you can operate documents with jquery.

---

First,you have to get the srcs of each RadioButton ,if you want to change the img of src by click radio. $(function(){ $("input:radio").click(function(){ if($(this).is("#1")){$(".img").css('background',src1);}else{$(".img").css('background',src2);}})