I have a WebGrid on my form, inside that I have a column called 'duration'. In this column I'm displaying 2 radio buttons, so the Admin should select one validity period for that user on every row, either 30 days or 90 days and submit. And here I want to get the selected radio button value submitted value and the Id of that row so that I can perform the database activities with that values.
grid.Column("Duration", format: #<text><div style="width: 30em"><table><tr><td><input type="radio" name="group1" value="30"> 30 Days<br>
</td><td><input type="radio" name="group1" value="90"> 90 days<br>
</td></tr></table></div></text>)))
Here the problem is when I'm giving the same group name the radio buttons we can only select one radio button in the entire grid, but how I want is that he should select one radio button on each row. Also how can retrieving be done?
A separate name should be used for each 'group' of radio buttons. Out of all radio buttons that have the same name, only one can be selected.
With MVC, you can use model binding; when your form posts back, the model is built and the properties are assigned based on the name or id values.
To use this, you need to create inputs using methods such as:
#Html.RadioButtonFor(Function(m) m.MyProperty) #* ... *#
******* edit -- clearer explanation *****************
Let's use two 'groups.' A user can select a first name and an occupation. To limit the number of selections within a group, each control group needs its own value for the radio button's 'name' property.
#Html.RadioButtonFor(Function(m) m.NameSelected, "Jane", New With { .name = "UserName" }) Jane <br />
#Html.RadioButtonFor(Function(m) m.NameSelected, "Jack", New With { .name = "UserName" }) Jack <br />
#Html.RadioButtonFor(Function(m) m.Occupation, "Lumberjack", New With { .name = "Occupation" }) Lumberjack <br />
#Html.RadioButtonFor(Function(m) m.Occupation, "Waiter/Waitress", New With { .name = "Occupation" }) Waiter/Waitress
The radio buttons for the names will now be selectable without affecting the radio button selections in the occupation group, and vice versa.
Related
I have a form in a View that brings together a number of pieces of information (address, telephone etc). All these elements are wrapped up in a view model. There is one section that asks the user to select a county. On selection, I want to be able to show a price based on the county selected.
I came across the following SO question which is close to what I want, but it looks like the action submits the form to a 'change controller'. I naively need to be able to basically call two controllers - one onSelectedChange and the other onSubmit. I'm pretty sure ya can't do this!
Here' what I'm after:
#model ViewOrder
#using (Html.BeginForm("Order", "Home"))
{
#* - textboxes et al - *#
<p>
#Html.DropDownListFor(x => x.Counties,
new SelectList(Model.Counties, "CountyId", "County"),
new { #class = "form-control input-sm" })
</p>
<p>
#* - £Price result of dropdown list selection and
add to View Model to add to sub total - *#
</p>
<input type="submit" text = "submit"/>
}
I'm very new to MVC - Could do this easily in webforms (but I'm sticking with MVC!) There must be some form of Ajax action that would allow this. Any suggestions?
First you have a problem with you #Html.DropDownListFor() method. Model.Counties is a complex object (with properties CountyId and County) but you cannot bind a <select> (or any control) to a complex object, only a value type. Your model needs a property (say) public int SelectedCountry { get; set; } and then #Html.DropDownListFor(x => x.SelectedCountry, new SelectList(Model.Counties, "CountyId", "County"), ...)
To display the price, you need to handle the .change event of the dropdown, pass the selected value to a controller method, and update the DOM.
Script (based on the property being SelectedCountry)
var url = '#Url.Action("GetPrice", "yourControllerName")';
$('#SelectedCountry').change(function() {
$.getJSON(url, { ID: $(this).val() }, function(data) {
// do something with the data returned by the method, for example
$('#someElement').text(data);
});
});
Controller
public JsonResult GetPrice(int ID)
{
// ID contains the value of the selected country
var data = "some price to return";
return Json(data, JsonRequestBehavior.AllowGet);
}
Using KnockoutJS + JQuery Validation, all the control validation is working fine. While Radio btn validation is not working.
Issue 1: * is displayed near to radio btn
Male
Female
output: * Male Expected output : Male *
output: * Female Expected output : Female *
Issue 2: While applying Class=Required both radio buttons are mandatory, how we will resolve the issue
Issue 3: Same thing happend for dynamic radio buttons as well. All are available in the same page.
Guide me......
Try the knockout validation, it works so much nicer together with knockout
https://github.com/ericmbarnard/Knockout-Validation
Make sure your radio buttons have the same "name" attribute (this is the case with jquery validation regardless of using knockout)
You only need to add required class to one of them if you do my first point above
Dynamic radio buttons need to have specific names (and names need to be same for all buttons you want to validate in a group)
For instance, I have this foreach loop that validates the radiobuttons correctly because they have unique names
<input type="radio" data-bind="attr: { name: 'options-' + $index() }" class="required" value="Yes" checked />
<input type="radio" data-bind="attr: { name: 'options-' + $index() }" value="No" checked />
<select id="selectedSchool" size="3" multiple="multiple" name="selectedSchool">
#foreach (var item in ViewBag.pt)
{
<OPTION VALUE="#item.entityID">#item.name</OPTION>
}
</select>
on my page the user selects a school from the list of schools, each school has a unique ID which is needed and passed via the VALUE attribute, I also would like to pick up the name
(item.name) that was selected how can I resolve this info from my control Action Result?
public ActionResult ResultsSchoolsAttended(List<int> selectedSchool)
i iterate through the list of results, but I would aslo like selectedSchool.name to enter back in the db as 'display text'
how can i do this?
Well, MVC can only give you what is in the HTTP POST. And if you look at that, you will see that the <option> inner HTML isn't there. So you have only two choices:
Include it in the value in your markup, or
Look it up in your ResultsSchoolsAttended action based on the submitted value.
I'd pick the second, personally.
I am doing a edit operation on a record in Grid . One of the column is DropDownValue.
When I go to Edit View , depending upon this dropdownvalue , I make few fields editable and readable. And , One more point is here, I didnt select the dropdown Yet, But whatever its value selected before is the one which I should retrieve. I know I have to use jQuery .But I didnt exact Syntax to do tht.
Here is my dropdown
<div id="dvstatus">
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
NOT SELECTED VALUE, BUT THE VALUE WITH WHICH IT IS LOADED
My requirement is how to get the dropdown value item , when it is loaded onto .cshtml
If you're not referring to the selected value of the dropdown then just pass the value from the controller to your view using your model if you're using a strongly-typed view or pass it some other way like using ViewBag and just set the value when it's passed on view.
You can add a hidden field to save the initially loaded value. Eg
<div id="dvstatus">
#Html.HiddenFor(model => model.Study.StudyStatusId)
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
Then you can use java script to compare current value of the drop down and the value of the hidden field(which has the initial value).
I have 3 openFaces <o:datatable />s in the same view page (overview.xhtml).
The first displays a list of all music bands
The 2d displays a list of all songs written by music bands
The 3d displays a list of all shows given by music bands
I am using <o:inputTextFilter /> to filter the first datatable using
the row ID (
<h:form>
<o:datatable value="#{bandBean.items}" var="band" ........<o:inputTextFilter
expression="#{band.id}" .../>
</h:form>
<h:form>
<o:datatable value="#{showBean.items}" var="show" ........<o:inputTextFilter
expression="#{band.id}" .../>
</h:form>
<h:form>
<o:datatable value="#{songBean.items}" var="song" ........<o:inputTextFilter
expression="#{band.id}" .../>
</h:form>
The songs and the shows are child objects of music bands.
What I really need is the ability to filter the 3 datatables using the
same inputTextFilter or something similar, since the 3 datatables have each a column with the band ID.
The user will never accept typing the band id three times, first
tilme for the BAND table, second time for the shows table and the
third time for the song table, using 3 filters. Instead he wants to type once the band
ID , and instantly the 3 tables get filtered.
One workaround would be to use three <o:inputTextFilter /> and set their values using javascript or ajax : while the user types something in a filter, the value being typed is appended immediately to the other filters. I can't figure that workaround. yet it seems to be odd to display 3 filters while the user should use only one.
Any ideas and help will be precious!
There's no direct support for attaching a filter to several tables,
however you can simulate this behavior. To so this, you can attach a
hidden ("display: none") to each of your tables
using the "for" attribute, and specify the filtering value for all of
them programmatically.
Here's a simple code snippet which demonstrate this idea:
<o:inputText value="#{MyBean.filterText}"/>
<o:commandButton value="Submit" action="#{MyBean.filterAllTables}"/>
<o:inputTextFilter for="table1" expression="#{book.bookTitle}"
value="#{MyBean.filterCriterion}" style="display: none"/>
<o:inputTextFilter for="table2" expression="#{book.bookTitle}"
value="#{MyBean.filterCriterion}" style="display: none"/>
<o:dataTable id="table1" ...>
<o:dataTable id="table2" ...>
MyBean.java:
private String filterText; // a property w/ getter/setter
private ExpressionFilterCriterion filterCriterion; // a property w/ getter/setter
public void filterTables() {
String filterText = getFilterText();
SimplePropertyLocatorFactory.SimplePropertyLocator propertyLocator =
new SimplePropertyLocatorFactory.SimplePropertyLocator("id"); // "id" is a property name by which you'd like to filter
ExpressionFilterCriterion filterCriterion = new ExpressionFilterCriterion(
propertyLocator, FilterCondition.CONTAINS, filterText);
setFiterCriterion(filterCriterion);
}