1

I've racked my brain on this for a day and a half and I'm stumped.

I have an Mvc3 site and I'm implementing a wizard (multi-step form).

The first page receives a view model from the controller and this is serialised to Javascript.

All goes well to the post method below:

$('#nextButton').click(function (evt) {
    // Validate the form, if validation passes, submit the form.
    evt.preventDefault();
    var $form = $('form');
    if ($form.valid()) {
        var viewModel = JSON.stringify(model);
        $.post(
            "SampleSubmission/Home/Index",
            { 'viewModel': viewModel }
        );
    }
});

Then it hits the controller action below:

    [HttpPost]
    public ActionResult Index(string viewModel)
    {
        _viewModel = JsonConvert.DeserializeObject<SampleSubmissionViewModel>(viewModel);

        // Save Model to Session.
        Session[SessionViewModel] = _viewModel;

        // If platform Id != null, workflow has already begun.
        if (ModelState.IsValid)
        {
            return RedirectToAction("SystemDetail");
        }
        return View(_viewModel);
    }

    [HttpGet]
    public ActionResult SystemDetail()
    {
        // Page 2- System Details.
        return View(_viewModel);
    }

The redirection works but no second page is shown.

If I look in Fiddler, the page is returned as it should be.

I'm storing the model in Session because it's an intranet site, before anybody says :-)

Any ideas on how to show the second page?

Cheers,

Jules

Jules Wensley
  • 111
  • 2
  • 8
  • Why do you use a ajax request if all you want to do is post to an action and then redirect? If you still want to use **Ajax/jQuery.post** you have to do sth. with the response returned from your action using the optional `callback` parameter http://docs.jquery.com/Post. Btw. you should never hardcode urls in asp.net mvc. – Andreas Apr 15 '12 at 11:09
  • Hi Andreas,Any suggestions on how to do this? - still learning – Jules Wensley Apr 15 '12 at 11:13
  • I use a variation of this solution: http://stackoverflow.com/questions/6402628/multi-step-registration-process-issues-in-asp-net-mvc-splitted-viewmodels-sing?answertab=votes#tab-top – Andreas Apr 15 '12 at 11:18
  • Thanks Andreas, I'll have a good look at that later. Any ideas why the redirect isn't working? – Jules Wensley Apr 15 '12 at 11:23
  • The redirect is working, however your ajax request receives the redirect and not the browser window (as you expect). So you have to handle the repsonse in your javascript callback (e.g. do sth. with the data received, or redirect from javascript). As you are currently doing nothing with the response it is simply not handled. – Andreas Apr 15 '12 at 11:31
  • Aah, ok. Can I pass the javascript model with the redirect? – Jules Wensley Apr 15 '12 at 11:39
  • I would do sth. after you have posted your data to the action e.g. $.post( "SampleSubmission/Home/Index", { 'viewModel': viewModel }, function(data){ console.log(data); // do sth. } ); – Andreas Apr 15 '12 at 11:44
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10093/discussion-between-jules-wensley-and-andreas) – Jules Wensley Apr 15 '12 at 11:48

2 Answers2

1

To merge all notes into a single answer.

When calling an ajax action to create a wizard it is curcial to handle the server response and attach it in someway to the dom. Thanks to @pilavdzice to post a complete solution.

However this way of creating a wizard is not usable without javascript and imho complexer to maintain, validation would be more complex.

From my experience a solution that uses multiple views and uses simple posts like described in the post from @Darin Dimitrov multi-step registration process or described in Steven Sanderson MVC2 book is simpler and a more robust solution.

Community
  • 1
  • 1
Andreas
  • 5,251
  • 30
  • 43
0

Andreas's comment above is correct.

To explain a bit further, your page isn't displaying anything because you need an onsuccess handler to take the result returned from your ajax and display it on your page, you could do something like this:

   $.post(
        "SampleSubmission/Home/Index",
        { 'viewModel': viewModel },
        //onsuccess handler
        function(data) {
             $('#result').html(data);
         };
    );

In your HTML Page, if you have:

<div id="result"></div>

Whatever you are passing back will be put into that div.

If you are still having trouble after trying this please tell explain where you are stuck and I will help further.

pilavdzice
  • 958
  • 8
  • 27