Почему Ajax.BeginForm заменяет всю мою страницу?

Контекст: Asp.Net MVC3 w/Razor

Я пытаюсь поместить форму входа в макет Razor (ранее мастер-страницу), так что, когда пользователь выйдет из системы, ему/ей может быть предложено войти в систему без перенаправления (как в RallyDev). Итак, я создал частичный _LogOn.cshtml со всеми необходимыми материалами (имя пользователя и т.д.) Внутри Ajax.BeginForm с UpdateTargetId, который указывает на div, который содержит элементы управления входами в форме ajax. Форма возвращается к действию AccountsController.RefreshLogOn, но, очевидно, содержащая страница может быть отображена с другого контроллера. Действие RefreshLogOn возвращает PartialView ( "_ LogOn" ). В любом случае, мое ожидание/желание состоит в том, что заменяются только элементы управления внутри этого div. Вместо этого происходит то, что мое местоположение страницы изменяется на /Accounts/RefreshLogon, а вся страница заменяется частичным. Есть ли другой подход, который я должен принять?

Вот соответствующий код:

_LogOn.cshtml

 @{
        using (Ajax.BeginForm("RefreshLogOn", "Accounts", 
            new AjaxOptions { 
                      OnSuccess = "logonSucceeded", 
                      OnFailure = "logonFailed",         
                      HttpMethod = "Post", 
                      UpdateTargetId = "user-info" }, 
            new { @id = "refresh"}))
        {  
        @Html.AntiForgeryToken()

       <div id="user-info">
                <p>Your session has expired.</p>
            <div class="error">@Html.ValidationSummary()</div>
            <table>
                <tr>
                    <td>Username:</td>
                    <td>@Html.TextBoxFor(model => model.UserName)</td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>@Html.PasswordFor(model => model.Password)</td>
                </tr>
                <tr>
                    <td>Remember Me:</td>
                    <td>@Html.CheckBoxFor(model => model.RememberMe)</td>
                </tr>

            </table>
        </div>
            }
        }

AccountsController

public ActionResult RefreshLogOn (LogOnModel model)
{
    if (ModelState.IsValid)
    {
        if (MembershipService.ValidateUser(model.UserName, model.Password))
        {
            ...content elided...

            return PartialView("_LogOn");
        }

        ModelState.AddModelError("", ErrorMessages.IncorrectUsernameOrPassword);
    }

    return PartialView("_LogOn", model);
}

Ajax.BeginForm → сформированный тег формы:

<form action="/Accounts/RefreshLogOn" id="refresh" method="post" 
    onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
    onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), 
    { 
    insertionMode: Sys.Mvc.InsertionMode.replace, 
    httpMethod: &#39;Post&#39;, 
    updateTargetId: &#39;user-info&#39;, 
    onFailure: Function.createDelegate(this, logonFailed), 
    onSuccess: Function.createDelegate(this, logonSucceeded) 
    });">

Ответ 1

Ajax.* Помощники в ASP.NET MVC 3 используют ненавязчивый jquery, поэтому убедитесь, что вы указали jquery.unobtrusive-ajax.js script в своем представлении. Также вы можете использовать FireBug, чтобы узнать, что происходит под сценой, и почему форма не отправляет запрос AJAX.

Также UpdateTargetId = "form" кажется подозрительным, особенно если ваша форма имеет идентификатор refresh: @id = "refresh". Есть ли какой-нибудь другой элемент внутри вашего DOM с id="form"? Может быть, вы имели в виду UpdateTargetId = "refresh"?

Ответ 2

Примечание: моя проблема была первой, я ссылался на неверно ajax script file jquery.validate.unobtrusive.min.js вместо jquery.unobtrusive-ajax.js и последняя версия jquery не работает, только jquery-1.7.1.min.js работал у меня.

i был пытается вернуть содержимое после успешной записи

так что вот порядок:

<script src="~/js/jquery-1.7.1.min.js"></script>
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>

Сообщение Darin и Ричарда Эверетта помогло. надеюсь, помогает.

Ответ 3

У меня была та же проблема и решение было:

  • Убедитесь, что UnobtrusiveJavaScriptEnabled - это правда.
  • Добавить ссылку на jquery.unobtrusive-ajax.js как Дарин советовали.

К сожалению, это не поможет вам, потому что вы устанавливаете UnobtrusiveJavaScriptEnabled в false, но можете помочь кому-то.

Ответ 4

Поздно, но правильно. Обязательно указывайте файл unobtrusive-ajax.js, а также файлы MicrosoftAjax.js и MicrosoftMvcAjax.js в этом порядке. Работы

Ответ 5

Обратите внимание, если вы используете шаблон Asp.Net, как я, он связывает файл с пакетами /jqueryval. Поэтому вам нужно добавить

@Scripts.Render("~/bundles/jqueryval")

на страницу.

Ответ 6

Помимо проверки ссылки на .js, также проверьте, не отображаются ли другие теги формы. В моем случае у меня был еще один тег формы на главной странице с действием по умолчанию, которое вызывало перезагрузку всей страницы.