Question

In the following code, the get action returns a betting card for a given race date, and the post I use the post action to transform properties of the bound model to route values for the get action.

Essential aspects of the Details View:

@using (Html.BeginForm("Upload", "BettingCard",
                         FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" }))
{ 
    @Html.ValidationSummary(true, "The upload was unsuccessful.  The following error(s) occurred: ")
    <div id="date-selector">
        <div id="ymd">
            @Html.LabelFor(model => model.RaceDate)
            @Html.DropDownListFor(model => model.RaceDay, Model.YmdLists.Days)
            &nbsp; @Html.DropDownListFor(model => model.RaceMonth, Model.YmdLists.Months)
            &nbsp; @Html.DropDownListFor(model => model.RaceYear, Model.YmdLists.Years)
            &nbsp;&nbsp;<input type="submit" value="Upload for this date" />
        </div>
    </div>
    @Html.Telerik().Upload().Name("UploadedFiles")
}

Essential aspects of the controller code:

[HttpGet]
public ActionResult Details(int year, int month, int day) {
    var model = new BettingCardModel
                    {
                        ResultMessage = "No betting card was located for the selected date."
                    };
    DateTime passedDate;
    if (!DateTimeHelper.TrySetDmy(year, month, day, out passedDate)) {         
        ModelState.AddModelError("", "One or more values do not represent a valid date.");
        return View(model);
    }
    model.RaceDate = passedDate;
    var bettingCard = _bettingCardService.GetByRaceDate(passedDate);
    model.MapFromEntity(bettingCard);
    return View(model);
}

[HttpPost]
public ActionResult Details(BettingCardModel model)
{
    return RedirectToAction("Details", new { year = model.RaceYear, month = model.RaceMonth, day = model.RaceDay });
}

A good deal of the above code is experimental and diagnostic, so I’d like to avoid getting into a review of code that works, and rather concentrate on what I need to achieve. In the Details view I only need one ‘command’, being ‘Display for Date’, so I get off easily by using the submit button and the http post takes care of model binding. However, in the Upload view, I need two commands, being ‘Display for Date’ and ‘Upload for Date’, so I would like to make the ‘Display for Date’ operate strictly with the get actions, and only use a post action to submit an uploaded betting card for the date.

My problem is that when I make the ‘Display for Date’ command use an ActionLink instead of a submit, using model.RaceDay etc. as routing values, the URL parameters passed to Details all still contain their initial values, not values set by the user in the dropdowns. It seems the model binding code (whatever that may be) is not invoked for action links. What could I do here to avoid need a post just to do that binding?

I realise this probably not a direct model binding issue, but I don’t know how else to express my question. When elements ‘bound’ to model properties are rendered, they have a bit more on their side than a simple input, say, and some basic styling, but something is ‘built’ around that input with lots of metadata. I would like some way to use that metadata to map to a URL when a get link on the page is clicked.

Answer 1

The problem you’re having is that all of the model data and metadata is generated on the server dynamically and given to the client as static content. The binding is only aware of a change to the Model once it is submitted to the Server. All of that model metadata is static on the client side, using pure .NET it will have no way to know when a user changes a value in the drop-down to also change that value in a static anchor tag, which is what the ActionLink renders to. The answer is to use javascript. There are many many way to accomplish what you’re trying to do through javascript. You could potentially write a custom HtmlHelper class to generate the javascript for you. However if you don’t want to use javascript then you will HAVE to do a post to get the data the user selected to the Server.

If you’re trying to avoid having to re-write code then you can create a partial view for the contents of the form and embed that in two separate views. Another thing you could try is to detect which button was pushed by having two submit buttons with the same name like so:

    <input type="submit" name="command" value="Update" />
    <input type="submit" name="command" value="Display" />

Then in your Controller in the [HttpPost] action you can detect which was pushed via the Request.Forms like this:

[HttpPost]
public ActionResult Details(BettingCardModel model)
{
    if (Request.Forms["command"].Equals("Display"))
    {
        return RedirectToAction("Details", new { year = model.RaceYear, month = model.RaceMonth, day = model.RaceDay });
    }

    // Do your update code here...
    return // Whatever it is you return for update.
}

hopefully this helps you.