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>
}
Related
In asp.net, you can use asp:Repeater for dynamically generating controls.
for example:
<asp:Repeater runat="server" id="rpt">
<ItemTemplate>
<asp:Textbox runat="server"/>
</ItemTemplate>
</asp:Repeater>
Then you can get loop through the items on the server side:
foreach(var items in rpt.Items)
{
}
And in MVC, you can do something like this:
#foreach(var item in model)
{
#Html.TextBoxFor(a=>item.searchCriteria);
}
But there is a problem:
I would like to generate textboxes when ever user clicks add more textbox button:
If I use foreach in MVC, then I won't be able to fetch the user input on the controller, also, I don't have a model to loop through.
And the final desired output will be:
After the user clicks the "Add more textbox" button, a new textbox will be append to the bottom, and after the user clicks the search button, the text inside the textbox will be generated into a query string, something like this:
View:
<input name="searchCriteria" type="text" class="form-control" />
<input name="searchCriteria" type="text" class="form-control" />
<input name="searchCriteria" type="text" class="form-control" />
<input name="searchCriteria" type="text" class="form-control" />
Controller:
public ActionResult Search()
{
string queryString = Request.RawUrl;
//parse the querystring here
return View(NumberOfVisitorsReport);
}
And the query string generated will be:
www.website.com/?searchCriteria=a&searchCriteria=b&searchCriteria=c
So are there any alternative way to achieve this in MVC?
Edit:
I've took a look at some post on "How to generate controls dynamically in MVC"
For example
Control creation based on model value in MVC4
He is generating controls based on value in database, if I implement this to my website, the controls will lose value on each post back.
You probably want to move away from "postback" and look to adding text boxes dynamically in the browser using jQuery or a similar framework. If you either name the new text boxes carefully or do the submit as an AJAX post of a JSON object, you can harvest all the values from all the added controls.
You must use jquery.
This article can help for solve to problem.
Dynamic Form in Asp.net MVC & jquery
You are going to have to use For loop insead of ForEach. Then use the index to Create new Textbox controls, this way when you submit the form, index of newly created textbox will be submited, you can even BIND it to a model if the data type of your model is LIST.
Example:
#for (int i = 0; i < Model.Contributor.Count(); i++)
{
#Html.HiddenFor(model => Model.Contributor[i].Id)
}
now you know the value/index of "i", use that to populate new controls.
I have an HTML form that I'm processing with Perl CGI, like so:
<form action="process.cgi" id="main">
<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />
</form>
And I'm validating it with the jQuery Validation plugin. Trouble is, when I call $('#main').valid(), it only checks that the first field is non-empty. How to I get it to check all the fields?
OFFICIAL DOCUMENTATION:
jqueryvalidation.org/reference/#link-markup-recommendations
"Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements. However, each group of radio or checkbox elements will share the same 'name' since the value of this grouping represents a single piece of the form data."
<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />
Quote OP:
Trouble is, when I call $('#main').valid(), it only checks that the
first field is non-empty. How to I get it to check all the fields?
It has nothing specifically to do with .valid() and it will fail the same using other jQuery Validate methods. That's because all three fields have the same name of foo. For this plugin each input must have a unique name.
DEMO: jsfiddle.net/xaFZj/
EDIT:
You cannot have duplicate names while using this plugin. This demo clearly shows that the plugin will fail when the name attribute is duplicated. There is no workaround since the name attribute is how the plugin keeps track of the form elements.
jsfiddle.net/ed3vxgmy/
The only exception is a radio or checkbox group where the elements in each grouping will share the same name.
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
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, ...)
}
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.