文本框在MVC.NET中丢失了焦点事件

时间:2016-04-08 10:07:36

标签: javascript asp.net-mvc

我正在开发一个MVC项目,我在文本框丢失焦点事件方面遇到的问题很少。 首先我有一个表单有四个文本框字段,在第一个文本框中我们需要传递员工的姓名,但我们已经调用了这个文本框丢失的焦点事件来填充员工的所有记录,如果它已经在数据库中但我有问题当我在文本框中传递名称并单击"保存"按钮然后调用第一个文本框事件来检查数据库中是否存在记录然后我需要再次单击按钮以保存我的记录(如果不存在)。 因此,在这种情况下,我必须单击两次按钮。

请帮助您的想法我不希望用户点击两次。

由于

1 个答案:

答案 0 :(得分:0)

我想说,你可以使用Jquery ajax来完成这项工作。 当文本框焦点丢失时,将对控制器操作进行ajax get调用,该操作将检查数据库并返回用户名是否已存在的状态。

Jquery的:

    $(document).ready(function () {
$("#UserName").focusout(function () {
    var username = $("#UserName").val();
    var fullurl = '/User/UserNameCheck?username=' + username;
    if (username.length > 0) {
        $.ajax({
            url: fullurl,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            //data: username,
            success: function (data) {
                if (data == 'UserNotPresent') {
                    $("#username_NotPresent_lbl").show();
                }
                else if (data == 'UserPresent') {
                    $("#username_Present_lbl").show();
                }
                else {
                    $("#failed_check_lbl").show();
                }
            },
            error: function (e) {
                $("#failed_check_lbl").show();
            }
        });
    }
});

$("#UserName").focus(function () {
    $("#username_NotPresent_lbl").hide();
    $("#username_Present_lbl").hide();
    $('#failed_check_lbl').hide();
}); });

控制器操作:

[AllowAnonymous]
    [HttpGet]
    public JsonResult UserNameCheck(string username)
    {            
        Users loggedInUser = db.Users.FirstOrDefault(x => x.UserName == username);
        if (loggedInUser != null)
        {
            return Json("UserPresent", JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json("UserNotPresent", JsonRequestBehavior.AllowGet);
        }
    }

查看:

<div class="form-group">
        @Html.LabelFor(model => model.UserName, new {@class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
            @Html.Label("Sorry this user name is already in use", new {id="username_Present_lbl", @class ="ErrorLbl"})
            @Html.Label("User name available for use", new {id="username_NotPresent_lbl", @class ="SuccesLbl"})
            @Html.Label("Failed to validate the user name", new {id="failed_check_lbl", @class ="FailedCheckLbl"})                
        </div>
    </div>