Question

我在mvc34 razor视图中遇到了提交按钮的问题。我在jQuery中动态添加了一行到webgrid，其中包含一个提交按钮，用于在db中插入行数据。我想验证行的文本框空弹出警报并停止操作。当我试着写这样的时候

$('#btnInsert').click(function()
{
 if ($('#tbStudentName').val() == '') {
               alert('Please enetre!');
                           return false;
            } 
});

此事件在jQuery中完全没有。我们可以像上面那样在jQuery中调用动态创建的提交按钮客户端点击事件吗？ 我写得像这样

function InsertClick(button) {
        if ($('#tbStudentName').val() == '') {
           alert('Please enetre!');
                       return false;
        }        
    }

但是控制器端FormAction方法仍在触发。任何人都能告诉我防止服务器端动作的解决方案吗？

Answer 1

您可以通过将事件绑定到表单本身来完成此操作。

$("form").submit(function(e) { e.PreventDefault(); return false; }

当然，您可以添加一些if语句，以防止仅在某些情况下使用。

Answer 2

或者您可以使用输入类型按钮，默认情况下不会导致表单提交，如果验证成功，则通过

提交表单

$(this).parents("form").submit();

以下是示例：

<script type="text/javascript">
    $(function () {
        $(".go").click(function () {
            var wrong = true; //fake data
            if (wrong) {
                alert("your value is wrong");
            } else {
                $(this).parents("form").submit();
            }
        });
    });
</script>

@using(Html.BeginForm())
{

    @Html.TextBoxFor(x=>x.CompanyName)
    @Html.ValidationMessageFor(x=>x.CompanyName)
    <br/>

    <input type="button" value="go" class="go" />
}

<强>更新

如果您要以动态方式添加按钮，则应使用jquery live事件Attach an event handler for all elements which match the current selector, now and in the future.

以下是示例：

<script type="text/javascript">
    $(function () {
        $(".go").live("click", function () {
            var wrong = true; //fake data
            if (wrong) {
                alert("your value is wrong");
            } else {
                $(this).parents("form").submit();
            }
        });

        $(".add").click(function () {
            $("form:first").append("<input type='button' value='go' class='go' />");
        });

    });
</script>

@using(Html.BeginForm())
{

    @Html.TextBoxFor(x=>x.CompanyName)
    @Html.ValidationMessageFor(x=>x.CompanyName)
    <br/>


}


<a class="add" href="#">add button dinamically</a>

Answer 3

我找到了像这样的解决方案

<input type="submit" value="Insert" onclick="return Validate(this);" />


function Validate(button){
if($('#tbemail').val()==''){
    alert('Can't be blank!');
    return 1==3;
}

}

我们怎样才能阻止MVC3中的“提交”按钮操作？

3 个答案: