Passing Parameters from textboxes in a view to a controller in ASP.Net MVC2

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

Lorenzo · Accepted Answer · 2010-11-26 00:05:15Z

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.

Thanks Lorenzo for your full explanation, it was really good. I am just getting started with this

Mark · Accepted Answer · 2010-11-26 00:02:42Z

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.

answered Nov 26, 2010 at 0:02

Mark

8958 silver badges18 bronze badges

2 Comments

Mark Over a year ago

I should have mention in the ways of accessing the form data you could create a class to act as a strongly typed container for your form data - such view models are the best way in the long run. And the model binding is in mvc is very powerful.

Morrislgn Over a year ago

Thanks for the help Mark, much appreciated. Your explanation was really good and helped me understand a more about how this works.

Collectives™ on Stack Overflow

Passing Parameters from textboxes in a view to a controller in ASP.Net MVC2

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related