How can i get data on change event of dropdownlist in MVC4? - asp.net

Question

Hi i am using partial view in mvc. i put dropdown in partial view and render that partial view in index page.
I have to get data on change event of dropdown list.I prefer angularjs instead of java script.but i am not able to call controller Action from view using angularjs.
In Controller:
public class HomeController : AthController
{
public ActionResult Index()
{
var dashboardList = GetAllDashboards() as List<DashboardDefinition>;
return View(dashboardList);
}
public ActionResult GetDashboard()
{
return View();
}
...
...
}
In View:
#model IEnumerable<Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition>
#{
ViewBag.Title = "Reporting";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Reporting View</h2>
#Html.ActionLink("Add new Chart", "Create", "Chart", new { area = "Reporting" }, null)
#section SubMenu{
#Html.Partial("_ReportingMenu")
}
In PartialView:
#model IEnumerable<Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div data-ng-app="">
<div class="nav navbar navbar-default navbar-no-margin submenu" data-ng-controller="dashboardController">
<select class="btn btn-default" id="drpDashboard" data-ng-model="dashboard" data-ng-change="dashboardChange(dashboard)">
#foreach (var dashboard in #Model)
{
<option value="#dashboard.Id">#dashboard.DashboardName</option>
}
</select>
<a id="SubMenuIntegratorNew" class="btn btn-default submenu-item" href="#">
<i class="fa fa-file-o fa-lg"></i>
<span class="submenu-item-text">New</span>
</a>
<a id="SubMenuIntegratorSave" class="btn btn-default submenu-item" href="#">
<i class="fa fa-floppy-o fa-lg"></i>
<span class="submenu-item-text">Save</span>
</a>
<a id="SubMenuIntegratorSaveAs" class="btn btn-default submenu-item" href="#">
<i class="fa fa-files-o fa-lg"></i>
<span class="submenu-item-text">Save As</span>
</a>
<a id="SubMenuIntegratorAddChart" class="btn btn-default submenu-item" href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="submenu-item-text">Add Chart</span>
</a>
</div>
</div>
<script type="text/javascript">
function dashboardController($scope) {
$scope.dashboardChange = function (item) {
$http({
url: "/Home/GetDashboard",
method: "GET"
});
}
}
</script>
In this code i checked using debauging that dashboardChage metho is calling but GetDashboard action can't be call.

Answer 1

You can put the Drop down inside a form and include the change attribute to this dropdown like this
#{ Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }); }
#Html.DropDownList("Id", ViewData["Id"] as List<SelectListItem>, new { onchange = "this.form.submit();" })
#{ Html.EndForm(); }