验证网格视图中的文件输入控件答案

【问题标题】：Validate File input controls inside Grid view验证网格视图中的文件输入控件
【发布时间】：2014-04-03 21:14:42
【问题描述】：

我有一个 GridView 控件，里面有一些 Fileupload 控件（控件数量不同），对于文件上传，我在 GridView 中有带有文件上传控件的按钮，用户上传文件后，他单击 GridView 外部的完成。我需要在单击完成时应用验证，用户必须在单击完成之前上传所有文件。 GridView在WizardControl里面，Finish Button是Wizard的Finsihed按钮

<asp:GridView ID="Grid1" runat="server" AutoGenerateColumns="false" OnRowCommand="Grid1_RowCommand" CssClass="table">
    <Columns>
        <asp:TemplateField HeaderText="Data" ItemStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <div class="col-5" id="statdiv">
                    <asp:Label ID="lbl1" runat="server" Text="Statement" CssClass="fieldheadingStyle"></asp:Label>
                    <asp:FileUpload ID="filestatement" runat="server" Width="98%" CssClass="filestat" />
                    <asp:Label ID="lblstatement" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "StatementFile") %>' CssClass="lblstat"></asp:Label>
                </div>
                <div class="col-5" id="courtdiv">
                    <asp:Label ID="Label1" runat="server" Text="Document" CssClass="fieldheadingStyle"></asp:Label>
                    <asp:FileUpload ID="doc" runat="server" Width="98%" CssClass="filedoc" />
                    <asp:Label ID="lblcourtdoc" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "DocumentFile") %>' CssClass="lbldoc"></asp:Label>
                </div>
                <div class="col-2">
                    <asp:Button ID="btnuploadfiles" runat="server" CommandName="uploadfiles" Text="Upload" />
                </div>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

如何在单击“完成”时验证所有文件控件？

这是我在向导控件中的完成按钮

<FinishNavigationTemplate>
    <table class="WizardButtonRow" cellspacing="0">
        <tr>
            <td align="left">
                &nbsp;
            </td>
            <td align="right">
                <asp:Button ID="btnFinish" runat="server" Text="Finish" CausesValidation="true" CommandName="MoveComplete" />
            </td>
        </tr>
    </table>
</FinishNavigationTemplate>

我试过这个，但它说 btnFinish not found

   $("#<%=btnFinish.ClientID%>").click(function(){
});

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

您拥有的复杂性是wizardcontrol。它只使客户端可以使用页面的一部分，因此 JS 只能与这个特定的可见部分进行通信。一种方法是使用基于 JS 的向导语法，一次只显示一个部分。您可以对每个部分使用 div 并隐藏不活动的部分。这将使 JS 可以访问所有元素，因为它们仍在 DOM 中。

此外，请注意在浏览器中查看页面后，为文件上传控件生成的 html 标记很重要。这将有助于理解您的页面呈现，并有助于了解用于每个控件的 id 的顺序，因此您可以使用正确的 id 并选择每个并检查它是否有文件。

如果您使用的是 .NET framework 4.0 (vs2010) 及更高版本，您可以使用 asp.net 控制标签设置 clientidmode=static。这将确保您指定的 id 是 html 的呈现 id。有了这个，你可以选择 btnfinish

  $('#btnfinish').click(function(){

   });

或者，使用 JQuery，您可以为 gridview 模板中的文件上传（仅）设置相同的 cssclass。完成此操作后，您可以选择该类的所有元素。这将返回文件上传控件的集合，并且可以使用 Jquery 中的“每个”函数进行循环。

 $('.fileuploadClass').each(function(){ //cycle through all file upload with specified cssclass
   if ($(this).val()==''){ //check of it has a file
         alert('select file');
         return;
      }
 });

【讨论】：