How do I store the value of a @Html.TextBox to a variable

Question

I'm a newbie to Razor and Asp.Net. I'm mostly a Winforms developer. I must say I don't like what I've been seeing in ASP, over complicated to say the least. Anyways, I want to take the value from a @Html.TextBox and store it to a variable. I've searched on here an can't find a solution. There has to be a simple way of doing this.

I've been trying to pull the value out with Request.Froms but keeps crashing

        @Html.TextBox("test")
        @Html.TextBox("test2")
        @{
            var z = Request.Form["test"];
            var x = Request.Form["test2"];
         }

All I want is to store the inputted value to z and x. Meaning if I input 2 into test and 3 in to test2 I want z = 2 and x = 3.

[https://stackoverflow.com/questions/6601715/how-to-declare-a-local-variable-in-razor](https://stackoverflow.com/questions/6601715/how-to-declare-a-local-variable-in-razor)? — imnotaduck, Sep 10 '19 at 03:54
Note that ASP (and all webforms without JavaScript) is _stateless_. The Razor code is used to _generate_ the page and is not run while the page is displayed. If you want client-side changes based on their interaction with controls you can either use JavaScript that executes on the client or AJAX that posts small portions of the form back to the server and dynamically updates the result. — D Stanley, Sep 10 '19 at 21:16
My comment above is a complete paradigm shift for a winform developer that is used to continuous feedback between controls and code. Don't expect to be intuitive to you yet. — D Stanley, Sep 10 '19 at 21:17

score 0 · Answer 1 · answered Sep 10 '19 at 21:13

Depending on your use case, there are several ways to get the values:

If you need the values in the frontend (e.g. without reload of the page), you can use JavaScript/jQuery to get the values of the textbox. That is because when the user interacts with the inputs, the Razor code already has been executed and turned e.g. into HTML (also see this question). You could set your variables when the inputs are changed using jQuery.change() as follows:

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    var x = null;
    var y = null;
    $(document).ready(function () {
        $("#test").change(function () {
            x = $("#test").val();
            alert(x);
        });
        $("#test2").change(function () {
            y = $("#test2").val();
            alert(y);
        });
    });
</script>

If it is sufficient to have the values after a reload of the page, you can put the inputs in a form, and submit that to the controller, where the values are available in the request or using model binding (see this tutorial for an example of how to do that in ASP.NET Core MVC). A basic example for your scenario:

In the view:

<form asp-controller="Home" asp-action="Test" method="post">
    @Html.TextBox("test")
    @Html.TextBox("test2")
    <button type="submit">Submit</button>
</form>

And in the Home controller (note that here you can access the inputs using the Request):

[HttpPost]
public ActionResult Test()
{
    var x = Request.Form["test"].First();
    var y = Request.Form["test2"].First();

    return RedirectToAction("Index");
}

How do I store the value of a @Html.TextBox to a variable

1 Answers1