جستجو و معتبر سازی کنترل TextBox و DropDownList در سطرهای GridView با استفاده از JQuery و JavaScript

سه شنبه 11 فروردین 1394

در این مقاله نحوه جستجو , دسترسی , و معتبر ساختن کنترل TextBox و DropDownList در سطرهای مربوط به GridView با استفاده از JQuery و JavaScript را شرح خواهیم داد

جستجو و معتبر سازی کنترل TextBox و DropDownList در سطرهای GridView با استفاده از JQuery و JavaScript

برای معتبر سازی TextBox و DropDownList مطابق مراحل زیر عمل میکنیم :

تگ مربوط به HTML که شامل یک کنترل GridView حاوی سه ستون میباشد را به صفحه اضافه می کنیم :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
<Columns>
    <asp:TemplateField HeaderText="Name" ItemStyle-Width="150">
        <ItemTemplate>
            <%# Eval("Name") %>
        </ItemTemplate>
        <EditItemTemplate>
            <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' />
        </EditItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Country" ItemStyle-Width="150">
        <ItemTemplate>
            <%# Eval("Country") %>
        </ItemTemplate>
        <EditItemTemplate>
            <asp:DropDownList ID="ddlCountries" runat="server">
                <asp:ListItem Text="Please select" Value="" />
                <asp:ListItem Text="United States" Value="United States" />
                <asp:ListItem Text="India" Value="India" />
                <asp:ListItem Text="France" Value="France" />
                <asp:ListItem Text="Russia" Value="Russia" />
            </asp:DropDownList>
        </EditItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
        </ItemTemplate>
        <EditItemTemplate>
            <asp:LinkButton ID = "lnkUpdate" Text="Update" runat="server" OnClick="OnUpdate" />
            <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
        </EditItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

 

برای ویرایش و به روز رسانی سطر های موجود در گریدویو از ViewState استفاده کرده ایم .سپس با استفاده از اسرکیپت زیر مقادیر داخل TextBox و DropDownList را اعتبار سنجی میکنیم .


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=GridView1] [id*=lnkUpdate]").click(function () {
        //Find the GridView Row using the LinkButton reference.
        var row = $(this).closest("tr");
 
        //Find the TextBox control.
        var txtName = row.find("[id*=txtName]");
 
        //Find the DropDownList control.
        var ddlCountries = row.find("[id*=ddlCountries]");
 
        var message = "";
 
        //Validate the TextBox control.
        if ($.trim(txtName.val()) == "") {
            message += "Please enter Name.\n";
        }
 
        //Validate the DropDownList control.
        if (ddlCountries.val() == "") {
            message += "Please select Country.";
        }
 
        //Display error message.
        if (message != "") {
            alert(message);
            return false;
        }
        return true;
    });
});
</script>

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید