Let's say I've a two vanilla* html checkboxes in a Razor cshtml view.
<input type="checkbox" name="tags[]" id="categorieOne" value="1">
<input type="checkbox" name="tags[]" id="categorieTwo" value="2">
The first step would be to send this tags[] array to a controller.
The second step would be to get values 1 & 2 in seperated variables (example: in order to show "You've selected the following categories 1 ... 2" )
*By vanilla I mean they are not written with razor.
If you rename your checkboxes from tags[] to tags, your controller action could take a string array as parameter which will hold the selected values:
<input type="checkbox" name="tags" id="categorieOne" value="1" />
<input type="checkbox" name="tags" id="categorieTwo" value="2" />
and then:
[HttpPost]
public ActionResult SomeAction(string[] tags)
{
... the tags array will contain the selected values (1, 2, ...)
}
Related
Okay so I'm trying to make a front-end filter for a list of search results (much like Amazon), where the user can select a filter category and multiple filter options.
So for example, I have a result list of employees. One of the things you can filter by is by the first letter of the last name. So when you go to the filter, you're presented with a list of checkboxes and a corresponding letter: A[] B[] C[] ... Z[].
The user can select any combination of A-Z, and when they hit submit, I want the route to look like www.sitename.com?lastname=A&lastname=C&lastName=F etc etc using a GET form.
Is there a way in Razor to tie a List/array variable to all of the checked boxes on so that it can post on submit?
You can do something like this:
#using (Html.BeginForm("Index"))
{
<label><input name="lastname" type="checkbox" value="A" />A</label>
<label><input name="lastname" type="checkbox" value="C" />C</label>
<label><input name="lastname" type="checkbox" value="F" />F</label>
<button type="button" onclick="var form=$(this).closest('form');form.attr('action', '#Url.Action("Index")?' + form.serialize());form.submit();">Submit</button>
}
I'm building a webform in c# .net mvc using mongodb to store information. The form works with a company object that has a property that is a List of Addresses, called addressdata. When the form is submitted, the company object is sent to the controller and then upserted into MongoDB. The input names take the form
<input type="text" name="Company.addressdata[a].city" />
Where "a" is the index in the list. This all works great! The list of address objects is created upon submission and inserts into mongoDB.
However, I just added the ability to delete addresses, and now I'm running into trouble. I have noticed that when a user deletes the first row, all the rows after are lost. So, if they delete the 0 index, the Company object will not populate the list of Addresses and thus they will not go into MongoDB.
Is there a way to work around this? Is this how it's designed to work? It seems like too much to renumber all of the following rows with the new index, but is that what it takes? Or is there another way?
In my experience, that's by design. The indexes must start from 0, or you have to define your own indexes for each of them with a special element.
This article shows an example of that: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
<form method="post" action="/Home/Create">
<input type="hidden" name="products.Index" value="cold" />
<input type="text" name="products[cold].Name" value="Beer" />
<input type="text" name="products[cold].Price" value="7.32" />
<input type="hidden" name="products.Index" value="123" />
<input type="text" name="products[123].Name" value="Chips" />
<input type="text" name="products[123].Price" value="2.23" />
<input type="hidden" name="products.Index" value="caliente" />
<input type="text" name="products[caliente].Name" value="Salsa" />
<input type="text" name="products[caliente].Price" value="1.23" />
<input type="submit" />
</form>
So you have options, either:
Update indices when deleting, or
Define arbitrary indices
I have an attendance system in which the user enters the manual entry for attendance . I dont want to do a single entry and post the form.
The user will enter the Employee ID and then the Date and the time when he attended the office.
The the user will press the Add button it will not be added in the database but it will collect the values in input boxes like this
<input type="text" name="EMP_ID" value="">
<input type="text" name="DateTime" value="">
<input type="Submit" value="Add">
As soon it press the Add button the jquery will append the div box with the form elements
like this
<div class="appendBox">
<input type="text" name="time[emp_id][1][timein]" value="2014-02-02 2:00"/>
<input type="text" name="time[emp_id][1][timeout]" value="2014-02-02 2:00"/>
<input type="text" name="time[emp_id][1][Manual]" value="true"/>
</div>
when all the entries added then the submit button will appear and when submit is pressed it will get the array . I have done this in php ..
I want to achieve this in Asp.net MVC3 .
I want to create a model and fetch the values and insert it in the database
I am confused how to achieve . it
I think this is what you are looking for:
model binding to a list
also duplicate of this: Post array in ASP.NET MVC 2 using name="array_name[]" for form elements
I have a simple form in my MVC3 site that allows users to create a contest entry. This has been implemented and works fine currently, but a request has been made to now allow users to make their entries private.
In my Entry model I added a boolean isPrivate. Then I figured I would change the HTML forms for create and edit to include a checkbox to specify whether the entry should be private.
I'm new to MVC3, but I figured I could simply change the action that the form posts to by including a new boolean parameter.
This unfortunately doesn't seem to work. Can anyone tell me how checkbox values are passed from an HTML form to a post action? This is probably fairly common, but I can't seem to find an example for this on the web. Almost all the examples out there simple show text inputs, I can't find anything with checkboxes.
Form:
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return isValidInput()">
<input type="text" id="EntryTitle" name="EntryTitle" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(100 characters remaining)</p>
<input type="text" id="EntryVideo" name="EntryVideo" />
<div id="invalidVideo" class="invalidData"></div>
<p id="vid-desc">(URL of the Video to Embed)</p>
<input type="file" id="ImageFile" name="ImageFile" />
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(200x200px, jpeg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" />
Make my entry private.
<br />
(private entries will only be viewable by you and site administrators)
<br />
<button id="new-entry-save">save</button>
</form>
Action:
public ActionResult Create(string EntryTitle, string EntryVideo, HttpPostedFileBase ImageFile, string EntryDesc, Boolean isPrivate)
{
...
}
add value="true" to checkbox, also add hidden input after it with same name and value=false, i.e.:
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
If you don't want to use hidden, use bool? instead of bool (e.g. nullable)
The other option is to have hidden text field with the same name to force data in unchecked field to be part of the post. See Post the checkboxes that are unchecked.
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
What is the best way to handle this:
class Option {
int id;
string name;
}
class QuoteItem
{
IList<Option> options;
}
class QuoteViewModel {
IList<Option> allOptions;
QuoteItem quoteItem;
}
Basically, I have all the available options in allOptions. I want to have a checkbox that puts another Option (even if its just its id) into the QuoteItem.options list when it is checked. How would I accomplish this? Would it best be an IList<bool> and bind it after the fact?
I suggest you take look at this blog entry from Phil Haack about model binding to a list
For your situation you can use simple model binding to a IEnumerable<int> options, where the values will be the id of your selected options.
your input view will then look something like this:
<form method="post" action="/QuoteItems/SetOptions">
<input type="hidden" name="options" value="1" />
<input type="hidden" name="options" value="4" />
<input type="hidden" name="options" value="2" />
<input type="hidden" name="options" value="8" />
<input type="submit" />
</form>
The hidden inputs contain your selected optionId's, note name attribute which is the same for each hidden input. The default model binder can bind this to a list of integers.
The thing you need to do next is adding / removing a hidden options input at client side depending on whether an item is selected in your "all-options" select control.