CODEWITHSUNDEEP
c#asp.net-mvc
jre247
jre247

Reputation: 1887

how to redirect user to another page and then back, while persisting form input values

I have an exercise edit form with various input fields. This form posts to a Save controller action after the user fills out the exercise details and finally clicks the save submit button. Within this form is a link (right now an ActionLink) that redirects the user to another page to choose an exercise from a catalog (this is helpful so the user can choose the exercise from a nice catalog with images instead of just a drop down of exercise names on the exercise edit form). After the user chooses an exercise from the catalog then they are redirected back to the exercise edit page, where I pass the exerciseId that was chosen from the catalog page. The exercise name drop down is then set to the exercise that was chosen from the catalog page. The user can then save the exercise details.

The problem I'm having is that I can't figure out a good way to persist the user's input field values after the redirect to the exercise catalog page. When the user finally gets redirected back to the exercise edit page then the exercise details that the user had filled out prior to the redirect are gone (which makes sense, because I'm not correctly persisting them currently.

My current method for trying to persist the user's input values is to use an actionlink to send the exercise model values as anonymous object parameters to the redirect controller action, however the model property values are null or 0 when passed. It seems like the actionlink doesn't pass the input values that the user entered.

I thought I could use jQuery to take care of the redirect stuff, so I tried doing a jQuery .post, however I couldn't immediately redirect to another controller action once on the server, I'd have to go into the .post callback function and then set window url to the redirect controller action. However, this seems inefficient with the multiple trips to the server.

I feel like a solution would be to just pass these input values in a form submission, however I'd then have a form within a form, which I tried and couldn't get to work.

@using (Html.BeginForm("Edit", "WorkoutPlanExercise",
FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  <div class="editExercise">
    @Html.ValidationSummary(true)

    @Html.HiddenFor(m => Model.WorkoutPlanExerciseId)

    @Html.HiddenFor(m => Model.WorkoutPlanId)

    @Html.HiddenFor(m => Model.ImageMimeType)

    <div class="editRow">
        <div class="editExerciselbl">
            @Html.LabelFor(m => Model.Name):
        </div>
        <div class="editExerciseInput">
            @Html.DropDownListFor(
                x => x.SelectedExerciseId,
                Model.AllExercises,
                null,
                new { @id = "ddlExercise" }
            )

        </div>

        <span>
            @Html.ActionLink("Browser Exercise Catalog", "ChooseCatalogExercise", 
                new { 
                    workoutPlanExerciseId = Model.WorkoutPlanExerciseId, 
                    workoutPlanId = Model.WorkoutPlanId,
                    reps = Model.Reps,
                    sets = Model.Sets,
                    weight = Model.Weight

                })


        </span>
    </div>

    <div class="editRow">
        <div class="editExerciselbl">
            @Html.LabelFor(m => Model.Reps):
        </div>
        <div class="editExerciseInput">
            @Html.EditorFor(m => Model.Reps)
            @Html.ValidationMessageFor(m => m.Reps)
        </div>
    </div>
    <div class="editRow">
        <div class="editExerciselbl">
            @Html.LabelFor(m => Model.Weight):
        </div>
        <div class="editExerciseInput">
            @Html.EditorFor(m => Model.Weight)
            @Html.ValidationMessageFor(m => m.Weight)
        </div>
    </div>
    <div class="editRow">
        <div class="editExerciselbl">
            @Html.LabelFor(m => Model.Sets):
        </div>
        <div class="editExerciseInput">
            @Html.EditorFor(m => Model.Sets, new { @Value = "0" })
            @Html.ValidationMessageFor(m => m.Sets)
        </div>
    </div>

    <div id="exerciseImageContainer">
        @Html.Partial("Edit.ExerciseImage", Model)
    </div>


    <input id="save" type="submit" value="Save" />

    @Html.ActionLink("Cancel and return to List", "Index", new { workoutPlanId = Model.WorkoutPlanId })
</div>

}

controller:

public ActionResult ChooseCatalogExercise(int workoutPlanExerciseId, int workoutPlanId, int reps, int sets, decimal weight)
    {

        return RedirectToAction("ChooseCatalogExercise", "ExerciseCatalog",
            new { workoutPlanExerciseId = model.WorkoutPlanExerciseId, workoutPlanId = model.WorkoutPlanId, reps = model.Reps, sets = model.Sets, weight = model.Weight });
    }

Upvotes: 1

Views: 1584

Answers (2)

chamara
chamara

Reputation: 12709

"It seems like the actionlink doesn't pass the input values that the user entered."

You need a form submit in order to pass the values to server side. Therefore, action link doesn't submit the form values.

In your scenario I think you may need to change the view structure. Something like, avoiding navigating to another view in between. You may use a Jquery solution similar to following.

http://www.ericmmartin.com/projects/simplemodal-demos/

Upvotes: 1

Greg Ennis
Greg Ennis

Reputation: 15379

Some possibilities I can think of:

  • Use session state on the server to maintain and repopulate the values when rendering the page back out when returning to the catalog page. (Do not do this if you have to scale)
  • Use a cookie to hold the state of the fields and repopulate them when returning (probably not going to work as you will hit the cookie length limit)
  • Instead of redirecting to another page, use a jquery ui dialog, bootstrap modal, or some other pop-over to select the exercise

I think the 3rd is the best. It makes your site more responsive anyway.

Upvotes: 1

Related Questions