ASP.NET Core – Passing Form data to Controller, then redirect

I currently am trying to build a “Index” form which has two submit boxes, and then when you hit submit, it adds the two numbers together and then displays the result.

I tried this without a Model (Using ViewData) and managed to get it working, but I’d like it to work with a model. I have attempted this a magnitude of ways but I just cannot see what I am missing.

Journey Class – Two string values and a value (this will be int once I get it working)

    public class JourneyCalculator
    {
        public string PostCodeOne { get; set; }
        public string PostCodeTwo { get; set; }
        public string DistanceValue { get; set; }
    }

Then my controller which has two actions, one standard Index form and one that is supposed to Calculate the mileage. With this I’ve tried the following:

  1. Passing the Model as below
  2. Trying to pass string values from the form (This just fails)
  3. Just simply returning View(model)
public class MapsController : Controller
    {
        public IActionResult Index(JourneyCalculator journeyCalculator)
        {
            return View(journeyCalculator);
        }

        [HttpPost]
        public IActionResult CalculateMileage(JourneyCalculator model)
        {
            model.DistanceValue = model.PostCodeOne + model.PostCodeTwo;
            return RedirectToAction("Index",model);
        }
    }

My form which I would hope passes PostCodeOne and PostCodeTwo to the “CalculateMileage” action. And then we update that value and then the Model.DistanceValue displays

<form>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label>Postcode One</label>
            <input type="text" class="form-control" asp-for="PostCodeOne" placeholder="Postcode One">
        </div>
        <div class="form-group col-md-6">
            <label>Postcode Two</label>
            <input type="text" class="form-control" asp-for="PostCodeTwo" placeholder="Postcode Two">
        </div>
    </div>
    <button type="submit" class="btn btn-primary" asp-controller="Maps" asp-action="CalculateMileage">Calculate Mileage</button>
</form>

@if(Model != null)
{
    <h2>@Model.DistanceValue</h2>
}

I feel I am missing something really obvious, so any help would be fantastic!

When I hit “Submit” the URL updates to https://localhost:44301/Maps/CalculateMileage?PostCodeOne=123&PostCodeTwo=123 or https://localhost:44301/Maps/Index?PostCodeOne=123&PostCodeTwo=123 and both are failing, but I want to just pass the values to the CalculateMileage.

Thank you,

Answer

Don’t redirect to the Index action, but return the Index view straight from the CalculateMileage action passing the model: return View("Index", model);

// controller
[HttpPost]
public IActionResult CalculateMileage(JourneyCalculator model)
{
    model.DistanceValue = model.PostCodeOne + model.PostCodeTwo;
    return View("Index", model);
}

I would also prefer to put the action/method on the form rather than the button:

<form asp-controller="Maps" asp-action="CalculateMileage" method="post">
    <div class="form-row">
    ...
</form>

Alternatively, add a method to handle POST requests on the Index action:

[HttpPost]
public IActionResult Index(JourneyCalculator model)
{
    model.DistanceValue = model.PostCodeOne + model.PostCodeTwo;
    return View(model);
}

Leave a Reply

Your email address will not be published. Required fields are marked *