[RESOLVED]Ajax helper BeginForm method generates "invisible" form?

I try to write a page to reset uers’s password, user fill an email address and it’s sent to server for validation. If pass, user can get a password reset link sent to the safe email address.

The page look like below. The problem is that: the ajax helper always generates form that’s invisible, style: display:none

Please help me review below code.. 

@model String
@{
    ViewBag.Title = "ForgetPassword";
    Layout = "~/Views/Shared/_Layout.cshtml";
    if(IsPost)
    {
        ViewBag.Message = "The password reset url has been sent to your email, please check the email and reset in 30 minutes.";
    }
}

<h2>ForgetPassword</h2>
<p>Get password reset link by the email:</p>
<div id="form_area">
    
</div>

@using (@Ajax.BeginForm(new AjaxOptions{HttpMethod="Post"}))
{
    <input type="text" value="safe_email"/>   <div id="validate_result"></div> 
    @Ajax.ActionLink(
        "Validate", 
        "ValidateEmail", 
        Model, 
        new AjaxOptions{HttpMethod="Post", InsertionMode=InsertionMode.Replace, UpdateTargetId="validate_result"}
        )
    <br />
    <input type="submit" value="Send Email" />
}


Hi,

If the functionality is working per your desired requirement, you  don’t need to be worry.

Since Ajax works without <form>, it tries to capture form submit event and tries to Post via Ajax to the ActionMethod.

Note that <form> is not rend able, its just a container tag, in this case usage of
display:none or not, is not a concern.

Hi, the code doesn’t work, when I say form is invisible, input element and button doesn’t show up neither. thanks.

raju dasa

Hi,

If the functionality is working per your desired requirement, you  don’t need to be worry.

Since Ajax works without <form>, it tries to capture form submit event and tries to Post via Ajax to the ActionMethod.

Note that <form> is not rend able, its just a container tag, in this case usage of
display:none or not, is not a concern.

The ajax framework is unobtrusive which means it works without javascript enabled.  The helper will indeed build a normal form that will still work, it then attaches javascript to the submit event of the form to take over and do an ajax call if js is enabled. 
If it isn’t the form works as normal.

As for the OP’s question, are you seeing the display:none in the *source*, ie when you View->Source from the browser, *not* when you look via the dev tools?  If it is not in the source, but in the dev tools view of the source, then you have some js or css
somewhere hiding the form.

Hi,

Forrest Guo

Hi, the code doesn’t work, when I say form is invisible, input element and button doesn’t show up neither. thanks.

I forgot to imagine that all controls in it will get hidden.Tongue Out

Can u post the jquery/javascript code in _layout page? might be some code from clientside is hiding the form.

Thank Aidy, raju.  you understand me right. I checked the _layout.cshtml shared view, the problem was caused by a line of  hard-code javascript code, forms with id=form0 are hidden. Unfortunately all forms geneated by the ajax helper have same id "form0".
It’s better to differentiate by default.

Leave a Reply