AJAX Form redirects instead of updating target

Question

I know this question has been asked a lot and I have tried every solution I can find but I still cannot get my Ajax form to update the DIV rather then redirecting to the Action Method e.g(Local..Home/Index_AddUser). I have shortened the code as it is very long otherwise:

View

@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>

Partial View

@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>

UserDetailsController

[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");
        }

_Layout

@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>

BundleConfig

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*"));

Thanks in advance and I am new to Stack and MVC so if you need any more information please ask :)

Answer 1

Why not try Javascript with jquery to update the div async? instead of using mvc controls?

in my opinion I would display the user using the View and Use a partial view to Add a new user.

This would mean your view 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>

Your javascript for this page

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

Your partial Add user 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>
        }

Controller method in Home for your add User partial View

    [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");
    }