javascript - 使用 AJAX 时表单数据未发布到 Controller

Question

好的，我的 View 中有这个表单:

<form id="MyForm">
<input type="text" name="myinput" />
<button type="submit" />
</form>

我的 View 顶部有以下 Javascript，它在页面加载时运行:

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#MyForm").submit(
                function () {
                    var url = "Home/TestAjax";

                    var dataToSend = $("#MyForm").serialize();
                    alert(dataToSend);

                    $.ajax
                    (
                        {
                            type: "POST",
                            url: url,
                            data: dataToSend,
                            success: function (data) {
                                alert(data);
                            }
                        }
                    );

                    return false;
                }
            );
        }
    );
</script>

正如警报框所验证的那样，表单正在正确地序列化为 ajax。这是我的 TestAjax Controller 方法:

[HttpPost]
public string TestAjax(string data)
{
    return !string.IsNullOrEmpty(data) ? "Success" : "Failure";
}

返回的值为失败，因为 AJAX 未被回发。我在这里做错了什么？

谢谢

Answer 1

您输入字段的名称是 myinput 而不是 data。因此，请确保您也一致地命名了您的操作的论点:

[HttpPost]
public ActionResult TestAjax(string myinput)
{
    return !string.IsNullOrEmpty(myinput) ? Content("Success") : Content("Failure");
}

当你使用 $("#MyForm").serialize() 这将返回 myinput=some_value 其中 some_value 显然是值用户已在此输入字段中输入。

如果您的表单中有 2 个输入字段:

<form id="MyForm">
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <button type="submit" />
</form>

你当然会写一个 View 模型:

public class MyViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

您的 Controller 操作将作为参数:

[HttpPost]
public ActionResult TestAjax(MyViewModel model)
{
    return !string.IsNullOrEmpty(model.Foo) ? Content("Success") : Content("Failure");
}

另请注意，在 ASP.NET MVC 中， Controller 操作应返回 ActionResults，而不是字符串或其他内容。