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>
Related
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.
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
I have a SelectList in the controller that its value passed to the view by ViewData to the view as below:
List<string> available = new List<string>();
available.AddRange(product.AvailableSizes.Split(',').ToList());
ViewData["availablesize"] = new SelectList(available);
in the view i have a drop down box which display the values of the variable availablesize as below:
#Html.DropDownList("availablesize")
for some reasons i need to display this drop down box in the following format but unable to handle this issue any suggestion?
<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
<select class="form-control input-sm">
<option>L</option>
<option>M</option>
<option>XL</option>
</select>
</div>
</div>
This code must work, you can give css attributes as well in the razor syntax.
Also Make sure your ViewData["availablesize"] has IEnumerable<SelectListItem>
Change your controller code to below
ViewData["availablesize"] = new SelectList((IEnumerable)available);
in Views syntax must be like below
<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
#Html.DropDownList("availablesize", ViewData["availablesize"], new {#class = "form-control input-sm "})
</div>
</div>
This is the syntax that you require
If you want to style each option differently, depending on the values passed, you can use some JQuery for that:
$(document).ready(function() {
$("#availablesize option").each(function() {
if ($(this).val() != '') {
switch ($(this).val()) {
case 'S':
$(this).css('background-color', 'lightgreen');
break;
case 'M':
$(this).css('background-color', 'green');
break;
case 'L':
$(this).css('background-color', 'orange');
break;
case 'XL':
$(this).css('background-color', 'red');
break;
default:
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="availablesize">
<option value="">- select size -</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
Fiddle
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;
});
I'm using ASP.NET Razor.
<form style="display:inline" name="formular1" method="post" action="default.cshtml">
<select name="phone1" class="dropdown">
#foreach(var row in db.Query("SELECT * FROM Handy")){
<option value="#row.Handyname">#row.Handyname</option>
}
</select>
vs.
<select name="phone2" class="dropdown">
#foreach(var row in db.Query("SELECT * FROM Handy")){
<option value="#row.Handyname">#row.Handyname</option>
}
</select>
<input type="submit"/ value="Compare">
</form>
#{
var phoneOne = "";
var phoneTwo = "";
if(IsPost){
// request input of the select forms
phoneOne = Request["phone1"];
phoneTwo = Request["phone2"];
}
}
</div>
<div class="content">
<div class="start">
<p><h2>#phoneOne</h2></p>
<ul>
#{
if(IsPost){
foreach(var row in db.Query("SELECT * FROM Handy WHERE Handyname=#phoneOne")){
<li>processor: #row.Prozessor GHz</li>
<li>memory: #row.RAM MB Ram</li>
<li>weight: #row.Gewicht g</li>
<li>display: #row.Display ''</li>
<li>OS: #row.OS</li>
}
}
}
</ul>
</div>
Getting an error with the query: WHERE Handyname=#phoneOne ...leaving it out all works fine. What am I doing wrong?
Thanks:)!
Not very sure, but I think you need to replace this:
foreach(var row in db.Query("SELECT * FROM Handy WHERE Handyname=#phoneOne"))
With this:
foreach(var row in db.Query("SELECT * FROM Handy WHERE Handyname= " + phoneOne))
As described here, try the following:
foreach(var row in db.Query("SELECT * FROM Handy WHERE Handyname=##phoneOne")){
Is db a reference to the database component in Razor? If so, it uses #0, #1, (indexes) not named parameters instead.
foreach(var row in db.Query("SELECT * FROM Handy WHERE Handyname=#0"))
And pass in the value through the collection of parameters in that method too.