Question

我正在研究这个项目，并试图在不执行页面刷新的情况下调用控制器函数。我尝试设置一个ajax功能，但是没有运气。我已将相关脚本放在html和单独的jquery.js中，但无济于事。看起来好像表单提交完全不符合脚本。任何帮助将不胜感激！！表单位于cshtml文件中，控制器位于.cs中，脚本位于.js

中

有问题的表格：

<form id="tableForm"  action="@(Url.Action("AddToOrder", "Order"))" method="post">
                                    @{foreach (var item in (IList<Item>)ViewData["items"]){
                                    <input type="hidden" id="@("item_id_" + item.id)" name="@("item_id_" + item.id)" value="@item.id" />
                                    <tr>
                                        <td>@item.description</td>
                                        <td>@String.Format("{0:C}",item.price)</td>
                                        <td><input type="text" id="@("item_quantity_" + @item.id)" name="@("item_quantity_" + @item.id)" style="width: 50px;" value="0" /></td>
                                     </tr>
                                      }}
                                    <tr>
                                        <td><input class="submit" type="submit" value="Add item(s) to order" /></td>
                                    </tr>
                                </form>

有问题的剧本：

$('#tableForm').submit(function (e) {
e.preventDefault();
    $.ajax({
        type: "POST",
        cache: false,
        url: $(this).attr('action'),
        data: $(this).serialize(),
        succes: function (data) {
            alert(data);
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
});

重申一下，控制器和方法运行良好，但表单提交刷新了页面。

Answer 1

参考以下代码，在提交后调用preventdetfault

$('#tableForm').submit(function (e) {
    $.ajax({
        type: "POST",
        cache: false,
        url: $(this).attr('action'),
        data: $(this).serialize(),
        succes: function (data) {
            alert(data);
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    e.preventDefault();
    });

Answer 2

您的AJAX方法是否在页面提交时被调用。尝试添加警报以确认。您可能希望将ClientIdMOde =“static”添加到表单标记中，这样如果它在主页面中，则控件ID将是静态的，JS可以绑定到它。

可能是clientidmode会做的伎俩。如果不是，请告诉我

Answer 3

如果没有显示完整页面，我只能做出有根据的猜测：您已将.js文件包含在页面顶部或head元素中

这意味着以下代码不执行任何操作（返回空的jQuery对象）：

$('#tableForm')

这是因为代码在加载/定义后立即运行，并且它引用的form元素尚未加载。

简单的解决方案是：将您的JS代码放在body元素的末尾，或者将其包装在DOM-ready事件处理程序中。首选处理程序，因为您可以在页面上移动而不会失败：

e.g。

$(function(){
   // your jQuery code here can now use the DOM safely
});

这是一个快捷方式：

$(document).ready(function(){
   // your jQuery code here can now use the DOM safely
});

这意味着您的代码现在看起来像：

$(function(){
    $('#tableForm').submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            cache: false,
            url: $(this).attr('action'),
            data: $(this).serialize(),
            succes: function (data) {
                alert(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

如果它仍然失败，则代码前面的Javascript错误的常见原因（缺少jQuery库包括等）。您需要显示整个页面以澄清这一点。

ajax表单提交刷新页面

3 个答案: