Use drop down result to filter another dropdown C# MVC - asp.net

I am trying to update a drop down based on the users selection in the first drop down. I found this SO post on the topic, but Im not quite sure how to add the jquery to filter values to my Razor view. Can someone point me in the right direction?
My view so far:
#using System.Security.Claims;
#model UpdateClaimFormModel;
<h2>UpdateClaimView</h2>
#using (#Html.BeginForm())
{
<select name="emailcheese">
<option selected disabled>Select User</option>
#foreach (var i in Model.UserNames)
{
<option>#i.ToString()</option>
}
</select>
<select name="authpolicy">
<option selected disabled>Select Claim:</option>
#foreach (var i in Model.UserClaims)
{
<option>#i.Type.ToString()</option>
}
</select>
<div class="form-group">
<button type="submit" class="btn btn-default">Whoo</button>
</div>
}
My Goal:
Select User [bob, bill, jim]
Select Claim: If user bob:[1,2,3], If user bill:[1,4,8], If user him:[4,5,6]

so simpley you can do something like this
#using (#Html.BeginForm())
{
<select name="emailcheese" id="selectUserNames">
<option selected disabled>Select User</option>
#foreach (var i in Model.UserNames)
{
<option>#i.ToString()</option>
}
</select>
<select name="authpolicy" id="selectAuthPolicy">
</select>
<div class="form-group">
<button type="submit" class="btn btn-default">Whoo</button>
</div>
}
now in the script part
$(function(){
var userClaims = #Html.Raw(Json.Encode(Model.UserClaims));
$(document).on('change','#selectUserNames'function(){
var selectedVal = $(this).val();
if(selectedVal == 'bob')
{
var html ='<option selected disabled>Select Claim:</option>';
for(var i=1;i<userClaims.length;++i)
{
if(i==1||i==2||i==3)
{
html=html+'<option>'+userClaims[i].Type+'</option>';
}
}
$('#selectAuthPolicy').html(html);
}
})
})
this is just a basic dea of how you can achieve this i just tried for bob there are many other ways to immplement ths

Related

ng-model value becoming null while disabling the selected value in dynamic dropdown list

I have created a process for creating a dynamic dropdown list group on button click with the given number of the dropdown lists in an input field. Then i collect a user list from the database and showing all in these doropdown lists. Now my job is that if one user is selected by any dropdown then that option must be disabled for the others. How can i do that?
I tried that by disabling the selected option from the list, But when i am disabling the selected option, the dropdown ng-model that selected that option is becoming null.
For creating a dynamic Dropdown list:
<div class="col-md-3">
<div class="form-group-sm">
<input class="form-control" ng-model="numberOfLevels"
type="text" name="numberOfLevels" id="numberOfLevels">
</div>
</div>
<div class="col-md-7" >
<div class="form-group-sm">
<a href="#" type="button" class="btn btn-box-tool btn-primary"
style="color:white;"
ng-click="addLevels(numberOfLevels)" >Manage</a>
</div>
</div>
$scope.addLevels = function (num) {
getAllUsers();
$scope.showLevels = true;
$scope.levels = [];
var count = 0;
if (num > 0) {
while (count < num) {
count++;
//console.log(count);
$scope.levels.push({ 'key': count, 'value': count });
//console.log(count);
}
}
//console.log($scope.levels);
//getAllUsers();
$scope.approversInputList = [];
}
<div class="col-md-12" ng-show="showLevels" ng-repeat="a in levels">
<div class="form-group">
<div class="col-md-4">
<label for=" username">
Approver {{a.value}} :
</label>
<select class="browser-default custom-select form-control has-error"
ng-model="abc[a.value]"
ng-change="setApprovers(selectedFileId, selectedNoteSheetId,a.value, abc[a.value])">
<option></option>
<option id="select" ng-repeat="user in userList"
value="{{user.Id}}" ng-disabled="user.Disabled">
{{user.UserName}}
</option>
#*<option id="select" ng-repeat="user in userList"
value="{{user.Id}}"
ng-disabled="disabledList[user.Id]">
{{user.UserName}}
</option>*#
</select>
</div>
<div class="col-md-7">
</div>
</div>
</div>
User List View Model:
public int Id { get; set; }
public string UserName { get; set; }
public bool Disabled { get; set; }
AngularJs Code for Disabling Selected Option:
$scope.abc = {};
$scope.$watch('abc', function (newVal, oldVal) {
//console.log($scope.userList);
var aaa = $scope.approversInputList;
for (var i = 0; i < $scope.userList.length; i++) {
$scope.userList[i].Disabled = false;
//console.log($scope.abc);
angular.forEach($scope.abc, function (value) {
if ($scope.userList[i].Id == value) {
$scope.userList[i].Disabled = true;
//$scope.disabledList[value] = true;
}
});
}
//console.log($scope.disabledList);
}, true);
When the selected option is disabled the dropdown should show the selected username.
This is happening because your userList is only one instance for all select. So you set disabled in userList and it propagates to all the levels.
u can try this, it will be difficult to solve it exactly until u give a minimal reproducible example:
<select class="browser-default custom-select form-control has-error"
ng-model="abc[a.value]"
ng-change="setApprovers(selectedFileId, selectedNoteSheetId,a.value, abc[a.value])">
<option></option>
<option id="select{{$index}}" ng-repeat="user in userList"
value="{{user.Id}}" ng-disabled="abc[a.value] == user.Id">
{{user.UserName}}
</option>
</select>
And remove your for loop altogether. if ng-disabled="abc[a.value] == user.Id" does not work then instead of using ng-diabled use some class if the condition is met and do some css on that class to make it disabled urself.

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

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

Show existing value in dropdownlist

I have a webgrid that already show values from my database. When a user clicks to edit, I want one of the field Status to be displayed as a dropdownlist. Below is my code:
#{
var db = Database.Open("doctors");
var statusResults = db.Query("SELECT Distinct Status FROM cpd_certificates")
.Select(category => new SelectListItem {
Text = category.Status
});
}
//html code
<div class="row">
<span class="label"><label for="status"> Status:</label></span>
#Html.DropDownList("Status",null, statusResults )
</div>
My dropdownlist list appears but I want the existing value to show of which the user can now change.
Tried and tested: See this site for more tutorials http://www.mikesdotnetting.com/Article/176/WebMatrix-and-jQuery-Forms-Part-2-Editing-Data
#{
var db = Database.Open("doctors");
var stat = db.Query("SELECT Distinct Status FROM cpd_certificates");
}
<div class="row">
<select name="status" id="edit-status">
<option value="">-- Select Status --</option>
#{
foreach(var statusResult in stat) {
<option value="#statusResult.Status"
selected="selected">#statusResult.Status</option>
}
}
</select>
</div>

Resources