AJAX 表单重定向而不是更新目标

Question

我知道这个问题已经被问了很多，我已经尝试了所有我能找到的解决方案，但我仍然无法让我的 Ajax 表单更新 DIV 而不是重定向到操作方法例如（本地..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>

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

提前致谢，我是 Stack 和 MVC 的新手，所以如果您需要更多信息，请询问 :)

Answer 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);
            }
        });
    }

你的部分添加用户查看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>
        }

主页中用于添加用户部分视图的控制器方法

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

AJAX 表单重定向而不是更新目标

AJAX Form redirects instead of updating target

ajax

jquery

partial-views

unobtrusive-ajax