Make HttpPost request to an action method in an ASP.NET MVC controller

Question

I am trying to build a functionality where I need to a create a candidate's profile in our application. There are two steps/UI's to create a candidate's profile:

1 - Create template...where the user enters candidate's information.

2 - Preview template...where the user will be shown a preview of how their profile would look like once they add the profile to our system.

I have already created the views to support these UI's via a controller called "CandidateController" which contains few action methods:

1- [HttpGet] "Create" that returns a Create template.

[HttpGet]
public ViewResult Create()

2- [HttpPost] "Preview" that returns a Preview template.

 [HttpPost]
 public ActionResult Preview(ProfileViewModel viewModel)

Now what I need to implement is to have a button/link in the Create template that would call the action method [HttpPost] Preview in the controller.

Challenge I am also wondering if there is a way that the model binder would load the ViewModel object for me if am able to call the HttpPost Preview action method from the first create template.

I am looking for a suggestion/help to how to best achieve this kind a functionality.

Any help will be deeply appreciated.

Answer 1

Challenge I am also wondering if there is a way that the model binder would load the ViewModel object for me if am able to call the HttpPost Preview action method from the first create template.

You could use either a standard form or an AJAX call to invoke the Preview POST action and pass all the property values of the view model then. All the values you pass in this request will be the values that will be bound by the default model binder. Here's an article explaining how the default model binder expects the parameters to be named for more complex structure such as lists and dictionaries.

Example with AJAX:

$.ajax({
    url: '@Url.Action("Preview")',
    type: 'POST',
    data: { Prop1: 'value 1', Prop2: 'value 2' },
    success: function(result) {
        // TODO: do something with the result returned from the POST action
    }
});

If you don't want to use AJAX you could use a standard form with hidden fields:

@using (Html.BeginForm())
{
    @Html.Hidden("Prop1", "value 1")
    @Html.Hidden("Prop2", "value 2")
    ...
    <button type="submit">Preview</button>
}

Answer 2

OK so here are the options that I had to get around:

• As Darin suggested you may go with the unobtrusive way by using $.ajax(options), however the thing is you might want to go this way only if you want to do a partial page update or if you want to work on updating/dumping new html in the same view.

• And if you don't want to use the Ajax, instead of using Hidden fields, you can simply use the TempData property in MVC, this is how I implemented my targeted functionality using TempData. p.s.below...

  [HttpPost]       
  public ActionResult Create(ViewModel viewModel)
  {
      this.TempData["profile"] = viewModel;
      return RedirectToAction("Preview");
  }
  
  
  public ActionResult Preview()
  {            
  
      if (TempData["profile"] != null)
      {
          return View((ViewModel)TempData["profile"]);
      }
  
      // Handle invalid request...
      return null;
  }
  

So, this solution worked pretty well for me, where I did not write any JavaScript or unnecessary HTML. AND thanks Darin for directing me to a starting point.