How can you clear a bound property on a Razor Page's model when POSTing?

Question

I have a property that is bound to an input field:

<input id="name" asp-for="ContactName" name="ContactName" placeholder="Name" type="text" style="width: 200px !important;" autofocus>

[BindProperty]
public string ContactName { get; set; }

When I POST, I tried clearing the ContactName property by setting it to NULL or string.Empty, but it doesn't work.

What's the proper way to clear out this field?

Curl

What you mean "but it doesn't work."? – Planksheer

That is hard to understand what you expect to be cleared - property, html field, something in database, etc.. – Planksheer

@SeM I'm expecting to be cleared, what I said I was trying to clear, the bound property named, ContactName. I even explained how I was trying to clear it. – Curl

Answer 1

The "proper" way is to follow the PRG (Post-Redirect-Get) pattern. The values of your inputs come from ModelState, not Model. ModelState, itself, is composed of values from Request, ViewData/ViewBag, and finally model. In other words, if a value exists for a bound member in something like Request, that value will take precedence over anything you set on your model.

The PRG pattern instructs that you should only return the view back to the user when there is a validation error. In such cases, you want the posted data to be displayed rather than the data on the model, so that the user can correct any mistakes. If the user's input is valid, you redirect, even if it's back to the same page. The act of redirecting clears out everything from the post. It's like you're coming to the page for the first time, because in fact, it's an entirely new GET request.

Spend

Ah. That makes a lot of sense. Thanks a lot for the help. When I redirected back to the page, it worked as expected. return RedirectToPage("PageName"); – Curl

Answer 2

There may be valid reasons for not wanting to follow the PRG pattern. For instance, you may be using a library like HTMX where you want deal with the post data and then return a Partial as the response directly from the OnPost method. The following is an approach that has worked for me. After modifying the Model values, call ModelState.Clear(), which will clear any errors in the Model and force the Model to be "rebuilt" with the new values. Then return your Page() or, in the following example, your Partial

public IActionResult OnPost()
{
    // process your post data...
    ContactName = String.Empty;
    ModelState.Clear();
    return Partial("_MyPartialView",this);
}

Parapsychology

Answer 3

If Post-Redirect-Get is not an option, the most suitable way to clear/reset the input values (in your case ContactName and other related properties bound to a form) would be:

public IActionResult OnPost()
{
    /*
     * Your logic...
     */
    foreach (var entry in ModelState.Values)
    {
        entry.AttemptedValue = "";
        entry.RawValue = null;
    }
    return Page();
}

Here, we clear the AttemptedValue and RawValue of all properties in the bound Model essentially resetting them after POST returns the view.

Since calling ModelState.Clear() alone would not work, you need to also clear all bound property values. Doing so one by one may not be ideal!

This solution ensures all field based values in the ModelState are cleared without unnecessarily resetting the ModelState.

Interloper