Tutorial :Asp.Net MVC: Forms being block elements



Question:

Basically, having multiple forms in a row isn't possible so far as I've seen.

LastUpdate

Given the situation with phones and the unpredictable nature of how most the browsers render the page, I think I have to go with multiple buttons per form. Not super happy with this since it feels like a WebForms hack for MVC but it makes the most sense for the situation. Making a complexish ui for mobile devices is tough in WebForms, looks to be harder in MVC.

Something I've been reintroduced to is the idea of having multiple forms per page so that you can have buttons post to different controllers. Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)

Now here's the main problem, this is a site that was build to be viewable on most phones with a browser. It also has a lot of buttons due to buttons being a lot easier to click with touch phones like iPhones. Floating may not (Not completely ruled out) be an option as floating isn't very predictable on phones. Inline sometimes works sometimes not with browsers as I've seen.

This is sort of a large problem from a design standpoint and I'm hoping there's some kind of MVC method for creating a magical button that would work.

Clarification:

I think the best way to put this is I'm using some buttons as links. In the WebForms version, there were a few of the buttons that basically just redirected. So with that in mind:

Say I have three buttons but all three will need to post to different pages. This would suggest 3 different forms. Unfortunately that would also mean all three buttons would now appear as block elements. (Even though that's it's the form causing this.) Maybe I should be asking if in MVC there is a way to post back to the same controller to redirect from there? Redirect I've done, so that's not a big deal. Posting to a controller and evalutating a button based on it's value I haven't, but that almost seems like trying to recreated WebForms functionality of postback.

Example http://www.eythere.com/images/eythere.jpg

From that image, the top three buttons are merely postbacks to redirets.

UPDATE:

Have attempted tables and floating divs. Tables don't work well with small phones like Razors since they tend to ignore TDs and just make on big vertical column.

Tried floating divs like thus:

<div >    <form >     <input type="submit" style="float:left;"/>    </form>    <form>     <input type="submit" style="float:left;"/>    </form>    <form>     <input type="submit" style="float:left;"/>    </form>   </div>  

Problem is it shows the buttons in two rows (That's fine) but the two buttons in the same row aren't aligned vertically. The second one is off by a little bit. Almost to the point that it looks like a Final Four bracket.

May have to go with the multiple buttons to a form thing. This seems to contradict the MVC design but I don't see another way around this.


Solution:1

When you post a form, the name attribute of the button used to post it is sent as a form value. Give each button a name, and then check the Form collection (or an Asp.Net MVC intermediary) for the button's name.

if(!String.IsNullOrEmpty(Request.Form["myButtonName"])) {      //myButtonName has been pressed.  }  

EDIT:

Problem is that turns out a form is a block element so that it's not possible to get to button next to each other. (Why they are block elements I'd like to know.)

Forms are block elements because if they were inline elements it would be invalid to nest tags like p and div inside of them (both of which are handy in constructing forms).


Solution:2

If I understand what you are asking, then sorry there is no such function. You would have to find or create your own method that would identify the client and then output the correct HTML code and CSS to accommodate that device. It may be better to find a solution on the user side of the code. You could maybe use display:inline; to forge the button to act like an inline element no matter what. It should work in all major browsers (http://www.quirksmode.org/css/display.html), and this this probably includes the iPhone browser because it is safari based.


Solution:3

It would probably help if you could explain a bit more about how you want the stuff to interact. That said, no law says a form can only have one submit button, and, when submitted it is possible to figure out which button is clicked--the name/value (text) of the button appear in the posted data. Exactly how to handle that really goes to what needs to happen and how you want to architect it, but you can definitely give a form multiple buttons.

--UPDATE--

Thanks for the clairifications. I think your best bet would be to use normal links and style them a bit:

a.button { display: block; width: 100px; float: left; }  

They should be nice big clickable things in iTouches and in other more modern mobiles and degrade nicely in older mobile stuff as there really ain't nothing that can do HTML that doesn't support links.


Solution:4

this might solve your problem

another solution: if you can use javascript, make a DIV and a onclick action on it

like what Jeff did here on SO with the [Votes] | [Answers] | [Views] "button" on the home page on the left side of every question


Solution:5

Use css to style anchor links like buttons. That way you get rid of the useless forms and maintain affordability and clickability.


Solution:6

I haven't tried this so I can't say if it will work or not, but could you not just set the forms on the page to "display:inline"?


Solution:7

If you are not collecting data from the user, than they just look like simple links.


Solution:8

HTML buttons don't have to be inside forms. You can have a button with a javascript onclick handler that does whatever you want, like setting a form's action and submit it, or load a new document.

<input type="button" value="Home"    onclick="location.href='/index.php'" />  <input type="button" value="Rooms"    onclick="var f=document.getElementById('myform');f.submit()" />  <input type="button" value="Create"    onclick="var f=document.getElementById('myform');f.action='/create.php';f.submit()" />  

Those buttons can then be styled in any way.

If your form isn't collecting data, then all your buttons can behave like the "Home" button in my example.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »