my situation is the current one:
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
In practice I am calling some CS code that will create some a markup with a dropdown and some bindings. For example when a value is selected in this dropdown the function changeSortingField will be called. Everything works properly.
What goes wrong is that I want to encapsulate this markup in a Knockout foreach loop that depends on an observable. Sort of this:
<!-- ko foreach: {data: FieldSortings, as: 'sortings' }-->
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
<!-- /ko -->
Which means that when FieldSortings increses, the new markup should appear and indeed it does.
Problem is that with this logic none of my functions is anymore called, such as when I select a value from my dropdown the bindings don't work anymore. It feels like that the markup is computed only once (I think). Should I use some kind of particular composition to call the Razor function on the fly? Thanks in advance!
EDIT: the markup returned by razor is:
<div class="input-group custom-sort">
<section data-bind="validationElement: searchCriteria.Sorting.Field">
<label class="select">
<select data-i18n="[aria-label]accessibility.select.value" class="input-xs select-Sorting-Field" data-bind="value: searchCriteria.Sorting.Field,event: {change: changeSortingField}">
<option value="" css="searchcriteria-sorting-field-"><Select Order by></option>
<option value="DetectionDate" data-default="true" css="searchcriteria-sorting-field-DetectionDate">Detection date</option>
<option value="Impact" css="searchcriteria-sorting-field-Impact">Impact</option>
<option value="Score" css="searchcriteria-sorting-field-Score">Score</option>
</select>
<strong class="tooltip tooltip-top-right">
<i class="fa txt-color-teal"></i>
<span data-i18n="views.restricted.widgets.alertdetailwidget.sorting"></span>
</strong>
</label>
<div class="note note-error" style="display: none;" data-bind="validationMessage: searchCriteria.Sorting.Field"></div>
</section>
<label class="input-group-addon" for="sorting-control" data-bind="click: changeSortingDirection">
<span class="sr-only">Change the sorting direction</span>
<input type="checkbox" name="sorting-control" id="sorting-control" data-bind="checked: searchCriteria.Sorting.IsDescending">
<i></i>
</label>
And FieldSortings is an Observable array defined as:
self.FieldSortings = ko.observableArray([]);
Found the problem. Inside a Knockout foreach loop you need to refer to outsider variables and functions with the $parent . Due to this reason it couldn't make the bindings necessaries to work.
Related
i coded an select filter for my website:
Filter
<div class="row">
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2">category2n</option>
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default"> filter </button>
</div>
</form>
before selecting anything in the "selection-window" on the website you read "category1". i guess thats default(?).
but if i selected a category (and that works: you can read in the "selection-window" e.g. category3) and then click on the "filter"-button the website refreshes but in the "selection-window" you again read "category1" and not the selected category e.g "category3". i guess the selection doesn't work right.
how can i solve this that when clicking the button you still read your selected category?
also i want to display the selected option on a different part of the website.
my current code for this:
<script type='text/javascript'>
var m = document.getElementById("selection").value;}
document.write(m);
</script>
that as well doesn't work.
i hope you can understand what i mean, my english is pretty bad. sorry for that.
First, the question essentially contains 2 questions packed into one, don't do that.
Second, you are simply missing the preselection of the <select> field.
the selection doesn't work
When submitting a form the values are sent to the server. The server processes the values and renders the page again. Therefore you have to adjust the rendering according to the selected value. Lets say you simply pass the selected value to the view as string the view code could look like this:
#model string
...
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1" #if (Model == "category1") {<text>selected</text>}>category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" #if (Model == "category2") {<text>selected</text>}>category2n</option>
...
</select>
also i want to display the selected option on a different part of the website.
Then store the selection somewhere (e.g. a DB), retrieve the selected value before the different part is rendered and simply output it in the different part.
The script has an error, you should use a function:
function test()
{
var m = document.getElementById("selection").value;
alert(m);
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="row">
<select id="selection" class="event-type-select">
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" selected="selected">category2n</option> <!-- with selected="selected" you set the default -->
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default" onclick="test()"> filter </button>
</div>
</body>
</html>
On https://jsfiddle.net/u40uz1c4/4/, how can I add those icons to the dropdown?
I have ASP.NET dropdowns each with a list of items that I want to skin with the semantic dropdown. I want however svg images as icons for each item.
Reference: http://semantic-ui.com/modules/dropdown.html#/usage
<select name="gender" class="ui dropdown" id="select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br />
<br />
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'>
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'>
You cant do that by ASP.NET controller. You have to ctrate simple html markup, and than use the script for convert it to drop down list
I ended up embarking on an exercise to programatically create HTML server-side based on inspecting existing asp:DropDownList controls, similar to the output shown at https://jsfiddle.net/hodtfkys/3/.
<div class='ui icon selection dropdown'>
<input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i>
<div class='default text'>
Male
</div>
<div class='menu'>
<div class='item' data-text='Male' data-value='male'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male
</div>
<div class='item' data-text='Female' data-value='female'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female
</div>
</div>
</div>
This is my HTML:
<ul id="limitations" name="limitations" class="dropdown-menu">
<li>
<div class="checkbox checkbox-default">
<input type="checkbox" id="limitation-checkbox-0" value="8" name="limitations[0]" data-name="ALS ">
<label for="limitation-checkbox-0" style="color:black">ALS </label>
</div>
</li>
<li>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="limitation-checkbox-1" value="10" name="limitations[1]" data-name="Arthrogryposis Multiplex Congenita (AMC) & Amyoplasia">
<label for="limitation-checkbox-1" style="color:black">Arthrogryposis Multiplex Congenita (AMC) & Amyoplasia</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input type="checkbox" id="limitation-checkbox-2" value="2" name="limitations[2]" data-name="Cerebral Palsy (CP), (GMFS)">
<label for="limitation-checkbox-2" style="color:black">Cerebral Palsy (CP), (GMFS)</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="limitation-checkbox-3" value="4" name="limitations[3]" data-name="Hearing impairment deafness or hard of hearing">
<label for="limitation-checkbox-3" style="color:black">Hearing impairment deafness or hard of hearing</label>
</div>
</li>
... MORE <li> ...
</ul>
When I post the form, the model binder for List<int> limitations works only if the checkboxes are selected from, if there is a gap in the array, all items after the gap are not binded.
For example:
Consider the first(8) and the third(10) checkboxes are checked.
The value binded to List<int> limitations is [8].
Or if all the checkboxes are checked, List<int> limitations is binded witn an empty list.
I tried changing names of the checkboxes from name="limitations[0..n]" to name="limitations[]" but that caused ASP.NET to completely ignore the values.
Isn't there a standard for such things?!
I know how I can overcome this with javascript manipulation, but I really rather not going that awkward route for such a trivial case.
Using asp.net core 1.0.0 and .Net4.6.1
ASP.Net model binding hasn't changed this behavior between ASP.Net 4 and ASP.Net Core. The answer here is still valid.
Your naming convention is a little off. If you have multiple <input type="checkbox"...> with the same name, it should serialize automatically to the an array that ASP.Net's model binding can accommodate.
Try using name="limitations" instead of name="limitations[0]" throughout your inputs and see if that works as expected.
I am having an issue with an element which works with a mouse click and there are some items from which one has to be selected but its unselectable is set to on.
whenever I try to select the elements
I get back an error
the element is not visible so may not be interacted with
But the element is visible
we are using a kendo UI multiselect
please help
The Html Code:-
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist" class="k-reset" unselectable="on" role="listbox">
<li class="k-button" unselectable="on">
<span unselectable="on">Sector 1</span>
<span class="k-icon k-delete" unselectable="on">delete</span>
</li>
</ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist ProfileEditSharedModel_SelectedIndustrySectorIds_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ProfileEditSharedModel_SelectedIndustrySectorIds" class="bigselect" name="ProfileEditSharedModel.SelectedIndustrySectorIds" multiple="multiple" data-val-required="*" data-val="true" data-placeholder="Select Sectors..." data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="1">Sector 1</option>
<option value="2">Sector 2</option>
<option value="3">Sector 3</option>
</select>
Thanks in Advance
Try taking the element in a list first because it may be possible if you are finding element by classname (say), there may be multiple elements with the same classname. Selenium won't search further as it gets the first element by that identifier which may not be visible in your case. So please check that action is performed on the expected element.
I found a soloution using the JavascriptExecutor
It worked for me using:
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#{0}').data('kendoMultiSelect').value({1});", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
or
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#ProfileEditSharedModel_SelectedIndustrySectorIds').data('kendoMultiSelect').value([values]);", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
I was using a kendoMultiSelect there
Hi I'm working with MVC3 i want to insert the values displayed in front end into the table in backend.How can i achieve this?
Following is my view,
#model TravelReady_SupervisorInput.Models.TravelReadyModel
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script language="javascript">
$(document).ready(function () {
$("#es").hide();
$("#n").hide();
$("#date").hide();
});
</script>
<h2 class="filter">Associate Details</h2>
<fieldset class="fs">
#foreach (var item in Model.lstTravelReadyEntities)
{
<label class="Detail1"><b>Associate Id : </b>#item.Var_AssoId </label>
<label class="Detail1"><b>Vertical :</b>#item.Var_Vertical</label>
<label class="Detail1"><b>Visa ValidFrom :</b>#item.Dt_VisaValidFrom </label><br /><br />
<label class="Detail2"><b>Associate Name :</b>#item.Var_AssociateName</label>
<label class="Detail2"><b>Account Name :</b>#item.Var_AccountName</label>
<label class="Detail2"><b>Visa ValidDate :</b>#item.Dt_VisaValidTill</label><br /><br />
<label class="Detail3"><b>Grade HR :</b>#item.Var_Grade</label>
<label class="Detail3"><b>Project Name :</b>#item.Var_Project_Desc</label><br />
}
<h2> Response Details</h2><br />
Supervisor Response :
<input type="radio" class="radi" name="radio" value="Yes" onclick="javascript:Getyfunc();">Yes
<input type="radio" name="radio" value="No" onclick="javascript:Getnfunc()">No
<div id="es">
<label style="padding-left:10px;">*Supervisor Inputs :
<select id="dropdown" name="dropdown">
<option value="0">Select</option>
<option value="1">Available for Deployment/Release</option>
<option value="2">Travel Planned</option>
<option value="3">To Deploy For Same Account</option>
</select>
</label>
<label>Comments If Any
<textarea name="comments" id="cmts"></textarea>
</label>
<br />
<br />
<label id="date">*Date of Travel
<input type="text" id="datepicker" onclick="$(this).datepicker().datepicker ('show')"/>
</label>
<br />
<br />
</div>
<div id="n">
<label style="padding-left:10px;">*Supervisor Inputs :
<select id="dropdown" name="dropdown">
<option value="0">Select</option>
<option value="1">Critical Project Resource</option>
<option value="2">Associate Unwilling to Travel</option>
</select>
</label>
<label>Comments If Any
<textarea name="comments" id="cmts"></textarea></label>
<br />
<br />
</div>
<input type="submit" id="sbt" value="Submit" name="Submit" onclick="javascript:InsertDetails();"/>
</fieldset>
This is the child window of the page.Here i'm using partial view also.i want to get all the values which are displayed in a page to be inserted into the table.can Anyone please help me out of this
You should create a ViewModel for your view that will store your model and other data that you want to pass to your controller such as Supervisor Responses and Comments. Take advantage of the MVC extensions such as EditorFor, TextAreaFor, etc
Okay so what you have here is simply the View part of the Model-View-Controller. You seem to have a ViewModel for the list to display on the page, but you are still missing some key pieces:
Another ViewModel to hold your form data you want to send to the Controller. Assuming you want to leave the structure of your View as is, you can simply add this new ViewModel as a property of your existing TravelReadyModel.
Change your HTML form elements to use the HTML Helpers that end in "For" to auto-bind the values back to your new ViewModel. Surround these in an HTML.BeginForm().
Add a controller method for the Post back of the data.
Assuming that you have no DB backend support at all right now, use Entity Framework to setup the DB access.
In the simplest form of a MVC application, the Controller will interact directly with the Entity Framework DataContext and add the newly posted ViewModel from the View to the DB.
There is a lot a research you are going to need to do here, but this should get you started. Here is a great comprehensive tutorial that will walk your through everything above and more!
http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application