.NET Daily

ASP.NET Core – How to Get and Write values to HTML Inputs outside the scope of a Model

Introduction

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.


LATEST POSTS

How to Deliver Accurate Project Status Reports 21st April, 2018

JIRA Workflow for Web Development Example: Simple and Effective 17th April, 2018

ASP.net

ASP.NET Core – How to Get and Write values to HTML Inputs outside the scope of a Model

Posted on .

When you come from ASP.NET WebForms directly to ASP.NET Core, you’ll see that lots and lots of old practices for getting an adding data into web page forms have changed completely.

For example, ASP.NET Core heavily rely on Models for managing form data while on ASP.NET WebForms you were totally in charge of managing that part.

However, you should still be able to manage yourself some inputs. Think about the Search box. You won’t have a model there and you still need to get some values from there.

The exemplification of this tutorial will be made on a very simple form inside a TestInputs.cshtml file.

<div class="row">
    <h2>Test Inputs</h2>
    <ul>
        <li>Below you have some inputs which will be tested for data retrieval</li>
    </ul>
    <form asp-controller="Home" method="post">
        <div class="form-group row">
            <label for="FirstName" class="col-md-2 control-label">First name:</label>
            <input class="form-control" id="FirstName" name="FirstName" type="text" value="@ViewData["FirstName"]"/>
        </div>
        <div class="form-group row">
            <label for="LastName" class="col-md-2 control-label">Last name:</label>
            <input class="form-control" id="LastName" name="LastName" type="text" value="@ViewData["LastName"]"/>
        </div>

        <div class="form-group row">
            <label for="gender" class="col-md-2 control-label">Gender:</label>
            <input class="form-check-input" type="radio" name="Gender" id="Male" checked="@ViewData["Male"]" value="Male"> Male <br/>
            <input class="form-check-input" type="radio" name="Gender" id="Female" value="Female"> Female
        </div>
        <div class="form-group row">
            <input type="submit" asp-action="GetData" formmethod="post" class="btn btn-success" value="Get Values" />
        </div>
        <div class="form-group row">
            <input type="submit" asp-action="SubmitData" class="btn btn-success" value="Submit Values" />
        </div>

        <div class="form-group">
            @if (ViewData["InputValues"]!= null)
            {
                    <p>@ViewData["InputValues"]</p>
            }

        </div>
    </form>
</div>

A few details about the markup: I am using some bootstrap classes for styling. Furthermore I have two submit inputs in the form, one for getting some hardcoded names from code (GetData) and the other one (SubmitData), to make use of those values added in the inputs.

Write Values to Inputs

For writing the values we need to use the ViewData dictionary. I tried to make use of the HttpContext.Request.Form object but in ASP.NET Core, it only returns the data. It doesn’t have possibility to write it as well anymore.

The code of the GetData action method would be the following:

public IActionResult GetData()
{
   ViewData["FirstName"] = "Jon";
   ViewData["LastName"] = "Doe";
   ViewData["Male"] = "checked"; 

   return View("TestInputs");
}

Furthermore, the values are added into the form by adding the ViewData key in the value field. You can see it in the form markup from above.

Get Input Values into Controller

In order to be able read values from inputs, please make sure you have the name attribute populated for each input. It won’t work with only the id. You can notice this as well in the above form markup.

At controller level, we make use of the HttpContext.Request.Form object to get the values. Please see the code behind the SubmitData action method:

public IActionResult SubmitData()
{
     string firstName = HttpContext.Request.Form["FirstName"];
     string lastName = HttpContext.Request.Form["LastName"];
     string gender = HttpContext.Request.Form["Gender"];
     ViewData["InputValues"] = String.Format("Your name is {0} {1} and your gender is {2}", firstName, lastName, gender);
     return View("TestInputs");
}

This is it! I hope this article makes a bit easier for you the transition from ASP.NET WebForms.

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.

There are no comments.

View Comments (0) ...
Navigation

Privacy Preference Center