I have a Kendo ComboBox.in mvc4.
and bind it to database.
my code:
#Html.Kendo().DropDownList().Name("id_team").BindTo(Model.tbl_team.Select(c=>new SelectListItem{Text = c.team, Value = c.id.ToString()}));
but below cods shows in my combobox:
Select Team:
<input data-val="true" data-val-number="The field id_team must be a number." id="id_team" name="id_team" type="text"/> <script> jQuery(function(){jQuery("#id_team").kendoDropDownList({"dataSource":[{"Text":"Barcelona","Value":"1"},{"Text":"manchester united","Value":"2"}],"dataTextField":"Text","dataValueField":"Value"});});
why?
I assume your problem is in empty drop-down list, and the most likely reason is in required js miss. Please make sure you have referenced all the scripts from Kendo introduction page: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction
Related
Using Karate I am not able to clear field (input, textarea) properly:
<input name="title" id="title" class="form-control" placeholder="e.g. My MacBook Key" value="">
1) insert to input field with id=title is OK.
retry().input('#title', 'something')
Everything is written to field. OK.
2) I need to clear the field. I use following:
retry().clear('#title')
Field seems to be deleted after this action (text in input field is not visible).
3) But when I use input again
retry().input('#title', 'new')
In field is displayed: somethingnew. It seems that first string was not properly deleted and strings are merged together.
It happens for input/text area fields.
Could you help me please? Any idea?
Thank you.
Try using value() or JS directly instead of clear():
* value('#title', '')
Or:
* script('#title', "_.value = ''")
First we need to focus on the web element
focus(webElement)
Then clear the input field/text area on the browser, use clear()
clear(webElement)
To clear the value from DOM, we are using Key.CLEAR
input(webElement, Key.CLEAR)
Finally insert your value/custom value into the input field as below
input(webElement, "Insert your value")
I have an html form and i would like ALWAYS to have checkboxes to submit a value. How can i do that? I have one idea but i havent tried it and i am unsure if its the best way to do it (jquery to check if the box is checked or not, then set the value to 0/1 and check it off so it will submit)
Thanks to #Lazarus' idea, also mentioned by #BalusC, you can add an additional control to the form:
<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox
Checkbox and the hidden fields must have the same name. The hidden input is always submitted as a default value. If the checkbox is checked then also it's submitted. So you have a list of 2 values for parameter "checkbox1", that you have to treat at server side.
...maybe a <select> tag would be more handy.
There is a legitimate reason for asking for something like this, although the behaviour envisioned here is not the right way to go about it. There is a problem with the checkbox when used correctly when editing existing data and that's that there is no way to determine whether no value was submitted because the field was not present on the form or because the user cleared all of the values. You can run into this sort of problem any time you include fields conditionally.
One could go to the trouble of maintaining a "view state", of course, but it's much easier to include a hidden "companion field" whenever a checkbox or select with the multiple option (which is also excluded when all selections are cleared) is displayed. The field should have a related but different name (a name from which the actual field name can be extracted). The Lotus Domino server has used fields named %%Surrogate_FieldNameHere for this purpose since (I believe) version 7 for exactly the reason I described here.
To tell you the truth, this feels like a big no-no.
Anyway here goes:
<script type="text/javascript">
$(document).ready(function () {
$('form').submit(function() {
$(this).find('input[type=checkbox]').each(function () {
$(this).attr('value', $(this).is(':checked') ? '1' : '0');
$(this).attr('checked', true);
});
});
});
</script>
HTML doesn't work that way. HTML checkboxes are specified as follows: if checked, then its name=value will be sent as request parameter. If unchecked, then its name=value will not be sent as request parameter. Note that when the value is unspecified, then most browsers default to "on". It's easier if you give all checkboxes the same name but a different and fixed value. This way you can obtain the checked ones as an array/collection.
If all checkboxes are already known beforehand in server side, you can just apply basic math to obtain the unchecked checkboxes:
uncheckedCheckboxes = allCheckboxes - checkedCheckboxes
If those checkboxes are created dynamically at the client side and therefore unknown beforehand in server side, then add for each checkbox a <input type="hidden"> field containing information about the dynamically created checkbox, so that the server side knows which checkboxes are all present as the moment of submission.
Although this goes against the HTML spec, if you know what you are doing, using this you no longer have to cater checkboxes which are handled completely differently when submitted - and for example naming fields with_brackets[] can actually be useable.
Complete solution
$(document).on('submit', 'form', function() {
$(this).find('input[type=checkbox]').each(function() {
var checkbox = $(this);
// add a hidden field with the same name before the checkbox with value = 0
if ( !checkbox.prop('checked') ) {
checkbox.clone()
.prop('type', 'hidden')
.val(0)
.insertBefore(checkbox);
}
});
});
Take note: the non-checked checkboxes now submit a value of "0"
Additionally, if you want to change the behaviour of a single form only, just alter the first line in the above snippet:
$(document).on('submit', 'form.your-class-name', function() {
// ...
});
if you have many checkbox, you can try this code:
<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>
If you have the following HTML:
<form id="myform" method="post" action="my/url">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
<input type="checkbox" id="checkbox2" name="checkbox2"/>
<input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>
Normal form submit:
On form submit, before submitting, change all values of checkboxes to 0 and 1 based on if checkbox is unchecked or checked. Like so:
$('#myform').submit(function() {
var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
$checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
$checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
$checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
});
Note: Ugly thing about this code, while form is submitting, all checkboxes will appear as "checked" for a moment. But if you apply same concept for ajax form submit, it would be better.
AJAX form submit:
$.post('my/url', {
'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
}, function(response) {
// Server JSON response..
}, 'json');
I have a weird problem in my MVC app.
When the user selects a date from a drop down, it clears the StartDate and EndDate fields.
I have the following fragment of code:
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
The weird thing is that you can wee where I'm outputting it in the label, the date comes out there. The textbox is unpopulated.
I've checked the produced markup and the textbox is not being populated.
<label>Start date: 19/05/2013</label>
<input id="StartDate" name="StartDate" type="text" value="" /> <br />
What am I missing here?
To add a little bit more information, when the page is initially populated the default start and end date are output. There is a bit of jQuery that empties those fields when a <select> is changed. If I comment that bit out then the fields retain their previous values as opposed to blank. Essentially, whatever is submitted to the server is output rather than the value in the model.
Essentially, whatever is submitted to the server is output rather than the value in the model.
This behaviour is actually by design. The idea being that generally the user would expect to see in the text box what they submitted to the server.
See here for a detailed explanation, and a work around.
Instead of doing this
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
You should do this
<label id="someId"></label>
#Html.TextBoxFor(s => s.StartDate,new{#id="startdate"})
and using jquery on change event on your textbox you can set lablel
$("#startdate").change(function(){
var date="Start Date:"+$(this).val();
$("#someid").html(date);
});
Thinks that your model is a class named What like this:
public class What
{
public string StartDate { get; set; }
}
Then, think that your application is "MyApplication", you need to add to the view as if the view is stronglytyped:
#using MyApplication.Models;
#inherits System.Web.Mvc.WebViewPage<What>
Then all should we run as you expect
I'm new to asp.net mvc and currently using MVC 2. I'm struggling with working with checkboxes for days now. I simply need to get checked checkbox values to be saved in database and on Edit view check them back.
<input type="checkbox" id="coduit for safety near motor" name="Prepration" value="coduit for safety near motor"/><br />
<input type="checkbox" id="coduit for far side safety" name="Prepration" value="coduit for far side safety"/><br />
<input type="checkbox" id="coduit for power cable to near power point" name="Prepration" value="coduit for power cable to near power point"/><br />
On post controller method i can save the values of checked Checkboxes to the database as a comma separated string by using
strign a= = Request.Form["Prepration"];
How can i show them back on Edit view?
I don't know whether this is the way to do this any alternative solution would be great
The answer of your first question:
Need to get checked checkbox values to be saved in database
On a button click push all the values in a array and from there store them in a hidden field and when you post your form get those values from this hidden field:
<script type="text/javascript">
$(document).ready(function () {
$("input#btnSubmit").click(function () {
var id = [];
$("input[name='Prepration']:checked").each(function () {
id.push($(this).val());
});
$("#HiddenFieldId").val(id);
});
});
</script>
Now coming to your second question:
How can i show them back on Edit view?
<input type="radio" id="a" name="Prepration" checked="#Model.BoolPropertyName" />
Here you can have the value of in boolan.
Hope this will help you.
you can client side solution,
var data="";
$.each($("input:checkbox"),function(){
if($(this).is("checked")){
data+= $(this).val();
}
});
// post here
Say we have a set of projects exposed via the Project service:
{ id: '123', name: 'Yeoman', watchers: '1233', ... }
{ id: '123', name: 'Grunt', watchers: '4343', ... }
Then, we have a form to choose your favorite project:
Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
%input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}
This sets choices.favoriteProject to the id value of the chosen project. Often, we need to access the related object, not just the id:
John's favorite project:
{{Project.get(data.favoriteProject).name}}
What I'm looking for is a way to bind the radios and checkboxes straight to the object itself, not the id, so we could do
John's favorite project:
{{data.favoriteProject.name}}
instead. This is possible with select directive via ng-options, but how can we do this with radios and checkboxes? I'd still like to use the ids for matching instead of references, if possible.
To clarify, here's an example what I'm looking for
Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
%input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}
It says: "Please bind data.favoriteProject to the actual project object and use the id to check if they match (instead of references)".
[Update]
I've completely changed my answer after discovering the ngValue directive, which appears to be undocumented. It allows you to bind objects instead of just strings as values for ngModel on the radio button inputs.
<label ng-repeat="project in projects">
<input type="radio" ng-model="data.favoriteProject"
ng-value="project">{{project.name}}</input>
</label>
<p>Your favorite project is {{data.favoriteProject.name}}.</p>
This uses references to check rather than just IDs, but I think in most cases, this is what people will be looking for. If you do very strictly only want to match based on IDs, you can use the [Old Answer], below, or even better, just create a function--e.g. projectById(projectId) that you can use for looking up a project based on its ID.
I've updated the JSFiddle to demonstrate: http://jsfiddle.net/BinaryMuse/pj2GR/
[Old Answer]
Perhaps you can utilize the ng-change attribute of the radio button directive to achieve what you want. Consider this HTML:
<p>Select your favorite project:</p>
<label ng-repeat="project in projects">
<input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}"
ng-change="data.favoriteProject = project">
{{project.name}}
</input>
</label>
<p>Your favorite project is {{data.favoriteProject.name}}.</p>
You could also call a function inside ng-change, for example setfavoriteProject(project)--but I did not do that here for simplicity's sake.
Here is a working jsFiddle to demonstrate the technique: http://jsfiddle.net/BinaryMuse/pj2GR/7/
No ng-change needed (and I'm not sure, if it is a good practise to write inline-code like this. On the other hand angulars directives are not too far from it theirselves). Why not just do something like this (works with ng-repeat as well):
Fiddle:
http://jsfiddle.net/JohannesJo/VeZxh/3/
Code:
<body ng-app="app">
<div ng-controller='controller'>
<input type = "radio" ng-model = "oSelected" value = "{{aData[0]}}">
<input type = "radio" ng-model = "oSelected" value = "{{aData[1]}}">
<div>test: {{oSelected}}</div>
</div>
</body>
app = angular.module('app',[]);
app.controller('controller', function($scope){
$scope.aData = [
{o:1},
{o:2}
];
$scope.oSelected = {};
});
Edit: I maybe should mention that this doesn't work for checkboxes, as value will either be true or false. Also a shared model will lead to all checkboxes either being checked or unchecked at the same time.