Форма AJAX перенаправляет вместо обновления цели

Я знаю, что этот вопрос задавали много раз, и я пробовал все решения, которые мог найти, но я все еще не могу заставить свою форму Ajax обновить DIV, а не перенаправить на метод действия, например (Local..Home/Index_AddUser). Я сократил код, так как в противном случае он очень длинный:

Просмотреть

@using (Ajax.BeginForm("Index_AddUser", new AjaxOptions{UpdateTargetId = "userList"}))
    {
        @Html.AntiForgeryToken()
        //This summarises user input and displays error messages
        @Html.ValidationSummary()

        <div id="aParent">

            <div align="justify">
                <div>@Html.LabelFor(model => model.UserLogin)</div>
                <div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div>
            </div>
            //Same as above repeated with different values
            <div>
                <div><input type="submit" value="Add User" id="UserCreate" /></div>
            </div>
        </div>
    }

<div id="userList">
    @{Html.RenderAction("UserListControl");}
</div>

Частичный просмотр

@model IEnumerable<WebApplication1.Models.UserDetail>
            <table>
            <!-- Render the table headers. -->
            <thead>
                <tr>
                    //Table Headers matching LabelFor in VIew
                </tr>
            </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            //Table Rows from db
                        </tr>
                    }
                </tbody>
        </table>

Контроллер пользовательских деталей

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index_AddUser([Bind(Prefix = "NewUserDetails")]UserDetail model)
    {
        Manager manager = new Manager();
            if (model != null)
            {
                manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active);
                return PartialView("UserListControl");
            }
            return PartialView("UserListControl");
        }

_Макет

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Web.config

  <appSettings>
    <add key="webpages:Version" value="3.0.0.0"/>
    <add key="webpages:Enabled" value="false"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

Конфигурация пакета

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

Заранее спасибо, и я новичок в Stack и MVC, поэтому, если вам нужна дополнительная информация, спрашивайте :)


person hjardine    schedule 22.07.2015    source источник
comment
обычно он перенаправляет, если вы не использовали правильную перегрузку @Ajax.BeginForm или не добавили все сценарии. Попробуйте также использовать одну форму с именем контроллера, также проверьте вкладку сети инструмента разработчика, если вы добавили все необходимые скрипты и их загрузку, добавьте httpmethod и insertionmode в параметры ajax.   -  person Chaitanya Gadkari    schedule 22.07.2015
comment
@ChaitanyaGadkari Я сделал это: @using (Ajax.BeginForm("Index_AddUser", new AjaxOptions{HttpMethod = "POST", UpdateTargetId = "userList", InsertionMode = InsertionMode.Replace}))   -  person hjardine    schedule 22.07.2015
comment
@ChaitanyaGadkari по-прежнему перенаправляет на новую страницу   -  person hjardine    schedule 22.07.2015
comment
другие вещи проверял? например, если все скрипты загружаются, и пробовали с beginform с именем контроллера в нем? также посмотрите, если stackoverflow .com/questions/15253692/ помогает   -  person Chaitanya Gadkari    schedule 22.07.2015


Ответы (1)


Почему бы не попробовать Javascript с jquery для обновления асинхронного div? вместо использования элементов управления mvc?

на мой взгляд, я бы отобразил пользователя с помощью представления и использовал частичное представление для добавления нового пользователя.

Это будет означать, что ваш взгляд Users

<input type="button" id="addUser" onclick="newUser()" value="Add User"/>
<div id="NewUserDiv"></div>
@model IEnumerable<WebApplication1.Models.UserDetail>
        <table>
        <!-- Render the table headers. -->
        <thead>
            <tr>
                //Table Headers matching LabelFor in VIew
            </tr>
        </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        //Table Rows from db
                    </tr>
                }
            </tbody>
    </table>

Ваш javascript для этой страницы

        function newUser() {
        $.ajax({
            url: '/Home/CreateUser',
            success: function (data) {
                $('#NewUserDiv').html(data);
            }
        });
    }

Ваш частичный Добавить пользователя View CreateUser

  @using (Html.BeginForm("CreateUser", "Home", FormMethod.Post, new { encType = "multipart/form-data", name = "NewEmployeeForm", @class = "form-group" }))
        {
            @Html.AntiForgeryToken()
    //This summarises user input and displays error messages
    @Html.ValidationSummary()

    <div id="aParent">

        <div align="justify">
            <div>@Html.LabelFor(model => model.UserLogin)</div>
            <div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div>
        </div>
        //Same as above repeated with different values
        <div>
            <div><input type="submit" value="Add User" id="UserCreate" /></div>
        </div>
    </div>
        }

Метод контроллера в Home для частичного просмотра добавления пользователя

    [HttpGet]
    public ActionResult CreateUser()
    {
        var user = new UserDetail();
        return PartialView("CreateUser", user);
    }

    [HttpPost]
    public ActionResult CreateUser(UserDetail model)
    {
    Manager manager = new Manager();
        if (model != null)
        {
            manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active);
        }
        return RedirectToAction("Home", "Users");
    }
person WhaChi    schedule 22.07.2015
comment
Если бы вы могли предоставить образец, мы были бы очень признательны - person hjardine; 22.07.2015
comment
это не ответ. Я знаю, что вы не можете комментировать из-за репутации, но вы можете добавить код, если знаете, как это сделать, чтобы помочь ОП. - person Chaitanya Gadkari; 22.07.2015
comment
Из своего кода вы хотите добавить пользователя и отобразить всех пользователей. я прав? - person WhaChi; 22.07.2015
comment
Да, поэтому я получаю отображение пользователей (таблица) из частичного представления, которое работает нормально, и когда они нажимают «Отправить» в представлении, я хочу, чтобы этот новый пользователь был добавлен в таблицу без полной перезагрузки страницы. - person hjardine; 22.07.2015
comment
Я бы сделал это наоборот (например, ответил @WhaChi). таким образом, у вас есть «Добавить пользователя» в качестве частичного представления, это также можно изменить, чтобы вы только добавляли новый элемент в таблицу, не обновляя всю страницу, однако то, как это делается, является хорошим способом, я также использую это подход, он работает достаточно хорошо. - person Donald Jansen; 22.07.2015
comment
Я выполнил эти шаги, но при нажатии кнопки ничего не происходит @WhaChi - person hjardine; 22.07.2015
comment
Извините, опечатка ‹input type=button id=addUser onclick=newUser() value=Add User/› - person WhaChi; 22.07.2015
comment
Все еще ничего не происходит? - person hjardine; 22.07.2015
comment
Вы получаете какие-либо ошибки javascript при нажатии на кнопку? (щелкните правой кнопкой мыши, чтобы проверить элемент) - person Donald Jansen; 22.07.2015
comment
Синхронный XMLHttpRequest в основном потоке устарел из-за его вредного воздействия на работу конечного пользователя. Для получения дополнительной помощи посетите xhr.spec.whatwg.org. - person hjardine; 22.07.2015
comment
Ах, теперь это работает, я только что перескопировал его, я, должно быть, что-то изменил случайно. Большое спасибо за помощь, вы получаете большую галочку :) - person hjardine; 22.07.2015
comment
Спасибо и engoy MVC :) - person WhaChi; 22.07.2015