How to make an updated TextBox retain its value after a page refresh, using JQuery ( C# MVC )

In this tutorial JQuery will be utilized to update the content of a Razor form/TextBox by pressing a button. I know it sounds elementary, but looking at online forums, it seems that a lot of people have difficulty to achieve this simple feat. For example, it seems that their javaScript/Jquery code does not get executed at all.

OK, type in the below excerpt into the solution explorer tab — >views –> Home –> Index.Cshtml file.

@section scripts{ <script> type="text/javascript"
   $('#TypeX').click(function () { 
                       $("#CustomerName").val("X"); 
    </script>                          
                                 }
});

And then add the id=”TypeX” to the submit button as follows:

<td> <input id=”TypeX” type=”submit” value=”Update Customer” /></td>

Press the Green Button to Run/Execute the application.

You should get the below Web Page, with a blank “Customer Name”

Now, just press the “Update Customer” Button. “Customer Name” text box is populated with “X”.

Now, lets toggle the Value of TextBox between “X’ and “O” each time we press the button, by modifying the Views –> Home –> Index.cshmtl @section script ”

@section scripts
{ <script type=”text/javascript”>

$(“TypeX”).click( function () {if (document.getElementById(“CustomerName”).value == ” || document.getElementById(“CustomerName”).value == ‘O’) {
document.getElementById(“CustomerName”).value = ‘X’
}}
else {
document.getElementById(“CustomerName”).value = ‘O’
});
}

Then rerun the application, so you start with a blank screen, now everytime you press the “Update Customer” Button, the value of “Customer Name” toggles between “X”, and “O”.

Next, we will attemp to toggle the value of a Button between “X”, and “O”

Share this: