cascading dropdown angularjs mvc - asp.net

i am getting null values
$scope.GetDepartment = function (Department) {
$http.get('/Official/GetDepartment?Department=' + Department).then(function (data) {
console.log(data);
$scope.department= data.data;
});
};
Html
<select ng-model="empModel.division" id="" name="Division" class="form-control"
ng-click = "GetDepartment(empModel.division)"
ng-change = "GetDepartment(empModel.division)"
ng-options="c.division as c.division for c in division" >
<option selected="selected">Select</option>
</select>
<select ng-model="empModel.department" id="" name="Department" class="form-control"
ng-options="d.department as d.department for d in department">
<option></option>
</select>
When i select divison i am not getting anything in department dropdown
Controller
public JsonResult GetDepartment(string Department)
{
var department = db.Depts.Where(x => x.Department == Department).
GroupBy(x => x.Department).
Select(x => x.FirstOrDefault()).
OrderBy(x => x.Department).ToList();
return Json(department);
}

Your angular part for retrieve division data
function GetDesignation(input) {
$http.get('/Official/GetDesignation?designation='+input).then(function (data) {
console.log(data);
$scope.designation = data.data;
});
};
change in HTML using ng-change directive there
<select ng-model="empModel.division" id="" name="Division" class="form-control" ng-change = "GetDesignation(empModel.division)"
ng-options="c.division as c.division for c in division" >
<option></option>
</select>
New HTML tag for load Designation data in dropdown
<select ng-model="empModel.designation" id="" name="Designation" class="form-control"
ng-options="c.designation as c.designation for c in designation" >
<option></option>
</select>

Related

How to put just distinct values into select control MVC ASP.NET?

This is my index view. I tried with ViewBag but it doesn't work, maybe because I want to get values from foreign key. I am new to ASP.NET.
<form id="forma" action="/InspekcijskeKontrole/VratiKontrole" method="get">
<div class="form-group">
<label for="Select1">Odaberite inspekcijsko tijelo:</label>
<select name="Select1" id="Select1" class="form-control" onchange="sacuvaj()">
<option value="-1">Selektujte inspekcijsko tijelo:</option>
#foreach (var i in ViewBag.Select1) {
<option value="#i.Value">#i.Text</option>
}
</select><br />
<label for="Select2">Odaberite vremenski period kontrole:</label>
<select name="Select2" id="Select2" class="form-control" onchange="sacuvaj1()">
<option value="-1">Selektujte vremenski period kontrole:</option>
#foreach(var i in Model)
{
<option value="#i.DatumInspekcijskeKontrole.ToString("dd.MM.yyyy")">#i.DatumInspekcijskeKontrole.ToString("dd.MM.yyyy")</option>
}
</select>
</div>
This is my controller
public ActionResult VratiKontrole(int Select1, string Select2)
{
IEnumerable<string> tijelaNaziv = db.InspekcijskaKontrolas.OrderBy(i => i.InspekcijskoTijelo.NazivInspekcijskogTijela).Select(i => i.InspekcijskoTijelo.NazivInspekcijskogTijela).Distinct();
ViewBag.Select1 = new SelectList(tijelaNaziv);
IQueryable<InspekcijskaKontrola> listaKontrola = db.InspekcijskaKontrolas.Select(i => i);
if (!string.IsNullOrEmpty(Select1.ToString())&&!string.IsNullOrEmpty(Select2.ToString()))
{
string[] parts = Select2.Split('.');
DateTime datum = new DateTime(int.Parse(parts[2]), int.Parse(parts[1]), int.Parse(parts[0]));
listaKontrola = listaKontrola.Where(l => l.InspekcijskoTijeloId == Select1).Where(l => l.DatumInspekcijskeKontrole == datum).Select(l => l);
}
return View(listaKontrola.ToList());
}
(Posted on behalf of the OP).
This is solved. I just put into view:
#foreach (var i in Model.Select(i=>i.InspekcijskoTijelo).Distinct()) {
<option value="#i.InspekcijskoTijeloId">#i.NazivInspekcijskogTijela</option>
}

AngularJS Firebase Structure

