Posting values from view to controller as a parameter showing null value in parameters

See more:

Razor

popup

MVC5

modal

I am using modal pop up for user to enter email and password to login. This is implemented in post method and the issue is I am not getting null in posted values. I have another Get action implementation same view which is working fine. My code is:

@*@*Jquery Dialog Link Starts*@
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Components/ModalDialog/ModalDialogStyle.css" rel="stylesheet" />
@*@*Jquery Dialog Link Ends*@

@*Jquery and Bootstrap library starts*@
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@*Jquery and Bootstrap library ends*@

@using (Html.BeginForm("SearchRecord", "Home", FormMethod.Get))
{
//this action verb works fine i.e. passe correct value to controller
// some html controls
<input id="btnSubmit" class="btn btn-default" type="submit" value="Submit">
}

Below code block is of modal dialog in which post to controller is getting null value in parameters.

@using (Html.BeginForm("Login", "Home", FormMethod.Post))
   {
       <!-- Bootstrap Modal -->
       <div id="myModal" class="modal fade" role="dialog">
           <div class="modal-dialog">
               <!-- Modal content-->
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">×</button>
                       <h4 class="modal-title">Enter your credentials</h4>
                   </div>
                   <div class="modal-body">
                       <table>
                           <tbody>
                               <tr>
                                   <td>
                                       <input type="text" id="email" placeholder="Email Address" />
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <input type="password" id="password" placeholder="Password" />
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <span id="passwordSpan"></span>
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <input id="btnLogin" class="btn btn-default" type="submit" value="Login">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <span id="messageSpan"></span>
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <img id="loadingImg" src="loading.gif" />
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   </div>
               </div>
               <!-- END Modal content-->
           </div>
       </div>
       <!-- END Bootstrap Modal -->

   }

Controller Method:
[HttpPost]
public ActionResult Login(string email, string password)
{

return View();
}

In email and password, I am getting null value.

What I have tried:

I tried using

string email = Request.Form["email"];
           string password = Request.Form["password"];

but still got null value.