i have a very simple HTML extension :
public static MvcHtmlString test(this HtmlHelper helper, IHtmlString item)
{
var inputTag = new TagBuilder("div");
inputTag.MergeAttribute("class", "dropdown-with-tab-content white-background secondary-tab-tab-content white-background active");
inputTag.MergeAttribute("id", "aga");
inputTag.InnerHtml = MvcHtmlString.Create(item.ToString()).ToString();
return MvcHtmlString.Create(inputTag.ToString());
}
my call from view :
#Html.test(Html.Partial("Partials/_State", Model))
partial view :
<div class="col-md-12 IssuanceDate RedeemedDate">
<div class="form-group" style="margin-left: 20px; ">
<label>test</label>
<br />
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer"/> Female
</div>
</div>
if i use html extension like this, all radio button will not be able to be checked.
however if in my HTML extension i return MvcHtmlString.Create(item.ToString()) directly, everything is fine. Does anyone have a solution for this?
PS. No classes on the div does anything to make buttons unclickable, or anything else, i can see that radio button is clicked, but it never gets checked.
Related
Why is the input-validation-error class being added to my input when it shouldn't?
Validation is working fine for other pages that actually use it. I've tried making the property nullable and using the ValidateNever attribute but both are ignored.
View Model
public class EntityTableViewModel
{
[ValidateNever]
public string? SearchTerm { get; set; }
}
HTML
<form method="get">
<div class="input-group">
<input asp-for="SearchTerm" type="search" class="form-control rounded" placeholder="Search" />
<button type="submit" class="btn btn-primary" asp-action="Index"><i class="bi bi-search"></i></button>
</div>
</form>
Rendered HTML
<input type="search" class="form-control rounded input-validation-error" placeholder="Search" id="SearchTerm" name="SearchTerm" value="">
I'm adding a textbox and a corresponding checkbox to the view on click of a button. These checkbox will determine if the textbox value needs to be shown or hidden.
With the below code I've getting all the textbox fields, but for the checkbox I only get the checked values.
This is the view part
$('#btn-Add-Key-Name').click(function (e) {
i++;
e.preventDefault();
$(`<div class="row" id="rowid`+ i +`">
<div class= "col col-4" >
<section>
<label class="input">
<i class="icon-prepend fa fa-id-badge"></i>
<input type="text" name="KeyName" value="" placeholder="Key Name">
</label>
</section>
</div>
<div class="col col-2">
<label class="checkbox">
<input type="checkbox" name="IsKeyValid" value="true">
<i></i> Key
</label>
</div>
</div >`).appendTo($fields);
});
On the Controller
public JsonResult AddKeyToDB(string[] KeyName, IEnumerable<string> IsKeyValid)
{
}
//Is there a way to get the unchecked values as well for eg:
keyName = ["private", "public"] ,
IsKeyValid = ["false", "true"]
In your html you dont need to hard-code value of checkbox thats why you are only having checked values. So you need to make following change to your code. Just remove value="true" from input type checkbox.
<input type="checkbox" name="IsKeyValid" >
I have two radio buttons.
<td>
<div style="display: inline; margin-right: 10px">
<input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal/>US
</div>
<div style="display: inline">
<input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal"/>Global
</div>
</td>
I am populating my model like this
QuestionnaireModel = function (data) {
self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false);
}
The value is coming from DB perfectly and its getting populated in self.IsGlobal as true/false. Based upon this true/false, I want to set my radio button checked.
The checked binding works differently for radio buttons:
For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string.
So your IsGlobal should hold a string and you need to have the same string as the value of the radio buttons:
<input type="radio" name="USGlobalUser"
data-bind="checked: IsGlobalCheckbox" value="false" />US
<input type="radio" name="USGlobalUser"
data-bind="checked: IsGlobalCheckbox" value="true" />Global
And in your viewmodel:
self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false");
If you want to keep the IsGlobal to store a boolean value you need to create a new computed property for the radio button which does the conversion:
self.IsGlobalCheckbox = ko.computed({
read: function() {
return self.IsGlobal() + "";
},
write: function (v) {
if (v == "true") self.IsGlobal(true)
else self.IsGlobal(false)
}
});
Demo JSFIddle.
And by the way as Tomas noted your binding systax is broken in your sample.
Value from DB is boolean True/False
I changed in viewmodel :
self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal.toString() : "");
and in cshtml :
<td>
<div style="display: inline; margin-right: 10px">
<input type="radio" name="USGlobalUser" value="false" data-bind="checked:IsGlobal()" />US
</div>
<div style="display: inline">
<input type="radio" name="USGlobalUser" value="true" data-bind="checked:IsGlobal()" />Global
</div>
</td>
It`s much more simple. If you want to store something different from string in observable attached to radio buttons just set checkedValue binding for each radio button to same value as html element.
<div style="display: inline; margin-right: 10px">
<input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: false" value="false" />US</div>
<div style="display: inline">
<input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: true" value="true" />Global</div>
var QuestionnaireModel = function (data) {
var self = this;
self.IsGlobal = ko.observable(data ? data.IsGlobal : false);
}
ko.applyBindings(new QuestionnaireModel({
IsGlobal: true
}))
After data-bind attribute should be equality sign instead of colon.
<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/>
I'm creating a website where the user will fill in a textarea (in response to a question) and then press next. When they press next, the textarea will be submitted to the controller and the next question will be retrieved (I'll also store the answer in a cookie). Unfortunately, when I run the code in debug I've realized that the textarea is not being submitted b/c the parameter is null. I've tried to figure it out and I've looked around and I seem to be doing it properly. Hopefully it's an easy fix. Thanks so much for your time!
Controller:
// POST: /Question/1
[HttpPost]
public ActionResult q(string textAnswer) {
if (textAnswer != null)
ViewBag.current++;
Question q = db.Questions.Find(ViewBag.current);
if (q == null) {
return RedirectToAction("submit");
}
return View(q);
}
View:
<form class="form-horizontal" id="myForm" method="post" enctype="text/plain" name="input">
<p>
<h3>Question <span id="integer">#ViewBag.current</span></h3>
#Html.DisplayFor(model => model.Ques)
</p>
<div class="control-group">
<label class="control-label">Answer</label>
<div class="controls">
<textarea rows="20" style="width:600px" id="textAnswer"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls" >
<button onclick="history.back()" type="button" class="btn">Back</button>
<input type="submit" class="btn" value="Next" />
</div>
</div>
</form>
Your textarea needs a name in order to be posted.
<textarea rows="20" style="width:600px" id="textAnswer" name="textAnswer"></textarea>
Also remove the enctype attribute from your form.
Text areas don't post strings, they post string arrays.
Your controller should have this signature:
public ActionResult q(string[] textAnswer)
I have got my HTML5 project a bit further along - I have one last stumbling block which is: I have set a variable and have three buttons which give it a different value - each value should relate to a different mp3 file, I want my big 'play' button to play whichever mp3 ( variable) has been selected. I then want the button to toggle off or stop playing when clicked again.
I'm out of my depth a bit ( on tip toes) so any help/advice would be appreciated. I have gone through the Jquery and html5 audio notes but can't find anything too helpful ( that I can understand anyway!)
Thanks for any help,
Jim
Live Demo:
http://jsfiddle.net/CZLcR/29/
JS
var selectedMP3;
$('input[name=mp3_option]').change(function() {
selectedMP3 = $('input[name=mp3_option]:checked').val();
});
$('#controlButton').click(function() {
var $this = $(this);
if($this.text() == 'Play') {
$this.children().children().text('Pause');
} else {
$this.children().children().text('Play');
alert('Stopped playing song: '+selectedMP3);
$('input[name=mp3_option]').attr('checked',false).checkboxradio('refresh');
}
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a song:</legend>
<input type="radio" name="mp3_option" id="radio-choice-1" value="song-1.mp3" />
<label for="radio-choice-1">MP3 1</label>
<input type="radio" name="mp3_option" id="radio-choice-2" value="song-2.mp3" />
<label for="radio-choice-2">MP3 2</label>
<input type="radio" name="mp3_option" id="radio-choice-3" value="song-3.mp3" />
<label for="radio-choice-3">MP3 3</label>
<input type="radio" name="mp3_option" id="radio-choice-4" value="song-4.mp3" />
<label for="radio-choice-4">MP3 4</label>
</fieldset>
</div>
Play
</div>
</div>