The below image is of the site I created with the fields that get sent to Firebase.
This is how its structured in Firebase, which is as expected
I would like to incorporate the drop boxes so they post above the ID, at the minute in my services.js I have the following:
var ref = new Firebase('leaguesdev.firebaseio.com/League');
But I would like the structure be somthing like
leaguesdev.firebaseio.com/League/dropdown1/dropdown2/Club
I'm not sure how much or how little you need to see but I will attempt to cover what I think you will want to see
services.js
'use strict';
angular.module('myApp.interviews')
.factory('interviewsService', ['$firebase','$firebaseArray','$q', function($firebase, $firebaseArray, $q) {
var ref = new Firebase('leagesdev.firebaseio.com/League');
var getData = function(callback){
return $firebaseArray(ref);
};
var showFalse = function(){
return false;
};
var showTrue = function(){
return true;
};
index.html
<div class="container" ng-controller="LoginCtrl" ng-show="authData">
<div class="row" ng-controller="InterviewsCtrl">
<div class="col-md-5" ng-show="addFormShow">
<h3> Add Clubs to Firebase</h3>
<form name="mainForm" ng-submit="addInterview()" novalidate style="border-color: transparent;">
<div class="form-group">
<label>Division</label>
<select class="form-control" placeholder="Division" ng-model="divisionname" id="dividionname">
<option value="" disabled selected>Please Select Division</option>
<option>Premier Division</option>
<option>Division 1</option>
<option>Division 2</option>
<option>Division 3</option>
<option>Division 4</option>
</select></div>
<div class="form-group">
<label>Club Name</label>
<input type="text" class="form-control" placeholder="Clubname" ng-model="clubname" id="clubname">
</div>

Meteor ignoring 'selected' attribute on <option> on <select multi>

I am trying to use a multi select box in meteor and have some of the options be marked with selected based on info from the db for use with slectize.js. however it seems like meteor when building its DOM tree ignores the selected property.
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
{{#if inList _id ../customer_user_id}}
<option value="{{_id}}" selected>{{full_name}}</option>
{{else}}
<option value="{{_id}}">{{full_name}}</option>
{{/if}}
{{/each}}
</select>
and the helper
Handlebars.registerHelper("inList", function (val, list) {
console.log(list.indexOf(val) > -1)
console.log(list)
console.log(val)
return list.indexOf(val) > -1;
});
i see that the condition is true but there is no options with the selected property
I have been breaking my head on this for more then 24 hours now
I have also tried this method with the same result
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
<option value="{{_id}}" {{selected _id ../customer_user_id "selected"}}>{{full_name}}</option>
{{/each}}
</select>
with this helper
Handlebars.registerHelper("selected", function (val1, val2, string) {
if (val1 === val2) {
return string;
}
});
Try using selected="selected" instead of just selected:
<option value="{{_id}}" selected="selected">{{full_name}}</option>

how to get the selected value from a drop down list and transfer it to a viewbag

View
...Some Codes...
<select class="form-control" style = "width:400px">
<option selected> select issue type </option>
#foreach( var item in Model._issueList)
{
<option>#item.issueName</option>
}
</select>
...Some Codes...
Output of my dropdown
dropDown: issue_one, issue_two, issue_three
Now I want to choose my issue_three in my drop down and save it in a Viewbag.select, want should be the proper code so that I can transfer the issue_three to my Viewbag.select
TEST
...foreach code...
Viewbag.select = ????
View
<select class="form-control" style = "width:400px">
<option selected> Select Company Name </option>
#foreach (var item in Model._issueList)
{
<option id="issueSelect" onclick="transferIssue('#item.issueNo')">#item.issueName</option>
}
</select>
#Html.HiddenFor( m => m.variable,new { #class = "form-control", style = "width:400px", #id = "issue" })
...Some codes...
<button type ="submit" id='submit_button'>Submit</button>
SCRIPT Use JQUERY
function transferIssue(x){ $('#issue')val(); }
jQuery(document).on('click', '#submit_button', function (ev) {
ev.preventDefault();
var _issue = jQuery('#issue').val();
var _url = '#Url.Action("Jobs")' + '?value='+ _issue;
window.location.href = _url;
});

How to implement sort function in ASP.NET MVC

Now I am creating application using MVC Music Store tutorial. I want to implement sort function. I got stuck in implementation of Post Browse action.
Browse.cshtml
#model Overstock.Models.Category
#{
ViewBag.Title = "Browse Albums";
}
<div class="product">
<h3><em>#Model.Name</em> Products</h3>
<form action="/Store/Browse" method="POST">
Sort
<select id="Category" name="Category">
<option value="All">All</option>
<option value="Electronics">Electronics</option>
<option value="Sports">Sports</option>
<option value="Watches">Watches</option>
<option value="Office">Office</option>
<option value="Beauty">Beauty</option>
</select>
products by
<select id="SortType" name="SortType">
<option selected="selected" value="Name">Name</option>
<option value="Price">Price</option>
</select>
in
<select id="OrderBy" name="OrderBy">
<option selected="selected" value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
order
<input type="submit" value="Set" />
</form>
<ul id="product-list">
#foreach (var product in Model.Products)
{
<li id="product">
<a href="#Url.Action("Details", new { id = product.ProductId })">
<img id="image" alt="#product.Title" src="#product.PictureUrl" />
<span>#product.Title</span>
</a>
</li>
}
</ul>
</div>
StoreController.cs
// GET: /Store/Browse
public ActionResult Browse(string category)
{
var varCategory = MyDB.Categories.Include("Products").Single(c=> c.Name==category);
return View(varCategory);
}
[HttpPost]
public ActionResult Browse(string Category, string SortType, string OrderBy)
{
//What should I put here?
return View();
}
What should I write in Browse Post action? Please help.
Using OrderBy and OrderByDesceding for example:
if(SortType == "Name") && (OrderBy == "Ascending")
MyDB.Categories.Where(x => x.Name == Category).OrderBy(x => x.Name);

Resources