Bootstrap can show a group of inline checkboxes like this:
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
Now suppose that these checkboxes must come from an enum in my viewmodel. So for example I have HolidayModel.RoomPrefs which is an enum like this:
[Flags]
enum ReservationPreferences {
Room = 2,
Breakfast = 4,
Lunch = 8,
Dinner = 16
}
I want to render this enum as a group of inline checkboxes (i.e. the markup above).
I can do so manually, but I rather use a helper or editor template, or something else generic, because the HolidayModel viewmodel has other enums and so I want to reuse the code.
Does Razor have something out of the box to support this?
At this time, MVC has no "out-of-the-box" way to do this. You need to use a combination of custom model binding, and/or editor templates and/or something else.
I've removed enums from my viewmodel and replaced with a series of ugly bools. Does the job.
Related
I am using Tuple to pass two models inside the view like code given below.
#model Tuple<AdvanceSearchModel, List<SearchUserModel>>
<form role="search" method="post" action="/Public/AdvanceSearch">
<div class="form-group">
<label>Name</label>
<input name="FullNames" type="text" class="form-control" value=""/>
</div>
<div class="form-group">
<label>Product</label>
<input name="Products" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Location:</label>
<input name="Location" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>State</label>
<input name="States" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Country</label>
<input name="Countries" type="text" class="form-control" value=""/>
</div>
</form>
All the name attributes inside inputs are of AdvanceSearchModel. How do I use tag helper such as asp-for when passing multiple model to the views containing one or multiple forms? Also how do I retain values of the form after submitting the form in above scenario?
As you can see in the source code of InputTagHelper
You can see it creates the name attribute based on the (lambda) expression in html-tag:asp-for.
what you need
You need a form name tag like this SearchUserModel[0].Location
Where:
SearchUserModel is the property name on the model which is in the controller method you post to
[0] is the index in the list
Location is the property on the iten in the list the SearchUserModel instance
My suggestion
Not to do
Extend the InputTagHelper and add a prefix option (which adds a prefex to the name).
Use a view model Not a tuple!
Create a partial view that only takes SearchUserModel + a prefix (like an int for which row in the list it is for example: usermodel[1])
In your view loop over the list and call the partial.
result
#model SearchUserModel
<input asp-for="Location" my-prefix="ListItem[#Model.Id]" class="form-control" />
Better longterm option
Make a HTML template on how SearchUserModel part of the form should look.
Do ajax call to get the data or put the data as json in your view. (or take step 3 from what not to do)
Generate the form with well structured javascript.
On submit Instead of submitting the form, parse the from to json and send this as json ajax call.
Why do i say this? It is easier to debug if you get weird databindings in your controller.
That said, option 1 is perfectly fine but it might lead to problems later, as it is very static template, you wont be able to add or remove rows easily.
References for proper html name tags for lists:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
How does MVC 4 List Model Binding work?
It is possible to use the basic types of field to create a multidimensional array name?
For example:
<input type="text" name="my_type[translations][name][de]">
<input type="text" name="my_type[translations][name][fr]">
You can use ColectionType. But then you will probably need to change something about how you're using input names like here name="my_type[translations][name][fr]", maybe name="my_type[translations][nameFr]". Using it, your inputs will look like
<input type="text" name="my_type[translations][0][nameDe]">
<input type="text" name="my_type[translations][0][nameFr]">
<input type="text" name="my_type[translations][1][nameDe]">
<input type="text" name="my_type[translations][1][nameFr]">
Here I also presume that you have Translation entity which would have nameDe and nameFr properties.
I have the following in my JSP to show a bunch of roles with checkboxes beside them
<c:forEach var="role" items="${roles}">
<form:checkbox path="roles" value="${role.name}" label="${role.description}"/>
</c:forEach>
Which produces the following
<input id="roles1" name="roles" type="checkbox" value="USER_ROLE" checked="checked"/><label for="roles1">User Role</label><input type="hidden" name="_roles" value="on"/>
<input id="roles2" name="roles" type="checkbox" value="ADMIN_ROLE" checked="checked"/><label for="roles2">Admin Role</label><input type="hidden" name="_roles" value="on"/>
Now what I want to do is apply a css class to the label portion (change the colouring, add a strikethrough, that sort of stuff) based off a boolean field active in my Role object, however I cannot find a way to add said css to the label, only the input (which does not affect the text)
Is there an attribute I'm missing that allows me to do this, or another way of constructing this (other than producing this html by hand)
I'm making some functional tests with symfony2. I want to select a radio button in a basic form :
<form method="post" action="mylink">
<input id="position_51" type="radio" name="user_position" value="51">
<input id="position_52" type="radio" name="user_position" value="52">
<input id="position_54" type="radio" name="user_position" value="54">
<input id="position_57" type="radio" name="user_position" value="57">
<button id="bt_submit" type="submit">Submit</button>
</form>
So I select the form
$buttonFrom = $client->getCrawler()->selectButton('bt_submit');
$form = $buttonFrom->form();
Now, if I want to select radio with a specific ID, like "position_54" and tick it. How to do? In all examples I found, tick() seem to be used in the name attribute of the input... That not help me in a radio button case.
$form['user_position'] doesn't seem to be a array...
Thanks
As said in the symfony doc about testing, you can select an option or a radio this way :
$form['user_position']->select('51');
Here is the API for the ChoiceFormField.
Let me explain myself i'm doing an Application in VB.net asp.net and I Want to put a CheckBox List instead of Radio Button cause my customer want it square and not round. The Only problem i got is when i check a Checkbox the other one are not unchecked. I'm not sure im clear enough feel free to ask me question.
As seen above, this isn't recommended. However if you have to do it, here's how I made it in jQuery:
Create your checkboxes and assign them classes
<input type="checkbox" class="cbr"/>CB 1
<input type="checkbox" class="cbr"/>CB 2
<input type="checkbox" class="cbr"/>CB 3
<input type="checkbox" class="cbr"/>CB 4
<input type="checkbox" class="cbr"/>CB 5
And the jQuery
$(".cbr").click(function() {
$(".cbr").prop("checked", false);
this.checked = true;
});
Here's a demo: http://jsfiddle.net/g2YMs/
Also, if you're creating the checkboxes with ASP.NET controls, you should select them using:
$("#<%=IdOfControl.ClientID%>")
This is, of course, if you decide to go the jQuery way.