ASP.Net MVC - adding field to New form with adding link (no javascript)
I have an MVC application that has a set of fields for contact information to be added for a person (email, phone, fax, AIM ... etc). Initially, I present a dropdown menu to enter and enter an input field for the relevant data, and a link to add an additional set of fields.
When I have a submit button, submit the form.
I'm happy with the approach for adding an extra set of fields using the add link and javascript, but I can't seem to figure out how to do it without javascript.
I would appreciate some guidance in a better way to solve this problem. I don't really appreciate maintaining a link to add, it could be a button, but I would prefer the url not change in the address bar.
Thanks Richard
a source to share
This is basically the client side of the answer. If you need to do it without JavaScript and without changing the url, that basically leaves POST.
<form action="" method="post">
<input name="field1"/>
<input name="field2"/>
...
<input name="add_field_submit" type="submit" value="Add Field"/>
...
<input name="done_submit" type="submit" value="Submit"/>
On the server, you will find that they clicked the Add Field button (add_field_submit is present) or Submit (done_submit is present). If they clicked the Add Field button, you add a field and view the view. Otherwise it was done.
a source to share
As Matthew said, if you don't want to change the url and don't want to use javascript, the best option is a POST request to the server. However, in ASP.Net MVC this can be done quite neatly. You will need to change two additives and add a new one . View
ActionMethod
View Part 1
Add an extra form to your view (this is not allowed in WebForms, so it might seem a little strange, but in MVC it's great).
<form action="/myController/myView/<%= (ViewData["fieldCount"]+ 1) %>">
<input type="submit" value="Add custom field" />
</form>
Pay attention to the variable fieldCount
- this must be passed from Controller
as shown below:
Controller
Add the following ActionMethod
to override the one you currently need to display.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult myView(int id) {
ViewData["fieldCount"] = id;
Return View();
}
I used the variable name id
so you don't have to add another route.
View Part 2
Now that you have a known field value, so you can simply skip the fields in the view:
<form action="/myController/SaveData/" method="post">
...
<% for(i=0; i<int.TryParse(ViewData["fieldCount"]); i++) { %>
<input type="text" name="customData" /><br />
<% } %>
...
</form>
Note that the two forms have different actions. This way, you don't have to worry about clicking one submit button accidentally sending incorrect data.
a source to share
With jQuery, it's pretty easy to insert html elements into the DOM, on the fly, without postbacks. It uses the javascript you said in your header, which you don't need, but you said that everything is ok in this question, so tell me if you need anything else.
So what you really need to figure out is how the data is processed when it is sent to the server ...
... and that shouldn't be too heavy either. If I am not mistaken (but I may be), values from input
elements with the same name
will be treated as an array of values. Thus, if you are inserting new elements with a common name, you should be able to retrieve all of the data by iterating over the array on the server.
This html
<input type="text" name="customData" />
<input type="text" name="customData" />
will post the data you can get with this code to the C # server:
public ActionResult DoCoolStuff(FormCollection postedValues) {
foreach(string data in postedValues.customData) {
// This is where the cool stuff goes
}
Return RedirectToAction("Index");
}
a source to share