LiamHT LiamHT - 2 months ago 13
Ajax Question

Ajax.BeginForm not creating a form tag inside the dom

In my MVC project I'm using an ajax form to dynamically update some search results based on a modified search term.

When rendering the

Method, it doesn't render a
tag on the page (in the DOM)

everything is set up fine, Jquery, Unobtrusive and AJAX are all referenced and I have working
instances elsewhere

@using (Ajax.BeginForm("FilterSearch","Attachment", new AjaxOptions()
OnComplete = "updateSearchResults",
HttpMethod = "POST"
@Html.HiddenFor(model => model.AccountId)
@Html.HiddenFor(model => model.ContactId)
@Html.HiddenFor(model => model.OpportunityId)

@Html.TextBoxFor(model => model.SearchTerm, new { placeholder = "Search Term", @class = "header-search-box" })
<input type="submit" class="header-search-input" />

is just rendering inside the DOM as

<input id="AccountId" name="AccountId" type="hidden" value="">
<input id="ContactId" name="ContactId" type="hidden" value="">
<input id="OpportunityId" name="OpportunityId" type="hidden" value="O6UJ9A001TB1">
<input class="header-search-box" id="SearchTerm" name="SearchTerm" placeholder="Search Term" type="text" value="">
<input type="submit" class="header-search-input">


Things to try (generally speaking):

  1. Examine your source code (and not what the DOM is interpreting).
    • The DOM is based on how a browser/HTML parser interpreted the page, and now how it may actually be output. (Invalid markup will generally be suppressed, to the best of the parser's ability, and won't show up in debug tools, but will still sit on the page).
  2. Confirm you don't have any markup mis-aligned.
    • Razor is smart enough to detect invalid markup, and may be cleansing output (and fixing a potential mistake), but not in a manner you were expecting.
  3. Given this is dynamic content, make sure you're not nesting forms.
    • Ajax.BeginForm (and the other form helpers) supply <form>/</form> tags regardless; It's in the ctor/de-ctor methods to output those tags.
    • Some kind of post-processing (on the side of the AJAX processor) may be "cleansing" the output to avoid invalid HTML (e.g nested form tags). If it sees there's already a <form>, it may strip that tag from any supplemental markup being brought in.