views:

364

answers:

1

I just started playing with MVC and I've run into a roadblock. I'm using a partial view as a User Login flyout on the header of each page using OpenID. When the user clicks on the provider (similar to stackoverflow) it authenticates and then either returns to the calling page or redirects to the signup page. The code works flawlessly under Firefox and Chrome but bombs out in IE. The "provider" parameter in the controller is always sent as null. Is there some sort of bug involving posting input names/values in IE or am I doing something wrong?

This is what my openid partial view looks like:

<%  using (Html.BeginForm("Authenticate", "Membership", new { ReturnUrl = Request.Url }, FormMethod.Post))
{ 
 if (!Page.User.Identity.IsAuthenticated)
    { %>
   <div class="openidProviders">
    Log in or join using one of these OpenID providers:
    <div class="large buttons">                 
     <div class="provider"><div><%= Html.SubmitImage("provider", "/Content/common/images/google.gif", new { value = "Google" })%></div></div>
     <div class="provider"><div><%= Html.SubmitImage("provider", "/Content/common/images/Yahoo.gif", new { value = "Yahoo" })%></div></div>
     <div class="provider"><div><%= Html.SubmitImage("provider", "/Content/common/images/AOL.gif", new { value = "AOL" })%></div></div>
     <div class="provider"><div><%= Html.SubmitImage("provider", "/Content/common/images/OpenId.gif", new { value = "OpenId" })%></div></div>
    </div>                     
   </div>                                   
 <% }       
}
%>

And the controller logic is here:

[AcceptVerbs(HttpVerbs.Post), ValidateInput(false)]        
public void Authenticate(string provider, string ReturnUrl)
{
    // Figure out provider endpoint
    // Authentication function calls here
}
+2  A: 

Well, it looks like IE, for once, is the only browser properly following the HTML spec according to this post.

The HTML specification only requires that x, y coordinates where the image submit button was clicked be sent to the web server. IE follows the specification. The browsers that send the value="..." parameter are doing their own thing outside of the HTML specification.

Basically, I need to use a submit input instead of SubmitImage and then style the background of the button accordingly. Not the optimal solution but at least it works. This is what the final solution looks like. If anyone knows a way of getting the SubmitImage to work properly, let me know.

Replace the buttons above with ones that look like this:

<input type="submit" value="Google" class="google_OpenID" name="provider" />

And the CSS class:

.google_OpenID
{
    background-image: url(/Content/common/images/google.gif); 
    width:75px; 
    cursor:pointer; 
    color:transparent; 
    height:35px; 
    border:none;
}
Focus