How to clear a @Html.Textboxfor using Javascript?

Question

I am trying to clear the value entered in the field of TextBoxFor the following form just after Submit.

@BHS_Treinamento.WebApi.Models.Curso

@{
    ViewBag.Title = "Cadastrar";
}

<h1>Cadastrar</h1>

@using (Html.BeginForm(null, null, FormMethod.Post, new { @action = "/api/cursos/", onsubmit = "return submitForm()"})) {
<!--Abaixo o Ajax BeginForm-->
@*@using (Ajax.BeginForm("Cadastrar", new AjaxOptions { OnSuccess = "submitForm" })) {*@
@Html.ValidationSummary(true)


<div class="editor-label">
    @Html.LabelFor(model => model.Nome)
</div>
<div class="editor-field" >
    @Html.TextBoxFor(model => model.Nome, new { id = "modelNome" })
    @Html.ValidationMessageFor(model => model.Nome)
</div>
<br />
<p>
    <input type="submit" value="Create" class="btn btn-success"/>
</p>
}

<div>
    @Html.ActionLink("Voltar para Home", "Index", "Home")
</div>

<script type="text/javascript">

function submitForm() {
    debugger;
    if ($("#modelNome").val().replace(/^\s+|\s+$/g, "").length != 0) {
        alert("Cadastrado com sucesso: " + $("#modelNome").val());
    }
    else
        alert("Erro, campo não pode ficar vazio.");
    //$("#modelNome").val("");
}
</script>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

This way the value is entered ok. If I take the comment from the pro script field name receive emptiness ($("#modelNome").val("");) the value is entered as empty as well, because the form action is onSubmit, that is, before saving, the value is changed and is passed this new value for registration. I looked on other forums that some people use the @Ajax.Beginform to use the OnSuccssess,(is commented as I tried to use), but it does not save the data but clears the screen. So I decided to look at the Debugger through the browser and saw that it does not enter the function submitForm maid. I’m starting now on programming so thank you for understanding if the question level is below average.

Answer 1

To use the method Ajax.BeginForm() it is necessary that the plugin Microsof jQuery Unobtrusive Ajax be referenced in your project/file (available on Nuget).

With the plugin referenced and the route configured correctly, the operations performed can be tracked in the tab Network in Developer Tools of your browser.

Note that on the property OnSuccess class AjaxOptions the role of javascript who will be responsible for carrying out the action after the registration that was carried out successfully.