如何在MVC4中获取有关下拉列表更改事件的数据?

时间:2015-04-25 10:44:50

标签: asp.net asp.net-mvc angularjs asp.net-mvc-4 asp.net-ajax

您好我在mvc中使用局部视图。我将下拉列表放在局部视图中并在索引页面中呈现该局部视图。

我必须获取下拉列表更改事件的数据。我更喜欢angularjs而不是java脚本。但是我无法使用angularjs从视图中调用控制器Action。

在控制器中:

public class HomeController : AthController
{
    public ActionResult Index()
    {
        var dashboardList = GetAllDashboards() as List<DashboardDefinition>;
        return View(dashboardList);
    }
    public ActionResult GetDashboard()
    {
        return 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")
}

在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>

在这段代码中,我使用了dashboardChage方法调用但是无法调用GetDashboard操作来检查。

1 个答案:

答案 0 :(得分:0)

您可以将Drop放在表单中,并将change属性包含在此下拉列表中,如下所示

@{ 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(); }