c# - 数据未从 View (ajax)发送到 Controller (c#)

Question

我是 AJAX 新手，我不明白为什么我的数据没有发送到 Controller 。因此，在我的 View 上，我有两个输入表单和一个按钮:

HTML:

<input type="text" name="AddName">
<input type="text" name="AddEmail"> 
<button class="btn btn-mini btn-primary" type="button" name="add_btn" onclick="DbAdd()">Add</button>

我需要在单击“add_btn”按钮后从这两个输入中获取数据并将它们发送到 Controller 。

JavaScript:

<script type="text/javascript">
    function DbAdd()
    {
        // Get some values from elements on the page:
        var $form = $(this),
            addedName = $form.find("input[name='AddName']").val(),
            addedEmail = $form.find("input[name='AddEmail']").val();

        $("#UserTable").html("<div>Please Wait...</div>");
        $.ajax(
        {
            type: "POST",
            url: "Save",
            data:
                {
                    name: addedName, email: addedEmail,
                },
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
}

这是我的 Controller 的“保存”方法(我需要将从 ajax 获取的数据保存到我的数据库):

[HttpPost]
public ActionResult Save(User userinfo)
{
    string message = "";

    using (var uc = new UserContext())
    {
        uc.UserList.Add(userinfo);
        uc.SaveChanges();
        message = "Successfully Saved!";
    }
    
    if (Request.IsAjaxRequest())
    {
        return new JsonResult { Data = message };
    }
    else
    {
        ViewBag.Message = message;
        return View(userinfo);
    }
} 

问题是，当我在 Controller 的方法中设置断点时，我不接收来自 ajax 的数据，仅接收 null 的数据。所以我向数据库添加一条空记录。有什么建议吗？

Answer 1

看起来像 $form.find("input[name='AddName']").val() 和 $form.find("input[name='AddEmail'] ").val() 都返回 null。您应该使用 $("input[name='AddName']").val() 和 $("input[name='AddEmail']").val() 代替。将 DbAdd() 的定义更改为以下

<script type="text/javascript">
    function DbAdd()
    {
        // Get some values from elements on the page:
        var addedName = $("input[name='AddName']").val(),
            addedEmail = $("input[name='AddEmail']").val();

        var user = { Name: addedName, Email: addedEmail };

        $("#UserTable").html("<div>Please Wait...</div>");
        $.ajax(
        {
            type: "POST",
            url: "Save",
            data: JSON.stringify({ userinfo: user }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }
</script>