[RESOLVED]send the dropdownlist selected item to controller and get the response back

I am now displaying a kendo chart based on the following code in the view and controller. I would need to introduce a dropdown and based on the selected item, I would need to send a request to controller and display the chart based on the result.

View:

@(Html.Kendo().Chart(Model) // The chart will be bound to the Model which is the InternetUsers list
      .Name("internetUsersChart") // The name of the chart is mandatory. It specifies the "id" attribute of the widget.
      .Title("Internet Users")
      .Series(series => {
          series.Bar(model => model.score) // Create a bar chart series bound to the "Value" property
                .Name("Score");
      })
      .CategoryAxis(axis => axis
          .Categories(model => model.Name)
      )
)

Controller:

List<GraphObj> data = new List<GraphObj>(Getvalues());
            var x = data.Where(a => a.sector == "abc").ToList();

return View(x);

Hi Ragavalli,

Here is the sample code. Just call Dropdownlist change event by using jquery

public partial class ProductController : Controller
{

public virtual ActionResult Produt()
{
var products = new List<ProductsModel>
{
new ProductsModel
{
Id = 1,
Name = "Product1"
},
new ProductsModel
{
Id = 2,
Name = "Product2"
},
new ProductsModel
{
Id = 3,
Name = "Product3"
},
new ProductsModel
{
Id = 4,
Name = "Product4"
}
};
var model = new ProductModel
{
Products = products
};
return View(model);
}

public virtual ActionResult GetData(int id)
{
ViewBag.Data = id;
return View();
}

}

public class ProductModel
{

public int ProductId { get; set; }

public List<ProductsModel> Products { get; set; }

}

Product View :

@model MVCTutorials.Controllers.ProductModel
@{
ViewBag.Title = "ProdutoCategoria";
}

<h2>ProdutoCategoria</h2>

@using (Html.BeginForm())
{
<label>Select Product </label>
@Html.DropDownListFor(m => m.ProductId, new SelectList(Model.Products, "Id", "Name"))
<input type="submit" value="Enter" />

}

<script src="~/Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">

$(function () {

$(‘#ProductId’).change(function () {
var productId = $(this).val();
window.location = "/Product/GetData/" + productId;
});

});
</script>

GetData view:

@{
ViewBag.Title = "GetData";
}

<h2>GetData</h2>

<h3>@ViewBag.Data</h3>

Thanks,

Seshasayana Reddy

Leave a Reply