Question

我正在使用Ajax将部分页面替换为包含多个提交表单的部分视图。这通常适用于我使用普通的Html.BeginForm并重新加载整个页面（提交表单加载的工作）。但是，使用Ajax加载提交表单时，它们会正常显示在页面上但不起作用。

我一直在寻找信息，但我发现的信息主要涉及通过Ajax调用提交表单，而不是加载提交表单。

这是包含javascript的主视图。

@model List<SrrManager.Models.User>

@{
    ViewBag.Title = "Create";
}
<script>
    $(function () {
        $('Body').keypress(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });
        $('#nomButton').keyup(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });/*
        $('#prenomButton').keypress(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });*/
        $("#nomButton").on('click', function () {

            var givenName = $("#prenomBox").val();
            var nom = $("#nomBox").val();
            $.ajax({
                url: '@Url.Action("Create", "ManageUser")', //+ "?firstname=" + givenName + "&lastname=" + lastname,
                type: 'GET',
                data: { prenom: givenName, nomFamille: nom },
                success: function (result) {
                    $('#liste-user').replaceWith(result);
                }
            });
        });
    });
</script>
<body>

    <h2>Add an user</h2>

    <p>
        <label class="label-form">Prenom :</label>@Html.TextBox("prenomBox")
        <br />
        <label class="label-form">Nom :</label> @Html.TextBox("nomBox")
        <br />
        <input type="button" value="Filter" id="nomButton" />
    </p>

    @Html.Partial("_Create", Model)

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

</body>

_Create PartialView如下：

@model List<SrrManager.Models.User>

<div id="liste-user">
    <table>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                Admin
            </th>
            <th></th>
        </tr>
        @foreach(var item in Model)
        {
            <tr>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.LastName
                </td>
                <td>
                    @item.email
                </td>
                 @Html.Partial("__create", item)
             </tr>
        }
    </table>
</div>

最后一个PartialView用于创建提交表单。该模型不是List而只是User，并且在每个循环中都包含一次：

@model SrrManager.Models.User


@using(Html.BeginForm()){

    <fieldset>
        <legend>User</legend>
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        @Html.HiddenFor(x => x.Name)
        @Html.HiddenFor(x => x.LastName)
        @Html.HiddenFor(x => x.email)
        @Html.HiddenFor(x => x.account)
        <td>
            @Html.EditorFor(x => x.IsAdmin)
        </td>
        <td>
            <input type="submit" value="save" />
        </td>
    </fieldset>
}

当单击“过滤器”按钮时，通常使用Ajax调用或同步JQuery调用显示用户和提交表单的列表，并按预期调用控制器方法。但是，按钮在加载同步JQuery调用时起作用，但在通过Ajax加载时不起作用。

控制器方法是：

public ActionResult Create(string prenom ="", string nomFamille ="")
        {
            List<User> listeUser = new List<User>();
            if (prenom.Equals("") && nomFamille.Equals(""))
            {
            }
            else if (prenom.Equals(""))
            {
                string search = "*" + nomFamille + "*";

                listeUser = SearchDirectory(search, 1);

            }
            else if (nomFamille.Equals(""))
            {
                string search = "*" + prenom + "*";

                listeUser = SearchDirectory(search, 2);
            }
            else
            {
                string search = "*" + prenom + "*" + nomFamille + "*";

                listeUser = SearchDirectory(search, 3);
            }

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Create", listeUser);
            }
            return View(listeUser);
        }

我是使用Ajax的初学者，我迷失了为什么它不起作用。如果任何人有任何领导，将非常感激。

Answer 1

尝试为表单提交添加jQuery处理程序。

$('form').submit(function () {
    var givenName = $("#prenomBox").val();
    var nom = $("#nomBox").val();

    $.ajax({
        url: '@Url.Action("Create", "ManageUser")', //+ "?firstname=" + givenName + "&lastname=" + lastname,
        type: 'GET',
        data: { prenom: givenName, nomFamille: nom },
        success: function (result) {
            $('#liste-user').html(result);
        }
    });
});

Ajax加载提交表单不起作用

1 个答案: