در اینجا نحوه نمایش مقادیر سلول ردیف انتخابی GridView را در TextBoxهای خارج از GridView با استفاده از jQuery توضیح خواهم داد.
- به Start، All Programs بروید و Microsoft Visual Studio 2013 را باز کنید.
- حالا روی File کلیک کنید، سپس New Project را انتخاب کنید و روی Visual C# کلیک کنید. سپس ASP.NET Web Application، Empty را انتخاب کرده و OK را فشار دهید.
- نام و مکان برنامه وب را به دلخواه خود ارائه دهید. من نام برنامه وب خود را DisplaySelectedGridviewRowValuesInTextboxes گذاشتم.
- اکنون پروژه باز خواهد شد. روی نام برنامه وب کلیک راست کنید، یک آیتم جدید اضافه کنید و Web Form را انتخاب کنید، سپس بر روی افزودن کلیک کنید.
- کد زیر را بین تگ های <form> صفحه WebForm1.aspx اضافه کنید:
- <div align="center">
- <table border="1">
- <tr>
- <td>EmpId</td>
- <td>
- <asp:TextBox ID="txtEmpId" runat="server" />
- </td>
- </tr>
- <tr>
- <td>EmpName</td>
- <td>
- <asp:TextBox ID="txtEmpName" runat="server" />
- </td>
- </tr>
- <tr>
- <td>EmpSalary</td>
- <td>
- <asp:TextBox ID="txtEmpSalary" runat="server" />
- </td>
- </tr>
- <tr>
- <td>Department</td>
- <td>
- <asp:TextBox ID="txtDept" runat="server" />
- </td>
- </tr>
- </table>
- <br />
- <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="false">
- <Columns>
- <asp:BoundField DataField="EmpId" ItemStyle-CssClass="EmpId" HeaderText="EmpId"/>
- <asp:BoundField DataField="EmpName" ItemStyle-CssClass="EmpName" HeaderText="EmpName" />
- <asp:BoundField DataField="EmpSalary" ItemStyle-CssClass="EmpSalary" HeaderText="EmpSalary" />
- <asp:BoundField DataField="Dept" ItemStyle-CssClass="Dept" HeaderText="Department" />
- <asp:TemplateField>
- <ItemTemplate>
- <asp:LinkButton Text="Select" ID="lnkSelect" runat="server" />
- </ItemTemplate>
- </asp:TemplateField>
- </Columns>
- </asp:GridView>
- </div>
- کد زیر را به رویداد بارگذاری صفحه صفحه WebForm1.aspx.cs اضافه کنید.
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!this.IsPostBack)
- {
- DataTable dt = new DataTable();
- dt.Columns.Add("EmpId");
- dt.Columns.Add("EmpName");
- dt.Columns.Add("EmpSalary");
- dt.Columns.Add("Dept");
- dt.Rows.Add(1, "JACKSON", 75000, "RESEARCH");
- dt.Rows.Add(2, "JOHNSON", 18000, "ACCOUNTING");
- dt.Rows.Add(3, "GRANT", 32000, "SALES");
- dt.Rows.Add(4, "ADAMS", 34000, "OPERATIONS");
- GridView1.DataSource = dt;
- GridView1.DataBind();
- }
- }
- یک تگ <script> بین تگ های <head> صفحه WebForm1.aspx اضافه کنید. مانند قطعه کد زیر باید یک مرجع برای jQuery ارائه کنید.
- <head runat="server">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- </head>
- یک تگ <script> دیگر بین تگ های <head> اضافه کنید و کد زیر را بنویسید:
- <script type="text/javascript">
- $("[id*=lnkSelect]").live("click", function () {
- $("[id*=txtEmpId]").val($(".EmpId", $(this).closest("tr")).html());
- $("[id*=txtEmpName]").val($(".EmpName", $(this).closest("tr")).html());
- $("[id*=txtEmpSalary]").val($(".EmpSalary", $(this).closest("tr")).html());
- $("[id*=txtDept]").val($(".Dept", $(this).closest("tr")).html());
- return false;
- });
- </script>
- اکنون برنامه را اجرا کنید و می توانید آن را در مرورگر خود مشاهده کنید.
- اکنون من EmpId 3 را انتخاب می کنم، ببینید که مقادیر سلول ردیف Empid 3 در کادرهای متنی مربوطه پر می شود.