MVC - button/form submission?

[fletchsod]

I'm learning MVC and I have a problem.

When I have 1 button on the same form, how do you guys submit the form? (& have the controller process the data).

When I have 2 or more buttons on the same form, how do you guys submit the form? (& have the controller process the data).

 

[jmeckley]

the form element has an attribute named "action" the action will point to the member of the controller/method. ideally each form will point to a controller action. the MVC framework will know how to route the request to the appropriate controller & action.

if you have more than 1 button per form and you want to change the action before submitting the request you can use javascript to change the action, then submit the form.

if all this is new to you I would stick with 1 submit button per form. once you are comfortable with how MVC is routing the request to the action you can introduce javascript that can alter the form before submission.

here is an example of multiple forms and the corresponding actions

<form id="form1" method="post" action="~/my/dothis.aspx">
   <input id="text" name="text" />
   <input type="submit" />
</form>
<form id="form2" method="post" action="~/my/dothat.aspx">
   <input id="number" name="number" />
   <input type="submit" />
</form>

public class MyController : BaseController
{
  public ActionResult DoThis(string text)
  {
  }
  public ActionResult DoThat(int number)
  {
  }
}

if you are coming from webforms development this can be difficult to grok at first because the conventions of webforms dictate exactly 1 "server" form and all requests go to and from a correspond page on the server. MVC does not have this restriction and makes development much easier.

2 concepts worth consider as you implement your controllers.
post-redirect-get & command query separation. I'll spare the details for now unless your interested.

if this doesn't clear things up, post back with more questions.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[fletchsod]

That's what I thought the ActionResult really does.

Yes, I'm coming from ASP.NET WebForm development, it also require me to change my way of thinking too. LOL! I had completed the MVC tour at

http://www.asp.net/mvc

and made the web-application from there. The problem I have is it is only basic and doesn't have additional tour (for immediate users & advanced users). Another problem I had is I'm deaf and I can't use the video clip-arts that show us how it works, no subtitle there. :-/

Thank you for the good example. That is very helpful. I have two more questions.

1) In the example you provided, if both buttons are "type='button'" instead of "type='submit'", how does that works? ((I prefer this method cuz the web-browser like IE does the default submission on the 1st submit button which I don't want. The 2nd example below can tell you why is that.))

2) What about this one, how does that work? Some of the webpages I use have this concept. ((In this example, VIN-Decoding button had to be clicked to get year, make, model and trim [drop-down selections] before the web-users enter mileage, select guide-book options and clicking the Get-Book-Values button.))

--snip--
<form id="form1" method="post" action="~/my/dothis.aspx">
<input id="text" name="text" />
<input id="number" name="number" />
<input type="button" value="Decode VIN" />

<input id="mileage" name="text" />
<!-- Checkboxes for Guide Books (BlackBook, Kelley Blue Book, etc. -->

<input type="button" value="Get Book Value(s)" />
</form>
--snip--

Thanks man!

 

[fletchsod]

P.S. - An example of Controller / ActionResult would help.

 

[jmeckley]

1. if you have 2 buttons then you would define a click event for each button to alter the form action and submit the form. with jquery it might look like this

<input type="button" click="$(this).parent().submit();"

however, i would work with the html conventions and use a submit button to actually submit the form.

2. this seems like a design problem rather than a technical problem. redesign the workflow and/or UI and the technical problem(s) disappear.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[jmeckley]

there are numerous examples online of how MS MVC works.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[fletchsod]

2. Well, I have done some searches and found that many programmers been asking for help on this one. Of those results, it involve some hacking to make it works. Hacking doesn't sound like a good solution to the problem.

One thing I do know of is I can't design multiple webpages where 1 webpage have VIN textbox follow by VIN-Decoding button, 2nd webpages to populate the year, make, model, trim, mileage, etc. Have the customers hop around on the website because customers are not intelligent enough to jump around the website. I have found a good design is not having a web-browser back button being used.

Alright, I guess I'm on my own. Thanks for trying to help out.

 

[jmeckley]

that is just one approach. and you don't want the user jumping around the website. you can drive that automatically, reducing the chance of error.

It will take a while to learn MVC while unlearning webforms, but once that shift is made a light bulb will go off. And once it does MVC becomes a very logical and simple choice.

Jason Meckley
Programmer

faq855-7190
faq732-7259