When using MVC, how to call a Controller Action and Pass Text Box values?

Question

How to read from a text box value when using Html.ActionLink so that the value can be passed to the action?

I have the below code:

<table>
        <tr>
            <th>
                Consumer Key:
            </th>
            <td>
                @Html.TextBox("ConsumerKey")
            </td>
        </tr>
        <tr>
            <th>
                Consumer Secret Key:
            </th>
            <td>@Html.TextBox("ConsumerSecretKey")
            </td>
        </tr>
        <tr>
        <th>
        </th>
        <td>@Html.ActionLink("Retreive Access Tokens", "/Retrieve"</td>
        </tr>
    </table>

Basically, I'd need to call the Controller Action and pass the text box values.

How would that be possible with MVC?

I know I can implement it using just an html button and an AJAX call to that Action but I hoped there would be another way using MVC controls.

Answer 1

By putting your code inside the Html.BeginForm("Retrieve", "Twitter") block, the html that is rendered to the browser will be enclosed inside a form-tag, something like:

<form method="POST" action="/Retrieve/Twitter">
    <table>...</table>
</form>

Then when you click on the submit button the form, along with all the values in the text boxes will be posted to you MVC application. Then MVC does the work of mapping these form values (the text boxes created using @Html.TextBox("ConsumerSecretKey") and their values) to the parameters of your controller actions.

In your case, roughly the following will be rendered to the browser (the action link will need to be changed to an input of type "submit," as I have done below:

<form method="POST" action="/Retrieve/Twitter">
    <table>
        <tr>
            <th>
                Consumer Key:
            </th>
        <td>
            <input id="ConsumerKey" name="ConsumerKey" type="text" value="" />
        </td>
    </tr>
    <tr>
        <th>
            Consumer Secret Key:
        </th>
        <td>
            <input id="ConsumerSecretKey" name="ConsumerSecretKey" type="text" value="" />
        </td>
    </tr>

    <td><input type="submit" id="Retrieve" value="Retreive Access Tokens" /></td>

    </tr>

</table>

</form>

When this is posted back to your Application the text you entered into the text boxes (rendered as tags) would map to the parameters of your action method matching their name:

public ActionResult Retrieve(string consumerKey, string consumerSecretKey)
{
    //action method code here
}

The concept at work here is called model-binding. See Controllers and Action Methods in ASP.NET MVC Applications and scroll down to the "Action Method Parameters" section for an overview

Answer 2

I used, Html.BeginForm with a submit button, then oddly the textbox values are submitted to the server automatically:

@using (Html.BeginForm("Retrieve", "Twitter"))
    {
    <table>
        <tr>
            <th>
                Consumer Key:
            </th>
            <td>
                @Html.TextBox("ConsumerKey")
            </td>
        </tr>
        <tr>
            <th>
                Consumer Secret Key:
            </th>
            <td>@Html.TextBox("ConsumerSecretKey")
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <td>
                <input type="submit" id="Retrieve" value="Retreive Access Tokens" />
            </td>
        </tr>
    </table>
    }

And in my Controller Action:

 public ActionResult Retrieve(string consumerKey, string consumerSecretKey)
        {
}

Answer 3

You can use FormCollection object.

[HTTPPost]
 public ActionResult Retrieve(FormCollection collection)
    {
         string consumerKey=collection["ConsumerKey"];
         string consumerSecretKey=collection["ConsumerSecretKey"];
    }

Use form post method by using a submit button in your form.

Answer 4

In reality you cannot POST using Html.ActionLink. You can achieve that using Ajax.ActionLink and setting AjaxOptions properties. If using form is not an option for you, you can always implement jQuery function that intercepts a click generated by Html.ActionLink (based on an ID generated by this helper) and add a value from text box as a parameter. The problem here is that if you don't use Ajax you will submit the values using GET method and this is a big NO. GET should be used for retrieving values, and not for modifying the contents of a database or other backend data store. If you plan to use Ajax you could do something like this:

$(document).ready(function() {
    $("myActionLinkId").click(function() {
        var textBoxValue = $("#myTextBoxId").val();

        $.post($(this).attr("href"), { id: textBoxValue }, function(result) {
            alert("Result data: " + result);
        });
    });
});