如何使用 AJAX 或 Jquery 从 View 向 Controller 发送值？答案

【问题标题】：How to send a value to Controller from View using AJAX or Jquery?如何使用 AJAX 或 Jquery 从 View 向 Controller 发送值？
【发布时间】：2018-02-05 04:18:24
【问题描述】：

我的代码：查看：

$("#btn").on("click", function () {

//It was $("#uname").on("blur", function () { before edit

    var choiceId = $('#uname').val();
    var JSobj = {
        uname:choiceId
    };
    console.log(JSobj.uname + " Null");
        $.ajax({
            url: '/Home/CheckUserName',
            contentType: 'application/json',
            data: JSON.stringify(JSobj),
            type: "post",
            cache: false,
            success: function (response) {
            var str = JSON.stringify(response);
            console.log(str);
            if (str == "true") {
                $("#usermsg").val("You are good to go");
                $("#usermsg").attr("color", "green");
            }
            else
                alert("Failure");
        },
        error: function (response) {
            alert("You should give up coding");
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div>

        @using(Html.BeginForm("Registration","Home"))
        {
                @Html.DisplayNameFor(Model => Model.UserName);
                @Html.TextBoxFor(Model => Model.UserName, new { @id = "uname" });
                @Html.ValidationMessageFor(Model => Model.UserName, "", new { @class = "text-danger", @id="usermsg" }) <br/>
                @Html.DisplayNameFor(Model => Model.UserPassword);
                @Html.TextBoxFor(Model=>Model.UserPassword);
                @Html.ValidationMessageFor(model => Model.UserPassword, "", new { @class = "text-danger" }) <br/>
        <div id="registration">
                @Html.DisplayNameFor(Model=>Model.UserData.Fname);
                @Html.TextBoxFor(Model => Model.UserData.Fname);

               <!--Added button here-->

                <input type="button" id="btn" value="Send" />

            </div>

        }

还有我的控制器：

//[HttpPost]
public JsonResult CheckUserName(string uname)
{
    bool flag;
    string name = uname;
    using (var context = new LoginEntities1())
    {
        LoginDetail detail = new LoginDetail();
        try
        {
            //var data = context.LoginDetails.ToList().Where(m => m.UserName == uname);
            flag = false;
        }
        catch(Exception e)
        {
            flag = true;
        }
    }
        return Json(flag);
}

我已经尝试了所有排列和组合以将#uname 的值发送到控制器，但它在控制器中为空。控制台会打印出#uname 的值，但它不会传递给控制器。谁能帮我解决这个问题？

编辑：

我观察到一种奇怪的行为。在我在提交按钮上添加了点击事件后，代替了模糊。即使我没有点击按钮，控制器仍在 on blur 事件中被调用。

【问题讨论】：

您在浏览器控制台中遇到什么错误？（请注意，您不需要 contentType: 'application/json', 选项 - 它可以只是 data: JSobj,）
无论如何，看起来您应该为此使用 [Remote] 属性 - How to: Implement Remote Validation in ASP.NET MVC
@StephenMuecke 我只想学习 AJAX，这就是我这样做的原因。控制台上的零错误。它只是按预期打印用户名（输入）+ Null。谢谢。
console.log 的外观如何？
当我输入“John”作为用户名时，它显示“John NULL”。然而，在控制器中它说， uname 变量的空指针异常。 @Se0ng11

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

你可以试试这个，

 $("#btn").on("click", function () {
        $.ajax({
            url: '/Home/CheckUserName?uname='+$('#uname').val(),                  
            type: "post",
            cache: false,
            success: function (response) {
            var str = response;
            console.log(str);
            if (str == "true") {
                $("#usermsg").val("You are good to go");
                $("#usermsg").attr("color", "green");
            }
            else
                alert("Failure");
        },
        error: function (response) {
            alert("You should give up coding");
        }
    });
})

【讨论】：