0

我有一个 jquery 函数来检查UsernameTextbox我的视图中的有效数据。我想阻止用户单击Register按钮，直到该字段有效。

禁用按钮是最好的方法吗？我只想当值无效时，用户单击按钮只关注字段UsernameTextbox？

更新代码：

这是我的模型：

    [Required]
    [Remote("CheckUsername", "Account", ErrorMessage = "Username already exits.")]
    public string Username { get; set; }

和带有 GET 方法的控制器：

[HttpGet]
    public JsonResult CheckUsername(string userName)
    {
        var user = IUserRepo.GetUserByUrName(userName);
        bool isValid = true;
        if (user!=null)
        {
            isValid = false;
        }
        return Json(isValid, JsonRequestBehavior.AllowGet);
    }

在我看来：

 @using (Ajax.BeginForm("Register","Account",new {area = "Area"},null))
    {
        @Html.ValidationSummary(true) 
        <table>
            <tbody>
                <tr>
                    <td class="info_label">Tên đăng nhập</td>
                    <td>@Html.EditorFor(m => m.User.Username)
                    </td>
                    <td class="check_user">@Html.ValidationMessageFor(m => m.User.Username)</td>
                </tr>
                <tr> ........

为什么没有出现错误信息？我想在用户填写数据或离开像这个网站http://yame.vn/TaiKhoan/DangKy这样的文本框时中间有效。

4

3 回答 3

3

注意：下面提到的建议仅适用于 MVC3 及以上

Luffy，你可以去掉 Ajax Call 来检查 UserName 是否存在

我们怎样才能做到这一点？

模型

public class UserModel
{
    // Remote validation is new in MVC3. Although this will also generate AJAX
    // call but, you don't need to explicitly type the code for Ajax call to
    // check the User Existence. Remote Validation will take care of it.
    [Required]
    [Remote("CheckUsername", "Account", ErrorMessage = "User Already Exist")]
    public string UserName { get; set; }
}

控制器

[HttpGet]
public JsonResult CheckUsername(string MyProp)
{
    // Your Validation to check user goes here
    bool isValid = true;
    return Json(isValid, JsonRequestBehavior.AllowGet);
    //Note - This will be called whenever you post the form.
    //This function will execute on priority, after then the Index 
    //Post Action Method.
}

[HttpGet]
public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(UserModel model)
{
    // This action method will execute if the UserName does not exists 
    // in the DataBase
    return View(model);
}

看法

@using (Ajax.BeginForm("Action", "Controller", new { area = "Area" }, null))
{
    @Html.TextBoxFor(i => i.UserName);
    <input type="submit" name="Submit" value="Submit" />
    // Whenever you submit the form, the control will go directly to 
    // CheckUsername function. In case the UserName doesn't exists only 
    // then the Post action method will be executed.
}

脚本

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
于 2013-08-07T12:59:08.993 回答
0

尝试这个

function CheckUserNameExits() {
$("#User_Username").on("blur", function () {
    $("#User_Username").addClass("thinking");
    var username = $("#User_Username").val();
    if (username == "") {
        $(".check_user").html("Ba?n chua nhâ?p tên dang nhâ?p.");
        $("#User_Username").removeClass("thinking");
        $("#User_Username").removeClass("approved");
        $("#User_Username").addClass("denied");
        $("#User_Username").focus();
        $("#User_Username").select();
        return false;
    }
    $.ajax({
        url: "/Account/CheckUsername",
        data: { userName: username },
        dataType: "json",
        type: "POST",
        error: function () {
            return false;
        },
        success: function (data) {
            if (data) {
                $("#User_Username").removeClass("thinking");
                $("#User_Username").removeClass("denied");
                $("#User_Username").addClass("approved");
                $(".check_user").html("");
                //$("#createuser").prop("disabled", false);
                return true;
            }
            else {
                $("#User_Username").removeClass("thinking");
                $("#User_Username").removeClass("approved");
                $("#User_Username").addClass("denied");
                $(".check_user").html("Tên dang nhâ?p da~ duo?c du`ng, vui lo`ng cho?n tên kha´c.");
                $("#User_Username").focus();
                $("#User_Username").select();
                //$("#createuser").prop("disabled", true);
                return false;
            }
        }
    });
});
}
function CheckValidate()
{
    if (!CheckUserNameExits()){
        return false;
        }
    return true;
}


<input id="createuser" type="submit" value="Ðang ky´ ta`i khoa?n"  onclick="return CheckValidate();" />
于 2013-08-07T10:37:37.200 回答
0

使用 jQuert 启用/禁用按钮方法可能会更好。

Fistly 按钮被禁用：

$(document).ready(function(){
$( ".register" ).button("disabled");
});

比，如果你的函数返回真，启用按钮

function CheckUserNameExits() {

//*If your function is success
$( ".register" ).button( "enable" );

})
于 2013-08-07T16:40:47.960 回答