Pass value from partial to controller

Question

I've got a page that has an area for partial views, like this:

The partial view changes depending on which section the user is in, through a tab menu. For each tab chosen, the partial view changes. Every partial view shown there has fields to edit. The buttons Save and Cancel are always the same, contained in the surrounding view.

When the user presses Save , I want to catch the inserted values, which I did in other views through:

HTML

<input type="text" name="phoneNumber">

C#

string phoneNumber = Request["phoneNumber"].ToString();

But here, I keep getting a null exception when the debugger hits the above C# line.

How can I pass a value from a partial view to the controller, contained in an input ?

EDIT

Here's my code: the input in the view (the button)

<input type="submit" name="save" value="Save" onclick="location.href='@Url.Action("SaveChanges", "Config")'"/>

And the SaveChanges method, in the controller:

 public ActionResult SaveChanges()
        {
            string phoneNumber = Request["phoneNumber"].ToString();
            ...

Also , I've tried this for my login form and it works fine:

<form method="get" action="../Main/Index">
    <p>
        <input type="text" name="username" maxlength="30"></p>
    <p>
        <input type="password" name="password" maxlength="25"></p>

    <p class="submit">
        <input type="submit" name="commit" value="Login"></p>
    </form>

And the controller (MainController)

public ActionResult Index()
        {
            getCredentials();
...

 public void getCredentials()
        {

            if (Request["username"] != null && Request["password"] != null)
...
return View();

Answer 1

You're not actually posting any values in your submit. Look at what this code is doing:

onclick="location.href='@Url.Action("SaveChanges", "Config")'"

When you click the button, you just tell the browser to go to the URL for the SaveChanges action. This is invoking a GET request and abandoning any form data that was entered client-side.

You should be posting a form instead. Generally this would involve wrapping the elements and the submit button in a form tag (the @Html.BeginForm helper method can help with that) so that client-side it looks like:

<form method="POST" action="/some/url">
    <input type="text" name="phoneNumber" />
    <!-- other HTML elements -->
    <input type="submit" />
</form>

Don't override the action of the submit button unless you still submit the values in some way. Otherwise you just abandon/ignore those form values.

If your page is one large form, wrap the tabs in a single form element. This can be done by wrapping all of the partials:

@using (Html.BeginForm("SaveChanges", "Config"))
{
    // put your partials here

    // put your buttons here
}

If you want each partial view to be its own individual form then put the Html.BeginForm invocation just in that partial view. This can get a little tricky with the single global submit button, however. Generally in a setup with multiple forms each one would have its own button. You can do some JavaScript trickery to show/hide different submit buttons as the tabs change, depending on what you're using to manage your tabs.

Answer 2

You can Create a View model for each partial, and then a View Model that contains all of them, in that case you would receive the the information of all tabs when you submit the form that receive the Parent View Model. something like :

public class ParentViewModel{

    public int Id { get; set; }
    public Option1ViewModel Option1 { get; set; }
    public Option2ViewModel Option2 { get; set; }
    public Option3ViewModel Option3 { get; set; }
    public Option4ViewModel Option4 { get; set; }


}