Search code examples
asp.net-mvcbootstrap-4razor-pagesasp.net-core-2.2

Bootstrap textarea showing html and blocking button

I have a Razor page with a textarea but it shows html annd the button under the textarea is not displayed on the page. If I switch to a normal text input it works fine.

enter image description here

This is the code :

    <div class="card-body">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Text :</label>
            <div class="col-sm-10">
                <textarea rows="3" asp-for="MyText" class="form-control" required />
            </div>
        </div>
        <input type="submit" value="Next" class="btn btn-primary btn-lg btn-block" />
    </div>

See on the page the button is not displayed and the textarea is filled with html...

<form method="post" action="/Home/SubmitThis">
<input type="hidden" id="HiddenField1" name="HiddenField1" value="" />
<input type="hidden" id="HiddenField2" name="HiddenField2" value="" />
<div class="card">
    <div class="card-body">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Text :</label>
            <div class="col-sm-10">
                <textarea rows="3" class="form-control" required id="MyText" name="MyText" />
            </div>
        </div>
        <input type="submit" value="Next" class="btn btn-primary btn-lg btn-block" />
    </div>
</div>

Solution

  • You did not close the Textarea tag properly. textarea tag needs proper closing.

    < textarea rows="3" asp-for="MyText" class="form-control" required > < /textarea>

    Change your code by writing a closed Textarea tag then it will work.