0

Even using the unobtrusive ajax library, the scripts loaded into this page from the _Login.cshtml file are loaded when the form is submitted and I do not know how to prevent this. An even stranger effect is when an onclick event is applied to any element, when the form is submitted the script gets executed by the number of times the element was clicked.

Edit On further testing, I realized that the unobtrusive ajax library basically re-loads the whole page inside the UpdateTargetId element, which is VERY counterproductive. This means if I submit the page 4 times, the page is loaded subsequently within each UpdateTargetId element, on each page within the page. What am I doing wrong? Is that what it's supposed to do?

    @using MinervaMvc.App_Data
    @model MinervaMvc.Models.LogOnModel
    @{
        ViewBag.Title = "Home Page";
        Layout = "~/Views/Shared/_Login.cshtml";

    }
    <div id="loginContainer">
<h2>
    Login</h2>
<div id="loginForm">
    @{Html.EnableClientValidation();}
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST" }))
      { 
        <table style="margin: 0px auto;">
            <tr>
                <td>
                    @Html.LabelFor(m => m.ServerName, new { @class = "label" })
                </td>
                <td>
                    @Html.TextBoxFor(m => m.ServerName, new { @class = "text" })
                </td>
            </tr>
            <tr>
                <td align='right'>
                    @Html.LabelFor(m => m.UserName, new { @class = "label" })
                </td>
                <td>
                    @Html.TextBoxFor(m => m.UserName, new { @class = "text" })
                </td>
            </tr>
            <tr>
                <td align='right'>
                    @Html.LabelFor(m => m.Password, new { @class = "label" })
                </td>
                <td>
                    @Html.PasswordFor(m => m.Password, new { @class = "text" })
                </td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    <div id='errorShade' class='shade'>
                        <div id='errorBox'>Password or Username is incorrect. Please try again.</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    <div id='loginShade' class='shade'>
                        <input type='submit' class='button' id='btn' value='Login' /></div>
                </td>
            </tr>
        </table>
           <div id='ajaxUpdate' style='position: absolute; visibility: hidden;'>
                @{if (ViewBag.Failed != null && ViewBag.Failed)
                {
                    <script type="text/javascript">
                    pulseState.stopPluse = true;
                    hideShowLogin(true, 'errorShade', 20);
                    hideShowLogin(false, 'loginShade', 33);
                    </script>
                }}
            </div>
      }
</div>
    </div>
    <br />
    <div id="copywrite">
        @{ Html.RenderPartial("Copyright"); }
    </div>
2
  • It looks like you ended up with two accounts (which is why your edit didn't go through right away). If you email [email protected], they should be able to merge them for you. Jul 28, 2011 at 21:27
  • Thanks i'll have to do that, yet... it wasn't my intention to create another account, i was accidently logged into my other gmail account when I logged in sighs
    – Aelux
    Jul 30, 2011 at 12:43

1 Answer 1

0

First things first you don't need the following line:

@{Html.EnableClientValidation();}

Simply enable client validation in your web.config (should be by default):

<appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    <add key="ClientValidationEnabled" value="true"/>
</appSettings>

Then make sure that you have included the following script into your page:

  • jquery-1.5.1.js
  • jquery.validate.js
  • jquery.validate.unobtrusive.js
  • jquery.unobtrusive-ajax.js (this is for all the Ajax.* helpers to work, it has nothing to do with validation)

As far as the whole page reloading is concerned, when you specify an UpdateTargetId element in the AJAX options, this element is updated with the results of the AJAX request returned by the server (often a partial).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.