如何使用AJAX或Jquery从View向Controller发送值?

时间:2018-02-05 04:18:24

标签: javascript jquery ajax asp.net-mvc

我的代码: 视图:

$("#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的值发送到控制器,但它在控制器中显示为null。 控制台会打印出#uname的值,但不会传递给控制器​​。任何人都可以帮我这个吗?

编辑:

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

1 个答案:

答案 0 :(得分: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");
        }
    });
})