ASP.NET - two types of users that register in one registration form?

Question

I'm building a website application that will have two different types of users, let's call one A and the other is B. They have some similar data, such as: 'name', 'password', etc., and the rest are different. I have done 2 tables for them separately because I need it like that, but I have an idea and I'm not sure whether I can do it!

The idea is that when the user goes to the Registration Page, they will be shown a registration form that contains the data that is similar between A and B, and then I will let the user check a check box indicating whether it's an A user or a B user. Depending on what they have chosen, the rest of the form will appear in the same page to let them continue registration.

I'm working with ASP.NET in C# and I'm wondering whether this idea is applicable? My problem is with the check box - how do I let the rest of the registration form appear depending on what they have chosen, then add it to the right table?

Answer 1

MVC?

2 options:

Either have both of the forms in your html, with attribute ID = 'form a', 'form b'. Make sure to submit the forms to different actions. Show hide either form like this:

$('.radioBtn').click(function() {
  var formType = $(this).val();
  //alert(formType);
  if (formType == "A") {
    $('#FormA').show();
    $('#FormB').hide();
  } else {
    $('#FormB').show();
    $('#FormA').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form style="display: none" id="FormA" action="/actionA">
  .... your html FORM A
</form>
<form style="display: none" id="FormB" action="/actionB">
  .... your html FORM B
</form>

<input type="radio" name="typeOfForm" class="radioBtn" value="A">Form A
<input type="radio" name="typeOfForm" class="radioBtn" value="B">Form B

Also, if you want to show the forms just don't do display:none inside the form have a which is set to no display until a user makes a choice.

--

OR

Use ajax, have your forms as partial views and upload them into a target div once the radio is clicked. (let us know if this is needed)

I think the first show / hide is enough for your case. There is no reason to upload since the form is just an empty set of inputs.

EDIT

Next, we catch these submitted forms in your controller. Each form will submit to the same action, or you wish different actions, this does not make a difference - your preference.

option 1. The form on the page:

 <form action='@Url.Action("YourRegisterAction", "controller")' >
    <input type="hidden" name="FormType" value="A"/> <!--place B for B form-->
    <input type="text" name="Name" placeholder ="enter your name"/>
    <input type="text" name="Password" placeholder ="enter your name"/>
    <input type="submit" value="Register Me!"/>
 </form>

The controller

    [HttpPost]
    public ActionResult YourRegisterAction(char formType, string name, string password)
    {
        if (formType == 'A')
            bool success = BL.Server.Instance.SaveMyNewUserToDBTypeA(name, password);
        else if (formType == 'B')
            bool success = BL.Server.Instance.SaveMyNewUserToDBTypeB(name, password);

        return View("ThankYou", success);
    }

option 2. Use models. The model

        public class YourRegisterAction
    {
        public string  Name { get; set; }
        public string Password { get; set; }
        public char FormType { get; set; }
    }

The view

@model Domain.UI.Models
<form action='@Url.Action("YourRegisterAction", "controller")' >
    @Html.HiddenFor(m=>m.FormType)
    @Html.TextBoxFor(m=>m.Name)
    @Html.TextBoxFor(m=>m.Password)
<input type="submit" value="Register Me!"/>
</form>

The controller

        [HttpPost]
    public ActionResult YourRegisterAction(RegisterViewModel m)
    {
        if (m.FormType == 'A')
            bool success = BL.Server.Instance.SaveMyNewUserToDBTypeA(m.Name, m.Password);
        else if (m.FormType == 'B')
            bool success = BL.Server.Instance.SaveMyNewUserToDBTypeB(m.Name, m.Password);

        return View("ThankYou", success);
    }

After you have the submitted form in your controller. Just persist in the DB as you normally would.

Also please use @using (Html.BeginForm) instead of the form tags. You can find plenty of info on this here.

Answer 2

Like @Fel said on Comment,

You should better use the radio buttons,

Let call them as rb1 and rb2, grouping the radio buttons by give them a same groupname.

And Also Give AutoPostBack="True" for both, So that only you can change the rest of the fields while the radiobutton is checked.

Create the rest of forms for both users separately as Panels p1 for A and p2 for B

In the rb1_checkedchanged event, show p1, In the rb2_checkedchanged event, show p2

When click the Submit button

if (rb1.checked=true)

display form for A; store it in a Table for A; else display form for B; store it in a Table for B;

Hope this Helps... All the Best...