Angular: pass JSON parameter to controller to filter

How do I pass this parameter to the MVC controller? I am making a dropdown list of my object and department where if I select this object the department below it will be shown in the next dropdown to filter my data.

Here's my angular in sight

        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;
        });

      

here's my model where i am getting data from my db.

 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;
    }

      

Here's my controller

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


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

      

And my mind

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

      

Hope someone can help!

+3


source to share


3 answers


To answer my problem, here's what I did.

 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;
            });
        }

    }]);

      

I created a new controller for it .. (optional) And added this code to my controller (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);
    }

      



And added this in my opinion to create a dropdown

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

      

What is it. Hope this helped!

+1


source


You need to make a dynamic get

-request, transfer additional parameters and handle this request in your "controller":

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

      



And in your controller the JSonified entity parameter is handled:

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

      

0


source


according to angular documentation , you should be using a $ http service passing "params", so:

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

      

0


source







All Articles