Passing Parameters from textboxes in a view to a c

Question

I am trying out ASP.Net MVC2 by building a small sample website which, amongst other features provides the user with a 'Contact Us' page. The idea is to allow a user to enter their name, email address, message subject and message. To send the message the user clicks on an ActionLink. This is the view:

    <% Html.BeginForm(); %>
<div>
    <%: Html.Label("Name")%>
    <br />
    <%: Html.TextBox("txtName", "",new { style = "width:100%" })%>
    <br />
    <%: Html.Label("Email address")%>
    <br />
    <%: Html.TextBox("txtEmail", "", new { style = "width:100%" })%>
    <br />
    <%: Html.Label("Subject")%>
    <br />
    <%: Html.TextBox("txtSubject", "", new { style = "width:100%" })%>
    <br />
    <%: Html.Label("Message")%>
    <br />
    <%: Html.TextBox("txtMessage", "", new { style = "width:100%" })%>
</div>
<div style='text-align: right;'>
    <%: 
        Html.ActionLink("Send", "SentEmail", new { name = Html.g, sender = "txtEmail", subject = "txtSubject", message="txtMessage" })
    %>      
</div>
<% Html.EndForm(); %>

The idea is once the ActionLink has been clicked a method in the controller is called into which the username, email address, subject and message will be passed. This is the method in the controller:

        public ActionResult SentEmail(string name, string sender, string subject, string message)
    {
        //Send email here and then display message contents to user.
        ViewData["Name"] = name;
        ViewData["Message"] = message;
        ViewData["ThankyouMessage"] = "Thank you for contacting us. We will be in touch as soon as possible.";
        return View();
    }

However... when I click the link the values which are passed into the method are null. I have tried creating a route to do this but it doesn't work either. Should I be using another method?

Thank you,

Morris

Answer 1

The action link isn't going to trigger a http post nor will it pass in the values of your form fields, just a http get and not passing through any form data - ideally you'd use an input submit button to post the data. What is certain is that it is good practise that any request that causes creating/updating of data should be done via a http post.

Submit button would just be like.

<input type="submit" value="Send" />

You then have several ways of accessing the form data firstly you could use a FormCollection to access the data

[HttpPost]
public ActionResult SendEmail(FormCollection collection)
{
    string email = collection["txtEmail"];
    ...
}

Secondly you could use the method parameters and rely on model binding, but you must make sure field names match the parameter name so

<%: Html.TextBox("txtEmail", "", new { style = "width:100%" })%>

...would require...

[HttpPost]
public ActionResult SendEmail(string txtEmail)
{
    ...
}

If this form isn't being posted to the same action thats return the view then you'd also need to change your begin form tag, ideal you should use 'using' with it as well. So you'd get:

<% using (Html.BeginForm("SendEmail", "<controller-name>"))
   { %>
.... form fields in here ...
<input type="submit" value="Send" />
<% } %>

If the button isn't suitable for your design you could use something like:

<input type="image" src="<%: Url.Content("~/Content/images/myimage.gif") %>" value="Send" />

This would have the same effect. To trigger a post from an a tag though you'd need to look at using javascript, I can't remember the exact syntax but off hand I think if you used jquery you'd be looking at something like: (form a single form page only)

<a href="#" click="$('form').submit(); return false;">Send</a>

But then you create a dependency on javascript where as really you should try have your site degrade gracefully so it can be used by visitors with javascript disabled. There are perhaps more advanced way of achieving this whilst meeting design requirements but that can get heavily into client side code which is probably outside of what you want for your sample.

Answer 2

Actually to achieve what you want to is easier than in your sample. Never heard about Model classes, Model Binder and strong typed views? Here thery are

Model class

public class ContactUsModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Subject { get; set; }
    public string Message { get; set; }
}

Then in your controller you should have two action: the first that show the form with default values and the second that receive the form with the data placed by the user. These two actions maps exactly to the HttpGet and HttPost verbs.

[HttpGet]
public virtual ActionResult ContactUs() {
    ContactUsModel model = new ContactUsModel();
    return View(model);
}


[HttpPost]
public virtual ActionResult ContactUs( ContactUsModel model ) {
    //e.g. Save the contact request to database
}

To use this your view shal be strong typed to the ContactUsModel class

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ContactUsModel>" %>

<% using (Html.BeginForm()) { %>
    <div>
        <%: Html.LabelFor(model => model.Name) %><br />
        <%: Html.TextBoxFor(model => model.Name, new { style = "width:100%" })%>
    </div>
    <div>
        <%: Html.LabelFor(model => model.Email) %><br />
        <%: Html.TextBoxFor(model => model.EMail, new { style = "width:100%" })%>
    </div>
    <div>
        <%: Html.LabelFor(model => model.Subject) %><br />
        <%: Html.TextBoxFor(model => model.Subject, new { style = "width:100%" })%>
    </div>
    <div>
        <%: Html.LabelFor(model => model.Message) %><br />
        <%: Html.TextAreaFor(model => model.Message, new { style = "width:100%" })%>
    </div>
    <div>
        <input type="submit" value="Save" />
    </div>
<% } %>

the magic of everything this is called ModelBinder. Please read more and more about MVC here.