2014-03-28 29 views
2

我使用客户端验证创建自己的数据注释,以检查所选文件是否被允许,但是我无法使其工作。客户端方法不会被激发。上传文件的自定义客户端验证

我没有收到任何JavaScript错误。

型号:

public class FotoAlbumModel 
{ 
    public int AlbumId { get; set; } 

    [Filters.Required] 
    [MaxLength(150, ErrorMessage = "Dit veld mag niet langer zijn dan 150 tekens.")] 
    public string Titel { get; set; } 

    [Filters.Required] 
    [MaxLength(150, ErrorMessage = "Dit veld mag niet langer zijn dan 2500 tekens.")] 
    public string Descriptie { get; set; } 

    [Filters.Required] 
    [MaxLength(250, ErrorMessage = "Dit veld mag niet langer zijn dan 250 tekens.")] 
    public string Keywoorden { get; set; } 

    [Filters.Required] 
    [LinkName] 
    public string Linknaam { get; set; } 

    public bool Status { get; set; } 

    public int AantalFotos { get; set; } 

    [Filters.FileExtensions(FileExtensions = ".bmp,.jpg,.png.gif,.jpeg")] 
    public HttpPostedFileBase[] Fotos { get; set; } 
} 

我的注解:

public class FileExtensionsAttribute : ValidationAttribute, IClientValidatable 
{ 
    public string FileExtensions { get; set; } 

    public override bool IsValid(object value) 
    { 
     string strValue = value == null ? "" : value.ToString(); 

     string[] arrayFileExtensions = FileExtensions.Split(','); 

     bool isMatch = arrayFileExtensions.Any(x => x.Contains(Path.GetExtension(strValue))); 

     if (!isMatch && ErrorMessage == null) 
     { 
      ErrorMessage = "De extensie van de bestand is niet toegestaan."; 
     } 
     return isMatch; 
    } 

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) 
    { 
     var rule = new ModelClientValidationRule 
     { 
      ErrorMessage = "De extensie van de bestand is niet toegestaan.", 
      ValidationType = "fileextension" 

     }; 
     rule.ValidationParameters.Add("allowedextensions", FileExtensions); 

     yield return rule; 
    } 
} 

我的自定义验证适配器:

$.validator.unobtrusive.adapters.addSingleVal("fileextension", "allowedextensions"); 

$.validator.addMethod("fileextension", function (value, element, allowedextensions) { 
alert('sds'); 
var arrayAllowedExtensions = allowedextensions.split(','); 
var fileExtension = value.split('.').pop(); 
$.each(arrayAllowedExtensions, function(extension) { 
    if (extension == fileExtension) { 
     return true; 
    } 
}); 
return false; 
}); 

HTML:

@Html.TextBoxFor(m=> m.Fotos, new {@type="file", @multiple="true", @onchange="makeFileList();", @id="filesToUpload", @style="display: none;"}) 
           <input type="button" value="Plaatje(s) selecteren" class="btn btn-green btn-gradient" onclick="document.getElementById('filesToUpload').click();" /> 
          <ul id="fileList"> 
           <li>No Files Selected</li> 
          </ul> 
          @Html.ValidationMessageFor(m => m.Fotos) 

MakeFileList JavaScript函数:

<script> 
    function makeFileList() { 
     var input = document.getElementById("filesToUpload"); 
     var ul = document.getElementById("fileList"); 
     while (ul.hasChildNodes()) { 
      ul.removeChild(ul.firstChild); 
     } 
     for (var i = 0; i < input.files.length; i++) { 
      var li = document.createElement("li"); 
      li.innerHTML = input.files[i].name; 
      ul.appendChild(li); 
     } 
     if(!ul.hasChildNodes()) { 
      var li = document.createElement("li"); 
      li.innerHTML = 'No Files Selected'; 
      ul.appendChild(li); 
     } 
    } 
</script> 

为什么该方法不被解雇了任何想法?

+0

您可以显示makeFileList()JS功能,并与数据注释模型属性吗? – markpsmith

+0

@markpsmith我编辑了我的评论。 – Jamie

+0

我看不到makeFileList()函数 – markpsmith

回答

1

我想这是因为你隐藏了FileExtensionsAttribute代码试图验证的控件。

看看使用Firebug你的页面,你可以看到隐藏的控制<input id="filesToUpload" type="file"有验证data-val-fileextension="De extensie van de bestand is niet toegestaan."

如果您通过删除@style="display: none;"属性修改文本@Html.TextBoxFor(m=> m.Fotos,你会看到你的验证工作。

不幸的是我不知道如何解决这个问题。有没有理由不能使用标准的文件上传控制?

+0

您是否尝试了标准文件上传按钮? [http://stackoverflow.com/questions/14401550/adding-style-to-file-upload-button-in-css](http://stackoverflow.com/questions/14401550/adding-style-to-file-上传按钮功能于CSS) – markpsmith

0

变化:@onchange="makeFileList();"@Html.TextBoxFor(,, 到:@onchange="makeFileList()"(末尾删除分号)

相关问题