Getting Null when sending form data from view to controller

Question

i have created this section in my index view

    <section id="contact" class="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h3>Contact With Us</h3>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <form action="/Home/Contact" method="post" name="sentMessage" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" runat="server" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" runat="server" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="tel" runat="server" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea runat="server" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>

                                <button type="submit" class="btn btn-success">Send </button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="footer-contact-info">
                        <h4>Action Suraksha Pvt Ltd, Sadhu Petrol Pump, Siwan, Bihar-841226</h4>
                        <ul>
                            <li><strong>E-mail :</strong> info@actionsuraksha.com</li>
                            <li><strong>Phone :</strong> +91-9060611786</li>
                            <li><strong>Mobile :</strong> +8801-45565378</li>

                        </ul>
                    </div>
                </div>
                <div class="col-md-4 col-md-offset-4">
                    <div class="footer-contact-info">
                        <h4>Working Hours</h4>
                        <ul>
                            <li><strong>Mon-Sat :</strong> 9 am to 6 pm</li>
                            <li><strong>Sunday :</strong> Closed</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </section>

And i am trying to retrieve this Form value in controller like:

 [HttpPost]
    public ActionResult Contact()
    {


        string sURL;
        string strname = Request["name"];
        string strEmail = Request["email"];

        string strPhone = Request["phone"];

        string strMessage = Request["message"];
        return View();
    }

I am getting null value for strname ,strEmail ,strPhone ,strMessage Please someone help me to solve this issue , thanks in advance. and if possible give me some example from which i can solve this issue

Answer 1

Your problem is that you don't have any name attributes on your inputs. Only the values of elements with a name attribute will be posted back to the server and the name used is what you look for in the request.

Since you're using MVC, you should look into how view models and Razor work.

runat="server" is not necessary in MVC. That's old-school ASP.NET not MVC.

Answer 2

Create a model to hold the desired data

public class ContactModel {
    public string name { get; set; }
    public string email { get; set; }
    public string phone { get; set; }
    public string message { get; set; }
}

Make sure the properties match the input names used in the view.

And update action to accept the posted form data

[HttpPost]
public ActionResult Contact(ContactModel model) {
    string sURL;
    string strname = model.name;
    string strEmail = model.email;
    string strPhone = model.phone;
    string strMessage = model.message;

    //...

    return View();
}

The model binder will match the submitted inputs and populate the model parameter before passing it to the action.

Answer 3

You are getting empty form because you don't set up attribute ' name ' for input. For example edit your fist input on this way:

<input type="text" runat="server" class="form-control" placeholder="Your Name *" id="name" name="name" required data-validation-required-message="Please enter your name.">

After that you'll get your value from Request:

string strname = Request["name"];

But, I'd recommend you to use ViewModel class for your request. Also, have a look at the documentation ( https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.1 )