在没有模型的情况下在MVC 3中进行验证

时间:2012-06-15 15:58:14

标签: javascript asp.net-mvc c#-4.0 asp.net-mvc-4

我对mvc3中的验证有疑问。内置验证看起来很棒。但是,我必须在一个案例中使用javascript,导致它与外观和感觉不一致(警报窗口与漂亮的红色文本)。我们有一个表单,其中包含一些用于用户输入的字段。提交时,一些ajax代码会触发一个链接,该链接映射到一个控制器方法,该方法接受从表单提交的值并启动导致创建客户端数据库的进程。 问题是:对字段(长度,字符等)进行验证的最佳方法是什么,因为没有模型直接映射到该表单上的字段? 我的解决方案是编写一些javascript函数,但有更简洁的方法吗?

 <td>@Html.TextBox("NewClientId")</td>
...            

    <script language="javascript">
       function ValidateFieldLength(min, max, element) {
            var len = element.value.length;
            if (len < min || len > max)
                return false;
            else {
                return true;
            }
        }
        function createNewClient() {
            if (!ValidateFieldLength(3,3,document.getElementById('NewClientId'))) {
            alert("Invalid Client ID length");
            return;
        }
        $.ajax({
            url: '/api/Clients',
            type: 'PUT',
            data: JSON.stringify({
                ClientId: $('#NewClientId').val(),
                Name: $('#NewClientName').val()
            }),
            contentType: 'application/json; charset=utf-8',
            success: function (reponse) {
                //alert(reponse.data.model.Id);
                alert("Database created");
            },
            error: function (err) {
                alert(err);
            }
        });
    }

3 个答案:

答案 0 :(得分:14)

我将看到的另一个选项是手动将验证数据属性添加到html元素。通过这种方式,您可以避免在服务器端和客户端重复错误消息和其他属性。

对于前。

@Html.TextBox("NoOfJoinees", "", new 
{ 
   size = 5,  
   data_val_required="No. of joinees is required",
   data_val_number = "The field No. of joinees must be a number.",
   data_val_range = "No. of joinees should be minimum 2 and not more than 10",
   data_val_range_max="10",
   data_val_range_min="2"
})

在上面的文本框中,我添加了三种类型的验证:必需类型范围,这样可以轻松添加数据属性。微软发布的不显眼的验证库将负责其余的工作。

您应该从一个地方读取错误消息和其他常量。因此,当您在服务器端进行验证时,不需要复制它们。

答案 1 :(得分:2)

您可以使用jQuery.validate并使用一些内置的验证方法 jQuery.validate

虽然你的工作可能有些过分,但仍然需要你进行服务器端验证。

答案 2 :(得分:2)

您仍然可以使用视图模型来设置验证规则,然后使用一些不显眼的JavaScript来捕获表单提交以执行您的ajax帖子。

<强>视图模型

public class YouViewModel
{
    [DisplayName("Client name")]
    [Required()]
    public string NewClientName { get; set; }

    [DisplayName("Client id")]
    [StringLength(3, MinimumLength = 3, ErrorMessage = "{0} must be 3 characters")]
    public string NewClientId { get; set; }
}

<强>控制器

public ActionResult YourAction()
{
    return View() //Note that you don't even need to pass a view model to the view
}

查看

@model Namespace.YouViewModel

@using (Html.BeginForm())
{
    <div class="form-body">
        @Html.ValidationSummary()

        <div class="control-group">
            @Html.LabelFor(x => x.NewClientName )
            @Html.TextBoxFor(x => x.NewClientName , new { @class = "span3" })
        </div>

        <div class="control-group">
            @Html.LabelFor(x => x.NewClientId )
            @Html.PasswordFor(x => x.NewClientId , new { @class = "span3" })
        </div>
    </div>
}