Parameter passed from view to controller not working

Question

I have a very simple view and can't figure out why my textbox value is not passing to my controller. Will the actionlink work for providing the controller the parameter?

@{
ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("LookupEmployee", "Home")) { 
<div class="jumbotron">
<h2>Personnel System</h2><br />
<p>ID: <input type="text" id=employeeID name="employeeID" /></p>
@Html.ActionLink("Your Leave Balance", "LeaveBalance", "Home", null, new { @class = "btn btn-primary btn-large" })
</div>
}

<div class="row">
</div>

My HomeController takes the parameter and fills the dataset. I have hard coded a value and verified that this code works:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult LeaveBalance(string employeeID)
    {
        //ViewBag.Message = "Your application description page.";
        if (!String.IsNullOrEmpty(employeeID))
        {
            DataSet gotData;
            LeaveRequestWCF myDataModel = new LeaveRequestWCF();
            gotData = myDataModel.GetTheData(Convert.ToInt32(employeeID));
            myDataModel.theModelSet = gotData;

            return View(myDataModel);
        }
        return View();
    }
}

Any advice? As you can tell, I'm new with MVC and trying to drift away from web forms.

Answer 1

OPTION 1:

You are using Html.ActionLink to post a form, which cannot be done because Html.ActionLinks are rendered as Anchor tags. Anchor tags make GET Requests unless we explicitly handle their JQuery click event. Use a Submit button to post a form for an appropriate controller action. So instead of -

@Html.ActionLink("Your Leave Balance", "LeaveBalance", "Home", null, new { @class = "btn btn-primary btn-large" })

go for -

<input type="submit" class="SomeClass" value="Submit" /> 

OPTION 2:

You can also use AJAX POST using JQuery click event for anchor tag to post the form and once you get the result, you can make a client side redirection.

        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script>
        $(document).ready(function() {
            $("#solTitle a").click(function() {
                var data = {
                    "Id": $("#TextId").val()
                };
                $.ajax({
                    type: "POST",
                    url: "http://localhost:23133/api/values",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: true,
                    success: function (data, status, jqXHR) {
                        console.log(data);
                        console.log(status);
                        console.log(jqXHR);
                        alert("success..." + data);
                        // handle redirection here
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
             });
         });
        </script>

Answer 2

ActionLink creates a simple <a href /> on the page, that will send a get request to the server.

You need a submit button instead, so your form gets posted with its form inputs. Use:

<button type="submit">Your Leave Balance</button>