Submitting a form to MVC

Question

My form code is not generating correct HTML. Here's my code.

Here's the form code:

@using (Html.BeginForm("SendEmail", "PropertyDetails", FormMethod.Post))
{
    <fieldset>
        <div class="left">
            <label for="Name">Your Name</label>
            <input type="text" required name="Name" />

            <label for="Phone">Your Phone Number</label>
            <input type="text" required name="Phone" />

            <label for="Email">Your Email</label>
            <input type="email" class="text" required name="Email" />
        </div>

        <div class="right">
            <label for="Message">Your Message</label>
            <textarea name="Message"> 
            </textarea>
            <input type="submit" name="submit" value="send" />
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </fieldset>
}

Here's my Controller. I have a breakpoint on the first line of the SendMail message which isn't being hit:

public class PropertyDetailsController : Controller
{
    [HttpPost]
    public ActionResult SendEmail(EmailData email)
    {
        if (ModelState.IsValid) // BREAKPOINT ON THIS LINE ISN'T BEING HIT
        {

etc.

Here's the class that should get populated with the form data and passed into the method (I'm not doing this myself. I assume it's happening automatically under the covers).

public class EmailData
{
    private string _name;
    private string _email;
    private string _phone;
    private string _message;

    [Required]
    [StringLength(50, MinimumLength = 1)]
    public string Name
    {
        get { return _name; }
        set { _name = value == null ? string.Empty : value.Trim(); }
    }

    [Required]
    [RegularExpression(RegEx.Email, ErrorMessage = "Invalid e-mail address.")]
    public string Email
    {
        get { return _email; }
        set { _email = value == null ? string.Empty : value.Trim(); }
    }

    public string Phone
    {
        get { return _phone; }
        set { _phone = value == null ? string.Empty : HtmlHelper.StripIllegalXmlChars(value.Trim()); }
    }

    [StringLength(500, MinimumLength = 1)]
    public string Message
    {
        get { return _message; }
        set { _message = value == null ? string.Empty : HtmlHelper.StripIllegalXmlChars(value.Trim()); }
    }
}

Here's the HTML that's being generated:

<form action="" method="post">            
   <fieldset>
                <div class="left">
                    <label for="Name">Your Name</label>
                    <input type="text" required name="Name" />

                    <label for="Phone">Your Phone Number</label>
                    <input type="text" required name="Phone" />

                    <label for="Email">Your Email</label>
                    <input type="email" class="text" required name="Email" />
                </div>

                <div class="right">
                    <label for="Message">Your Message</label>
                    <textarea name="Message"> 
                    </textarea>
                    <input type="submit" name="submit" value="send" />
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
   </fieldset>
</form>

Any ideas why the action is empty?

Answer 1

You need to add an action to your form

<form action="/SendEmail/" method="post">

But really this should be done using the MVC3 BeginForm helper.

You need to have your HTML rendered by a controller. So put your HTML in a View called "SendEmail" and write a controller action with an [HttpGet] attribute. Call the Action "SendEmail" and in it just do return View().

Like this

    [HttpGet]
    public ActionResult SendEmail()
    {
        return View();
    }

That will cause the BeginForm to render the action="" properly.

Then once that's working you are going to have a problem when you do post the data back because the input fields aren't bound to you model. You need to add @model yournamespace.EmailData to the very top of your View and then you need to change your inputs to bind to the model properties.

I've no idea how good this link is but it's the first one I found that looks like it might guide you through a similar process http://geekswithblogs.net/WinAZ/archive/2010/10/30/an-mvc-3-contact-form.aspx

Answer 2

Try changing the form declaration within your view to this (using Razor syntax):

@using (this.Html.BeginForm("SendEmail", "[your controller name]", FormMethod.Post))
{
  [form HTML]
}

The using statement will ensure that your form is closed correctly.

Also the HtmlHelper.BeginForm extension method is flexible enough that it generates the URI for the action based on the routes defined in your application's RouteCollection, such that if your routes change the form does not need to be updated; the change in URI is handled gracefully and automatically.

Answer 3

Change your <form> declaration to this:

<% using (Html.BeginForm("SendEmail", "[Controller]")) { %>

<!-- Form data -->

<% } %>

Where [Controller] is the name of your Controller minus "Controller". In other words, if the controller name is HomeController, you would use "Home".