ASP.NET WebPages Multiple Submit Buttons

Having multiple <forms> tags in a single page can save a lot of time coding, and is a good way to group code/pages which are related. For example, you might have membership and have pages such as Add Roles, Delete Roles, Add User to Role. Instead of having three different pages for each topic, one page is enough.

The method we use to check which <form> was submitted is simple. Each submit button is given a different name and we see which one was requested, for example:

Sponsored Links
if (IsPost)
{
  if (!Request[“AddRole”].IsEmpty())
  {
   //Code for AddRole.
  }
}

The If Statement is going to check if Add Role IS NOT empty (the submit button, this means the button was sent back [requested]) and then execute the code for it.

   var role = Request["role"];
   var deleteRole = Request["deleteRole"];

//GET CURRENT CREATED ROLES
var roles = Roles.GetAllRoles();


if (IsPost){
       if (!Request["AddRole"].IsEmpty())
       {
           if (!role.IsEmpty()){//MAKE SURE ROLE IS NOT EMPTY
           if(!Roles.RoleExists(role)){//MAKE SURE ROLE DOES NOT EXIST
               Roles.CreateRole(role);//CREATE THE ROLE
               msg  = role +" has been created";
           }else{
               msg = role + " already exist!";
           }
       }
       }
       if (!Request["DeleteRole"].IsEmpty())
       {
         if (!deleteRole.IsEmpty()){//MAKE SURE ROLE IS NOT EMPTY
           if(Roles.RoleExists(deleteRole)){//MAKE SURE ROLE EXIST
               Roles.RemoveUsersFromRole(Roles.GetUsersInRole(deleteRole), deleteRole);//REMOVE USERS FORM ROLE
               Roles.DeleteRole(deleteRole);//DELETE ROLE
               msg  = deleteRole +" has been deleted";
           }else{
               msg = deleteRole + " does not exist!";
           }
       }
       }
}

HTML

<div id="tabs">
         <ul>
                 <li><a href="#tabs-1">Add / View Roles</a></li>
                 <li><a href="#tabs-2">Delete Role</a></li>
         </ul>

<div id="tabs-1" class="post-data">
<form method="post">
<p style="color:#a33f3f">@msg</p>
<fieldset class="blog_Posts">
<legend>Add Role</legend>

<div>
@Html.Label("Role")
@Html.TextBox("role")
</div>

<div>
<input type="submit" class="submitform" name="AddRole"/> 
</div>

</fieldset>

<div>
<h4>Current Roles</h4>
<table class="current-data">
<thead>
<tr>
<th>Role Name</th>
<th>Delete?</th>
</tr>
</thead>      
<tbody>
@foreach (var row in roles)
{
<tr>
    <td>@row</td>
    <td><a href="?role=@row#tabs-3" class="delete"></a></td>
</tr>
}
</tbody>
</table>
</div>
</form>
</div>

<div id="tabs-2">
<form method="post" class="post-data">
<fieldset class="forms">
<legend>Delete Role</legend>
    <div class="important">
    <h4>Are you sure you wish to delete role @deleteRole? WARNING! if you delete the role users in the role will be removed!</h4></div>
    <input type="submit" value="Yes" name="DeleteRole" class="submitform"/>
</fieldset>
</form>
</div>
</div>

In order for the Jquery tabs to work you will need to add this code in the <head> section of your HTML document:

<script type="text/javascript" src="@Href("~/src/jquery-1.9.1.js")"></script>
<script type="text/javascript" src="@Href("~/src/jquery-ui-1.10.3.custom.min.js")"></script>

<script>
 $(function() {
    $( "#tabs" ).tabs();
  });
</script>

We have included a custom theme that was made using theme roller.