@Html.BeginForm Displaying "System.Web.Mvc.Html.MvcForm" on Page

Question

I have a razor view that I added a delete button to inside of an 'if' statement and when the view is rendered in the browser it is displaying "System.Web.Mvc.Html.MvcForm" next to the delete button.

How do I get rid of it?

Here is the code:

<div id="deletestatusupdate">
    @if (update.User.UserName.Equals(User.Identity.Name, StringComparison.OrdinalIgnoreCase))
    {
        @Html.BeginForm("deleteupdate", "home")
        @Html.Hidden("returnUrl", Request.Url.ToString())
        <button name="id" value="@update.StatusUpdateId">Delete</button>
    }
</div>

Here is how it shows up in the rendered Razor View:

System.Web.Mvc.Html.MvcForm [Delete Button]

pretend that [delete button] is a an actual button, didn't feel like taking a screen shot.

Thank you for your help.

Answer 1

The recommended way to generate a form is the following:

<div id="deletestatusupdate">
    @if (update.User.UserName.Equals(User.Identity.Name, StringComparison.OrdinalIgnoreCase))
    {
        using(Html.BeginForm("deleteupdate", "home"))
        {
            @Html.Hidden("returnUrl", Request.Url.ToString())
            <button name="id" value="@update.StatusUpdateId">Delete</button>
        }
    }
</div>

Alternatively you could do this:

<div id="deletestatusupdate">
    @if (update.User.UserName.Equals(User.Identity.Name, StringComparison.OrdinalIgnoreCase))
    {
        Html.BeginForm("deleteupdate", "home");
        @Html.Hidden("returnUrl", Request.Url.ToString())
        <button name="id" value="@update.StatusUpdateId">Delete</button>
        Html.EndForm();
    }
</div>

The reason why your original approach did not work is because BeginForm() writes directly to the output.