Working with multiple html helpers of same name in mvc4

Question

I have multiple html helpers. When I click login button I am disabling user_register div using jquery and when I enter details the username and password the model binder is able to bind properly but when I click Register I am disabling user_login div and enabling user_register div and when I enter the details only email and firstname is what the model binder is able to bind and not username, password. Is this becoz I am using the same html helpers more than once. How to handle this. I have the following code

<div class="user_login">
 <label>Email / Username</label>
   @Html.TextBoxFor(model => model.Email)
   <br />
   <label>Password</label>
   @Html.TextBoxFor(model => model.Password)                                       
    <br />    
     <div class="action_btns">
      <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i>Back</a>
      </div>
     <div class="one_half last">
      <input type="submit" style="border: none" name="action" class="btn btn_red" value="Login" />
      </div>
     </div>
     <a href="#" class="forgot_password">Forgot password?</a>
  </div>
  <div class="user_register">
    <label>Full Name</label>
     @Html.TextBoxFor(model => model.First_Name)<br />
     <label>Email Address</label>
     @Html.TextBox(model=>model.Email)<br />
      <label>User Name</label>
      @Html.TextBoxFor(model => model.User_Name)<br />
      <label>Password</label>
      @Html.TextBox(model=>model.Password") <br />
  </div>

The controller follows here

public ActionResult Index(Customer customer, string Action)
{
 //something here
}

score 1 · Accepted Answer · 2015-01-12 07:21:45Z

1

You have not shown you complete view, but assuming all those controls are generated inside one form element, then all controls will post back unless you make the inputs disabled. If so, then the first input with name="Email" is bound and the second one is ignored by the DefaultModelBinder. (since the first one is only hidden, its value is probably empty). Your script needs to ensure that the 2 inputs in the login section are disabled, for example

@Html.TextBoxFor(model => model.Email, new { id = "login-email" })

and

$('#login-email').prop('disabled', true);

Note the id attribute so you can select the correct one (and prevent duplicate id's which is invalid html.

An alternative would be to create 2 separate forms.

edited Jan 12, 2015 at 7:21

answered Jan 12, 2015 at 7:16

user3559349

Sign up to request clarification or add additional context in comments.

3 Comments

Shaik Over a year ago

Thanks. The second approach I tried and it worked. Will also try to do the first one. Thanks again.

user3559349 Over a year ago

If you go for the second option, I would suggest 2 separate post methods and specify them in the form tag - @using(Html.BeginForm("LogIn", "Account")) { and @using(Html.BeginForm("Register", "Account")) {. But really you should have 2 separate models, methods and views because they are separate actions and will have separate logic (for example, register action should have a ConfirmPassword property with a [Compare] attribute.

Shaik Over a year ago

Thanks a lot for being so kind

Collectives™ on Stack Overflow

Working with multiple html helpers of same name in mvc4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related