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!
source to share
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!
source to share
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);
}
source to share
according to angular documentation , you should be using a $ http service passing "params", so:
$http({
url: 'yourUrl',
method: "GET",
params: {'EntityID': yourEntityId}
});
source to share