How to clear textboxes defined with MVC HTML helpers

Question

I can't figure out how to do this very simple thing: My page contains a set of textboxes that a user can fill out to add an item to a list. Then the item shows up in a dropdown list.

At that point, I want the "add" textboxes to be cleared. This is the behavior expected by most users, I think. The item has been added; now the textboxes should be empty, ready for the next item to be entered.

However, I can't seem to clear them when I am using Html helpers, e.g., Html.Textbox(...). I like these controls because of the way they "remember" the input in case of input error. However, unlike webforms controls, you can't set them programmatically. They continue to retain the values until the user enters something else.

Is there any way around this behavior? I thought of clearing them in javascript, but I don't want to do that if there are any errors.

UPDATE some of the code; One of my textboxes in the view:

<h6 style="margin-top: 0px">Add custom email template:</h6>
<div style="margin-top: 10px">
<div class="label">Name:</div>
<%= Html.TextBox("addName", "", new { @class="formtext", style="width: 400px" })  %>
<div class="alerttext"><%= Html.ValidationMessage("addName") %></div>
</div>

The class I am using for model binding:

public class ManageEmailTemplatesSubmittedData
{
    [RegularExpression(RegExpressions.templateNameRestrict, ErrorMessage="Names should begin with a character and consist of only characters and numbers")]
    public string addName { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage = "Invalid entry; please omit unusual characters")]
    public string addDescription { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage = "Invalid entry; please omit unusual characters")]
    public string addSubject { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage = "Invalid entry; please omit unusual characters")]
    public string addTemplate { get; set; }

    public string templates { get; set; }

    [RegularExpression(RegExpressions.templateNameRestrict, ErrorMessage = "Names should begin with a character and consist of only characters and numbers")]
    public string editName { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage="Invalid entry; please omit unusual characters")]
    public string editDescription { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage = "Invalid entry; please omit unusual characters")]
    public string editSubject { get; set; }

    [RegularExpression(RegExpressions.freeTextRestrict, ErrorMessage = "Invalid entry; please omit unusual characters")]
    public string editTemplate { get; set; }
}

My action:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult CustomEmails(SubmitButtons buttons, ManageEmailTemplatesSubmittedData data)
    {
        bool saved = false;
        string selectedTemplate = data.templates;
        if (ModelState.IsValid)
        {
            ButtonStyles buttonStyles = ButtonStylesCreator.GetSelectListButtonStyles(rc.persistedData.loggedInUser.userType);
            Notification notification = new Notification(rc);
            if (buttons.addTemplate == buttonStyles.addEmailTemplateButtonValue)
            {
                // add an email template
                notification.SaveCustomTemplate(data.addName, data.addName, data.addTemplate, data.addSubject, data.addDescription);
                saved = true;
            }
            else if (buttons.saveTemplate == buttonStyles.saveTemplateValue)
            {
                // update an email template
                notification.SaveCustomTemplate(data.templates, data.editName, data.editTemplate, data.editSubject, data.editDescription);
                selectedTemplate = "";
                saved = true;
            }
        }

        ConfigureEmailsModelBuilder builder = new ConfigureEmailsModelBuilder(rc, rc.persistedData.loggedInUser.userID, selectedTemplate, true, saved);
        return View(builder.Build());
    }

ConfigureEmailsModelBuilder constructs the view model, which includes a SelectList that is the dropdown list of the items that have been added. (The view is strongly typed to the type generated by builder.Build).

Answer 1

The HTMLHelper's first look at the ModelState and ViewData to see if any values match their key and then finally use whatever value you provide them.

If you need to reset the textboxe's value you also need to clear the ModelState entry with the matching key. Another alternative is redirecting to the same page instead of simply rendering a view via javascript or with MVC.