I have an MVC user control that displays radio buttons in my MVC app. The issue is that how do I get it to display unique q group name for each control. I need to somehow pass it a parameter to that the name is not set as the same as every other group of radio buttons that I have used the control for on the page.
If this were not MVC I would know how to do this straight away.
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<td><input type="radio" name="need" value="4"/></td>
<td><input type="radio" name="need" value="3"/></td>
<td><input type="radio" name="need" value="2"/></td>
<td><input type="radio" name="need" value="1"/></td>
<td><input type="radio" name="current" value="4"/></td>
<td><input type="radio" name="current" value="3"/></td>
<td><input type="radio" name="current" value="2"/></td>
<td><input type="radio" name="current" value="1"/></td>
Thanks
Andy
If you pass some model data to the user control, then you will be able to use this to group your radio buttons.
Change the top line to declare the model type you are passing, such as:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Group>" %>
Where the class 'Group' is a class of your making containing the group's name.
e.g.
public class Group
{
public string Name { get; set; };
}
Then have your user control render the following:
<td><input type="radio" name="<%: Model.Name %>" value="4"/></td>
<td><input type="radio" name="<%: Model.Name %>" value="3"/></td>
<td><input type="radio" name="<%: Model.Name %>" value="2"/></td>
<td><input type="radio" name="<%: Model.Name %>" value="1"/></td>
You can then show this user control using the RenderPartial HTML helper from it's parent multiple times based on the group name that you require.
<% Html.RenderPartial("PartialControlName", new Group { Name = "need" }); %>
Related
This seems like it should be so basic but for the life of me I can't get it working.
In my MVC 5 web app, I would like to show the user a list of layouts using checkboxes so the user can select whichever layouts are required.
I'm using an editor template, that gets called as such:
<table class="table">
<tr>
<th>
#Html.DisplayName("Selected")
</th>
<th>
#Html.DisplayNameFor(x => x.Layout)
</th>
</tr>
#Html.EditorForModel()
</table>
Inside the template I use a helper for the checkbox.
<tr>
<td>
#Html.CheckBoxFor(x => x.IsSelected)
</td>
<td>
#Html.DisplayFor(x => x.Layout)
</td>
</tr>
This all works fine, I can capture what the user has selected in the Post
What I cannot do however is apply any CSS styles to the checkbox.
What I have read is it should be a matter of:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
This however causes the checkbox to not be rendered.
I have tried a few things such as wrapping the checkbox in a
<div class="checkbox">
but even though the checkbox is rendered, I cannot select any of the items.
Now there is hopefully just something simple I am doing or not doing?
EDIT 1:
I seem to have come across the problem, but am not sure how to fix it.
If I use the following code, it works:
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
What I need to do is for the:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
to be turned into the same as when I use input and label.
The page source looks as such:
<input checked="checked" class="css-checkbox" data-val="true" data-val-required="The IsSelected field is required." id="test5" name="IsSelected" type="checkbox" value="true" /><input name="IsSelected" type="hidden" value="false" />
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
The top comes from the helper and the bottom one is using the input tag directly.
I'm new to KnockOut and I just wanted to bind selected radio button value to td. For my knowledge I didn't do any mistake but my following code doesn't work anymore. Please help me to solve this minor mistake.
Other code parts are working fine in the same page, So nothing wrong other than this code part.
<td data-bind="text: Sex"></td>
<td>
<asp:RadioButton ID="RadioButtonMale" value="Male" GroupName="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Male"/>
<asp:RadioButton ID="RadioButtonFemale" value="Female" GroupName="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Female"/>
</td>
<script type="text/javascript">
var ViewModel = {
Sex : ko.observable("Male"),
};
ko.applyBindings(ViewModel);
</script>
The html that asp .net is generating is incorrect. It needs to have data-bind="checked: Sex" on the input instead of the span. Instead of using <asp:RadioButton do the following:
<input type="radio" ID="RadioButtonMale" value="Male" Name="RadioGroup1" data-bind="checked: Sex" runat="server"><label for="RadioButtonMale">Male</label>
<input type="radio" ID="RadioButtonFemale" value="Female" Name="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Male"><label for="RadioButtonFemale">Female</label>
I am trying to make a feedback from but i am not able to get any example on how to send multidimensional int array from form to controller.
feedback from pic : http://oi58.tinypic.com/p1z10.jpg
Controller
#RequestMapping(value = "/submitfeedback", method = RequestMethod.POST)
public String postsubmitfeedback(#ModelAttribute("answer") #RequestParam("email") String email,
#RequestParam("feedback_id") Integer feedback_id, #RequestParam(value="myanswer[]") int [] myanswer, Answer answer,
Locale locale) {
for(int i=0; i<myanswer.length;i++) {
System.out.println(myanswer[i]);
}
return "submitfeedback";
}
Jsp Form
<form:form commandName="feedback">
<c:forEach items="${questionList}" var="question">
<c:set var="counter" value="${counter + 1}"/>
<tr>
<td>${counter}</td>
<td>${question.question}</td>
<td><input type="radio" name="myanswer[${count}]" id="radio" value="1" /> 1</td>
<td><input type="radio" name="myanswer[${count}]" id="radio" value="2" /> 2</td>
<td><input type="radio" name="myanswer[${count}]" id="radio" value="3" /> 3</td>
<td><input type="radio" name="myanswer[${count}]" id="radio" value="4" /> 4</td>
<td><input type="radio" name="myanswer[${count}]" id="radio" value="5" /> 5</td>
</tr>
<c:set var="count" value="${count+1}"/>
</c:forEach>
</form:form>
First, I strongly recommend you to encapsulate your parameters in an object.
class FeedbackForm {
private String email;
private Integer feedbackId;
private Integer answer;
/** Getters and setters. */
}
The html form inputs' names should match the field names.
Secondly, you have a radio button control, I doubt you will end up with an array of ints, since you can only have one radio button selected at all times. In the bean above, I've corrected it to a single answer. Radio buttons are a bit bizarre, since they're multiple inputs inside the form. you should probably have something like this :
<input type="radio" name="answer" value="1" onClick="changeMyHiddenField()" />1
<input type="radio" name="answer" value="2" onClick="changeMyHiddenField()" />2
<input type="radio" name="answer" value="3" onClick="changeMyHiddenField()" />3
<form {...}> <input id="myHiddenField" type="hidden" name="answer" /> </form>
Thirdly, You have no validation of the client's input. You should take advantage of Spring's bean validation.
#Min(value = 1, message = "Min is 1.")
#Max(value = 5, message = "Max is 5.")
private Integer answer;
Finally, your method signature should look like this:
public String postFeedback(#ModelAttribute #Valid FeedbackForm form, HttpServletRequest request, Locale locale);
I have the following aspx code:
<% foreach (ModelDefect modelDefect in GetCodes())
{%>
<tr>
<td><input disabled="disabled" name="<%= modelDefect.Code %>" value="<%= modelDefect.Code %>" type="checkbox" checked="<%=modelDefect.CompletedDate.HasValue? "checked":string.Empty %>" /></td>
<td><%= modelDefect.Code %></td>
<td><%= modelDefect.Description %></td><td><%= modelDefect.AddedDate %></td>
</tr>
<% } %>
I want the check box to be checked if there is a completed date, and unchecked if not. W3 doesn't appear to say how to leave it unchecked but include the attribute. I don't see a way to conditionally include that attribute on the item. I found a page that suggests that checked="yes" or checked="no" should work but it hasn't. I'd like a browser-independent and standards based solution or... a clean way to conditionally add that tag server side on my asp that is Ajax friendly? (Response.Write doesn't work in Asp.net AJax as I understand it.)
Write a helper method which can be unit tested and reused:
public static string GetCheckedAttribute(DateTime? value)
{
return value.HasValue ? "checked=\"checked\"" : string.Empty;
}
and call it in your page:
<input disabled="disabled"
name="<%= modelDefect.Code %>"
value="<%= modelDefect.Code %>"
type="checkbox"
<%= GetCheckedAttribute(modelDefect.CompletedDate) %>
/>
Take the attribute and put it as a part of the conditional output, this should work for you
<input disabled="disabled"
name="<%= modelDefect.Code %>"
value="<%= modelDefect.Code %>"
type="checkbox"
<%=modelDefect.CompletedDate.HasValue? "checked=checked":string.Empty %>"
/>
How do I access data from html in asp.net in the .cs (code behind) file?
In .aspx page I have:
<tr>
<td>Username:</td><td><input id="username" type="text" /></td>
</tr>
<tr>
<td>Password:</td><td><input id="password" type="password" /></td>
</tr>
<tr>
I know I can convert this to something like:
<tr>
<td>Username:</td><td><asp:TextBox ID="username" TextMode="SingleLine" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td><td><asp:TextBox ID="password" TextMode="Password" runat=server></asp:TextBox></td>
</tr>
This will allow me to access the controls via IDs.
However I was wondering if there was a way of accessing data without using asp.net server-side controls.
Give the inputs a name as well as an id and you will be able to get the values from Request.Form. Inputs without names are not sent back with the form post.
<input id="username" name="username" type="text" />
<input id="password" name="password" type="password" />
var username = Request.Form["username"];
var password = Request.Form["password"];
Add runat="server" to the controls, and then you can access them from the code-behind almost as if they were <asp:______ /> controls.
ASP.NET controls, are in essence HTML controls wrapped, so an asp:Button will render as a input Html control.
Some web developers prefer using Html controls due to the smaller size.
Therefore each HTML control will map to a asp server control.
As the previous answer, from Joel, add the runat="server", then the control can be referenced by the ID from the code behind.
This is your code:
<tr>
<td>Username:</td>
<td><input id="username" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" type="password" /></td>
</tr>
You can just add the runat="server" attribute to the Html controls:
<tr>
<td>Username:</td>
<td><input id="username" runat="server" type="text" /> <!--NOTE THE RUNAT="SERVER"--></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" **runat="server"** type="password" /></td>
</tr>
Now you can access the controls in asp.net.