Angular:将JSON参数传递给Controller进行过滤

时间:2015-04-21 09:23:31

标签: json asp.net-mvc angularjs

我们如何将此参数传递给MVC控制器? 我正在下载我的实体和部门,如果我选择该实体,其下的部门将显示在下一个下拉列表中,以便我过滤我的数据。

这是我的视角

        scope.getEntity = http.get('GetEntity').success(function (entity) {
            scope.entities = entity;
        });

        scope.selectEntity = function () {
            var e = document.getElementById("entityList");
            var entity = e.options[e.selectedIndex].value;
            console.log(entity);
        };
        scope.getDepartment = http.get('GetDepartment').success(function (dept) {
            scope.depts = dept;
        });

这是我的模型,其中我从我的数据库中获取数据。

 public static List<string[]> LoadEntities()
    {
        string sScript = "SELECT [EntityID],[EntityName] FROM [NOP_PR].[dbo].[Entities] where LocationID=39 or LocationID=21";
        List<string[]> results = new List<string[]>();
        using (SqlConnection con = new SqlConnection(m_sConnectionString))
        {
            con.Open();
            using (SqlCommand command = new SqlCommand(sScript, con))
            {
                SqlDataReader reader = command.ExecuteReader();
                while (reader.Read())
                {
                    string[] r = new string[] { reader.GetInt64(0).ToString(), reader.GetString(1) };
                    results.Add(r);
                }
            }
        }
        return results;
    }
    public static List<string[]> LoadDepartment(string EntityID)
    {
        string sScript = "SELECT [DepartmentID],[DepartmentName] FROM [NOP_PR].[dbo].[Departments]"
                             + " WHERE EntityID=" + EntityID + ";";
        List<string[]> results = new List<string[]>();
        using (SqlConnection con = new SqlConnection(m_sConnectionString))
        {
            con.Open();
            using (SqlCommand command = new SqlCommand(sScript, con))
            {
                SqlDataReader reader = command.ExecuteReader();
                while (reader.Read())
                {
                    string[] r = new string[] { 
                        reader.GetInt64(0).ToString(), 
                        reader.GetString(1) };
                    results.Add(r);

                }
            }
        }
        return results;
    }

这是我的控制器

 public JsonResult GetDepartment(string EntityID)
    {
        return Json(NomsConnection.LoadDepartment(EntityID), JsonRequestBehavior.AllowGet);
    }


    public JsonResult GetEntity()
    {
        return Json(NomsConnection.LoadEntities(), JsonRequestBehavior.AllowGet);
    }

我的观点

<div class="col-xs-4">
                    <div class="col-xs-10">
                        <h4><b>Search :</b></h4>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-search"></span>
                            </span>
                            <input type="text" name="search" data-ng-model="filter" class="form-control" placeholder="Search here (e.g. 151234 or Pille)" />
                        </div>
                        <br />

                    </div>

                    <div class="btn-group" role="group">
                        <button data-ng-click="exportData()" class="btn btn-warning"><i class="glyphicon glyphicon-export"></i>Export to Excel </button>
                    </div>
                </div>



            </div>

希望有人帮忙!

3 个答案:

答案 0 :(得分:1)

要回答我的问题,我就是这样做的。

 PRApp.controller('DepartmentCtrl', ['$scope', '$http', function (scope, http) {

        scope.EntityID = "";

        scope.getEntity = http.get('GetEntity').success(function (entity) {
            scope.entities = entity;
        });

        scope.selectEntity = function () {
            var e = document.getElementById("entityList");
            scope.EntityID = e.options[e.selectedIndex].value;
        };
        scope.getDepartment = http.get('GetDepartment?EntityID=' + scope.EntityID).success(function (dept) {
            scope.depts = dept;
        });

        scope.loadDept = function () {
            scope.selectEntity();
            console.log(scope.EntityID);
            scope.depts = null;
            http.get('GetDepartment?EntityID=' + scope.EntityID).success(function (dept) {
                scope.depts = dept;
            });
        }


        scope.loadReport = function () {
            scope.selectEntity();
            console.log(scope.EntityID);
            scope.depts = null;
            http.get('GetDepartment?EntityID=' + scope.EntityID).success(function (dept) {
                scope.depts = dept;
            });
        }

    }]);

我为它创建了新的控制器..(仅限可选) 并在我的控制器(MVC)上添加了此代码

        public JsonResult GetReportList(string from, string to, string EntityID="", string DepartmentID="")
    {
        DateTime fromd = DateTime.Now;
        DateTime tod = DateTime.Now;
        if (from != "undefined")
            fromd = Convert.ToDateTime(from);
        if (to != "undefined")
            tod = Convert.ToDateTime(to);
        fromd = new DateTime(fromd.Year, fromd.Month, 1, 0, 0, 0);
        tod = new DateTime(tod.Year, tod.Month, tod.Day, 23, 59, 59);
        return Json(NomsConnection.LoadPRfromDB_withParams(fromd, tod, EntityID, DepartmentID), JsonRequestBehavior.AllowGet);
    }


    public JsonResult GetDepartment(string EntityID)
    {
        return Json(NomsConnection.LoadDepartment(EntityID), JsonRequestBehavior.AllowGet);
    }


    public JsonResult GetEntity(string entity)
    {
        return Json(NomsConnection.LoadEntities(), JsonRequestBehavior.AllowGet);
    }

并在我的视图中添加了这个以生成下拉列表

                            <div class="col-xs-12" data-ng-controller="DepartmentCtrl">

                            <h4><b>Search by Entity :</b></h4>
                            <select id="entityList" data-ng-click="loadDept()" class="form-control">
                                <option value="" selected>--  Select Entity --</option>
                                <option data-ng-repeat="e in entities" value="{{e[0]}}">{{e[1] | uppercase }}</option>
                            </select>

                            <h4><b>Search by Department :</b></h4>
                            <select id="deptList" class="form-control" data-ng-model="filter.DepartmentName">
                                <option value="" selected>-- Select Department --</option>
                                <option data-ng-repeat="t in depts" value="{{t[0]}}">{{t[1] | uppercase }}</option>
                            </select><br />
                            <input type="submit" class="btn btn-primary btn-sm" value="GO" />

                        </div>

就是这样。我希望它有所帮助!

答案 1 :(得分:0)

您需要通过转移其他参数来使get - 请求动态化,并在后端&#34;控制器&#34;处理此请求:

scope.getEntity = http.get('GetEntity', params: scope.selectEntity()).
  success(function (entity) {
    scope.entities = entity;
});

在您的控制器中处理JSONified实体参数:

public JsonResult GetEntity(String entity)
{
    //FIXME: do sth here with the entity parameter
    return Json(NomsConnection.LoadEntities(), JsonRequestBehavior.AllowGet);
}

答案 2 :(得分:0)

根据angular documentation你应该使用传递'params'的$ http服务,所以:

$http({
    url: 'yourUrl', 
    method: "GET",
    params: {'EntityID': yourEntityId}
 });