I have this code
#if (ViewBag.TechnologyNames != null)
{
foreach (var technologyName in ViewBag.TechnologyNames)
{
if (#technologyName.TechnologyID == -1)
{
<div class="CheckBoxItem">
<input type="checkbox" name="option1" id="allTechnology" value="#technologyName.TechnologyID" checked="checked" />
#technologyName.Name
</div>
}
else
{
<input type="checkbox" name="option2" id="tech" value="#technologyName.TechnologyID" />
#technologyName.Name
}
}
}
What I need is somehow to add #technologyName.TechnologyID to id="tech" to have at the end
id="tech_123"
How I can do it?
Thank you!
try this (basically adding parenthesis around the property):
<input type="checkbox" name="option2" id="tech_
#(technologyName.TechnologyID)" value="#technologyName.TechnologyID" />
Related
I am trying to make sure that at least one 'input checkbox is checked in this list there is about 10 items but I am not sure how to do this? Do I need a flag in the model?
<div>* Data</div>
#Html.ValidationMessageFor(x => x.flgData,"", new { #class = "text-danger" })
<ul>
#foreach (var item in Model.ListOfData)
{
<li>
<input type="checkbox" value="#item.Value" name="chk" />
<label asp-for="#item.Selected">#Html.Raw(#item.Name)</label>
<input type="hidden" asp-for="#item.DictionaryId" />
<input type="hidden" asp-for="#item.Name" />
</li>
}
</ul>
You could loop though all the checkbox and check if it is checked
HTML
<input type="button" id="btnSubmitCB" value="Submit" class="btn btn-primary" />
<input type="checkbox" class="chkbox" value="Bike" /> Bike
<input type="checkbox" class="chkbox" value="Car" /> Car
<input type="checkbox" class="chkbox" value="Boat" /> Boat
JQuery
$(document).ready(function () {
$('#btnSubmitCB').click(function () {
var cbChecked = false;
$('input[type=checkbox]').each(function () {
if (this.checked) {
cbChecked = true;
return false;
}
});
if (cbChecked) {
alert("At least one checkbox is checked");
}
else {
alert("No checkbox is checked");
}
});
});
Another way without using .each function
$(document).ready(function () {
$('#btnSubmitCB').bind("click", function () {
let checkedCount = $('input[type=checkbox]:checked').length;
if (checkedCount == 0) {
alert("no checkbox has been checked")
}
else {
alert("checkbox has been checked");
}
});
});
I am working on this ASP.NET MVC project where I am performing simple CRUD operations. On clicking Edit button, I want to get the data from the database and populate it in the Create View (same view with the help of which I entered the data).
The issue that I have is that, though I am able to enter the data into the database using the Create.cshtml view, I am not able to populate the data back into the fields to the same View upon clicking Edit. On checking, I see that I am able to get the data from the database from the Controller and I am sending it to the View - Create. But, the fields are not getting populated in the View.
Where am I going wrong?
View - Create.cshtml
<form method="post" action="/Books/Create" id="formBooks">
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<div>
<label asp-for="Title" class="label">Title</label>
<input asp-for="Title" class="form-control" id="title" name="title" required />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div>
<label asp-for="Author" class="label">Author</label>
<input asp-for="Author" class="form-control" id="author" name="author" required />
<span asp-validation-for="Author" class="text-danger"></span>
</div>
...
</div>
<div class="form-group col-md-6">
<button type="submit" value="Save" class="btn bgm-orange waves-effect mybtn">SAVE</button>
</div>
</div>
</div>
</form>
Controller - BooksController.cs
public ActionResult Create(int? Id)
{
if(Id == null)
{
return View();
}
else
{
var bookData = _context.Books
.Where(b => b.ID == Id)
.FirstOrDefault();
return View(bookData);
}
}
public ActionResult Create(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Books books= db.Books.Find(id);
if (books== null)
{
return HttpNotFound();
}
return View(books);
}
//Try this i hope this will work
The name attribute plays a vital role in binding the data to the <input></input> field. Also, value attribute gets the value to display in the Edit view.
<input asp-for="Title" class="form-control" id="title" name="title" placeholder="Enter title..." value="#(Model != null ? Model.Title : "")" required />
input name 'btnSaveScore' is clicked When keypress ENTER in TextBox.
I do not want to call 'btnSaveScore' when keypress ENTER in TextBox.
I guess that 'btnSaveScore' is a default button.
Can I set default button = false ?
//Code
#using (Html.BeginForm("ScoreStudent", "Score", FormMethod.Post))
{
...
...
...
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
}
//End Code
Help me please, Thank you.
This isn't an MVC problem - this is a HTML issue. If your button isn't supposed to submit the form then don't use type="submit" use type="button" instead.
Alternatively you can solve it using JS
$("#form").keypress(function(e){
return e.which != 13;
}
Add onkeydown attribute in your textbox in following way:
onkeydown="if (event.keyCode == 13) return false;"
Your textbox should be like this:
<input type="text" id="textboxId" onkeydown="if (event.keyCode == 13) return false;" />
Try this
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
to
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="button" />
Thank you everyone.
Code below is work for me
$('#textboxname').live("keypress", function (e)
{
if (e.keyCode == 13)
{
// do something
e.preventDefault();
return false;
}
});
and
#using (Html.BeginForm("ScoreStudent", "Score", FormMethod.Post))
{
...
...
<input name ="btnSaveScore" id="btnSaveScore" value="submit score" type="submit" />
}
I'm using jQuery 1.9.1, jQM 1.3 & knockout 2.2.1.
My html is as follows:
<div data-role="page" id="coloursView">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Colour:</legend>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-1" value="1" />
<label for="radio-1">Red</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-2" value="2" />
<label for="radio-2">Blue</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-3" value="3" />
<label for="radio-3">Green</label>
</fieldset>
</div><!--/content -->
</div><!--/page -->
My view model is also very simple:
function ColoursViewModel() {
this.template = "coloursView";
this.colour = ko.observable("1");
this.label = ko.observable(); // custom binding
}
Now, i would like to get the description of the selected colour, not the value.
It seems to me, that i need a custom binding, like this one:
ko.bindingHandlers.label = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$("radio", element).filter(function(el) { return $(el).text() === value; }).prop("checked", "checked");
}
};
But i'm not able to get the text of the related label - the label-for text.
Someone could help?
Thanks in advance
Update
Here is another approach where to find only :checked items and remove white-space in text.
Checkbox
$('input[type=checkbox]').each(function () {
if ($(this).is(':checked')) {
var checkbox = $(this).prev('label').text();
alert('Checkbox: ' + checkbox.replace(/\s+/g, ' '));
}
});
Radio
$('input[type=radio]').each(function () {
if ($(this).is(':checked')) {
var radio = $(this).prev('label').text();
alert('Radio: ' + radio.replace(/\s+/g, ' '));
}
});
Updated Demo
Checkbox
$('div.ui-checkbox').find('span.ui-btn-text').text();
Radio
$('div.ui-radio').find('span.ui-btn-text').text();
Sorry if i answer myself, but i think i got it. At least for radio inputs.
Now, i have a custom binding handler at fieldset level, to keep the markup clean and more readable, as i can:
<fieldset data-role="controlgroup" id="front-colours" data-bind="frontColourLabel: frontColour">
<legend>Front Colour: <span data-bind="text: frontColourDescription"></span> (Value: <span data-bind="text: frontColour"></span>)</legend>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-1" value="red" />
<label for="fc-radio-1">Red</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-2" value="blue" />
<label for="fc-radio-2">Blue</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-3" value="green" />
<label for="fc-radio-3">Green</label>
</fieldset>
this is the binding handler i come up:
ko.bindingHandlers.frontColourLabel = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.unwrapObservable(valueAccessor());
var id = $('input:radio[name='+element.id+']:checked').prop("id");
var radioText = $('label[for=' + id + ']').text();
viewModel.frontColourDescription(radioText);
}
};
the only tricky part here, is that the id of the fieldset is equal to the name of the radio-group, as it's easy to filter out what radio-group i want to address.
WORKING EXAMPLE: http://jsfiddle.net/h7Bmb/1/
I try now to get the checkbox part to work. Someone can help?
Hi i am new to ASP.NET MVC. I am not sure how to deal with Check box or Radio Button to get values when they are clicked. Can any one help me? I am providing a simple code that might help you understand what i meant to be. Please share examples.
<script type="text/javascript" >
function check(browser)
{
document.getElementById("answer").value=browser;
} </script>
<form action="">
<input type="radio" name="browser"
onclick="check(this.value)"
value="Internet Explorer"/>Internet
Explorer<br />
<input type="radio" name="browser"
onclick="check(this.value)"
value="Firefox"/>Firefox<br />
<input type="radio" name="browser"
onclick="check(this.value)"
value="Netscape"/>Netscape<br />
<input type="radio" name="browser"
onclick="check(this.value)"
value="Opera"/>Opera<br />
<br />
Your favorite browser is: <input type="text" id="answer"
size="20"/> </form>
controller code
public ActionResult Index()
{
ViewData["list"] = new[]
{
new SelectListItem {Text = "InternetExplorer", Value = "InternetExplorer"},
new SelectListItem {Text = "Firefox", Value = "Firefox"},
new SelectListItem {Text = "Safari", Value = "Safari"},
new SelectListItem {Text = "Opera", Value = "Opera"}
};
return View();
}
[AcceptVerbs(HttpVerbs.Post),ActionName("Index")]
public ActionResult IndexPost(string browser)
{
// ...
}
view code
<% using (Html.BeginForm()) { %>
<% foreach(var item in (IEnumerable<SelectListItem>)ViewData["list"]) { %>
<label>
<% = Html.RadioButton("browser", item.Value) %>
<% = item.Text %></label>
<% } %>
<input type="submit" value="Select" />
<% } %>
<script type="text/javascript" src="<% = Url.Content("~/Scripts/jquery-1.3.2.js") %>" ></script>
<script type="text/javascript">
$(function() {
$("form:first").submit(function(e) {
e.preventDefault();
alert($(this).find(":radio:checked").val());
});
});
</script>
If you want browser value in action, you coding in IndexPost method.
or you want in javascript, onsubmit or onclick(and other) event handling, get checked radiobutton value at jQuery.
This was logic taken from: http://byatool.com/mvc/asp-net-mvc-how-to-handle-multiple-checkboxes-with-viewsactions-jquery-too/. I simply modified it very minimally.
----------
HTML Part|
----------
{form action="/Test/CheckForIds/" method="post"}
{div}
{input type="checkbox" name="IdList" value="1" /}
{input type="checkbox" name="IdList" value="2" /}
{input type="checkbox" name="IdList" value="3" /}
{input type="checkbox" name="IdList" value="4" /}
{/div}
{div}
{input type="submit" value="go" /}
{/div}
{/form}
----------------
Controller Part|
----------------
{AcceptVerbs(HttpVerbs.Post)} _
Function GroupPageSend(ByVal selectedObjects() As String) As ActionResult
{!--- YOUR CODE GOES HERE ---}
EX//
For Each item In selectedObjects
If i = 0 Then
string = Trim(item)
i = i + 1
Else
string = string & "," & Trim(item)
End If
Next
End Function
The above will gather values from selected checkboxes and will allow you to manage results.
Keep in mind all { = < and all } = >
I am probably not getting your question, but your sample will work well.
When you submit the form and the controller's method is called asp.net mvc will set the "browser" parameter to the value of the selected radio button's value.
hai friend try this,
<asp:RadioButton ID="RadioButton1" runat="server" onmousedown="yourjsfunc();" />