توضیحات و دانلود

اضافه کردن رشته های پویا در کنترل GridView با TextBoxes در ASP.Net
0 0
اضافه کردن رشته های پویا در کنترل GridView با TextBoxes در ASP.Net

در این مقاله در مورد چگونگی ایجاد یک ردیف در GridView با TextBoxes در هنگام کلیک بر دکمه ای است که در داخل پاورقی GridView قرار دارد نشان می دهد.

برای شروع، کنترل GridView را از Toolbox Visual Studio میگیریم و آن را در فرم وب قرار می دهیم.

<asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false">

        <Columns>

        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

        <asp:TemplateField HeaderText="Header 1">

            <ItemTemplate>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Header 2">

            <ItemTemplate>

                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Header 3">

            <ItemTemplate>

                 <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

            </ItemTemplate>

            <FooterStyle HorizontalAlign="Right" />

            <FooterTemplate>

             <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" />

            </FooterTemplate>

        </asp:TemplateField>

        </Columns>

</asp:gridview>

از آنجا که این نسخه ی نمایشی  برای تولید ردیف TextBox در GridView است، پس ما برخی از ستون های فیلد الگو را تنظیم می کنیم به طوری که GridView به طور خودکار TextBox ها را هنگام اضافه شدن یک ردیف جدید ایجاد کند.

همانطور که می بینید، یک ستون BoundField را برای نمایش شماره ردیف تنظیم کرده ایم و سه ستون TemplateField را در Grid تنظیم  و هر ستون یک TextBox Control اضافه کرده است.  همچنین  یک دکمه کنترل را در FooterTemplate در آخرین ستون GridView اضافه می کنیم .

توجه:

از آنجایی که ما یک کنترل در پایین صفحه GridView اضافه می کنیم، پس مطمئن شوید که ShowFooter را به TRUE در GridView تنظیم کنید.

حالا اجازه دهید که کد پشت فرم وب تغییر کند.

همانطور که می دانید، کنترل GridView زمانی که هیچ اطلاعات مرتبط با آن وجود نداشته باشد در صفحه نمایش داده نمی شود. بنابراین اولین چیزی که در اینجا نیاز داریم این است که داده های اولیه را در کنترل GridView تنظیم کنیم. برای انجام این کار می توان از DataTable برای اتصال GridView استفاده کرد.

    private void SetInitialRow()

    {

        DataTable dt = new DataTable();

        DataRow dr = null;

        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

        dt.Columns.Add(new DataColumn("Column1", typeof(string)));

        dt.Columns.Add(new DataColumn("Column2", typeof(string)));

        dt.Columns.Add(new DataColumn("Column3", typeof(string)));

        dr = dt.NewRow();

        dr["RowNumber"] = 1;

        dr["Column1"] = string.Empty;

        dr["Column2"] = string.Empty;

        dr["Column3"] = string.Empty;

        dt.Rows.Add(dr);

        //dr = dt.NewRow();

 

        //Store the DataTable in ViewState

        ViewState["CurrentTable"] = dt;

 

        Gridview1.DataSource = dt;

        Gridview1.DataBind();

    }

همانطور که می بینید، چهار ستون را در DataTable به نام RowNumber، Column1، Column2 و Column3 تعریف می کنیم. ستون RowNumber به عنوان کلید برای تولید ردیف در GridView است. برای ستون های 1، 2 و 3،   مقدار GridView برای یک مقدار خالی اختصاص داده شد.  همچنین DataTable را در ViewState ذخیره می کنیم تا بتوانیم داده های فعلی مربوط به DataTable را بعدا پس از تأیید بررسی کنیم.

اکنون اجازه دهید در روش بالا با Page_Load ارتباط بگیریم:

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            SetInitialRow(); 

        }

    }

 زمان اجرای کد بالا  این خروجی را به ما می دهد:

اکنون برای ایجاد ردیف ها هنگام کلیک کردن روی دکمه، این روش را ایجاد کنید.

    private void AddNewRowToGrid()

    {

        int rowIndex = 0;

 

        if (ViewState["CurrentTable"] != null)

        {

            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];

            DataRow drCurrentRow = null;

            if (dtCurrentTable.Rows.Count > 0)

            {

                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)

                {

                    //extract the TextBox values

                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");

                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");

                    TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");

 

                    drCurrentRow = dtCurrentTable.NewRow();

                    drCurrentRow["RowNumber"] = i + 1;

 

                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;

                    dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;

                    dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;

 

                    rowIndex++;

                }

                dtCurrentTable.Rows.Add(drCurrentRow);

                ViewState["CurrentTable"] = dtCurrentTable;

 

                Gridview1.DataSource = dtCurrentTable;

                Gridview1.DataBind();

            }

        }

        else

        {

            Response.Write("ViewState is null");

        }

 

        //Set Previous Data on Postbacks

        SetPreviousData();

    }

به طور خلاصه، کد بالا داده های قبلی ذخیره شده از ViewState را می گیرد و اطلاعات ذخیره شده از آن را به DataTable می دهد تا بتوانیم یک ردیف جدید بر اساس مقدار وارد شده از TextBox اضافه کنیم.

همچنین روش را در بخش پایین SetPreviousData می نامیم.  در زیر بلوک های کد به این روش ایجاد شده است :

    private void SetPreviousData()

    {

        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)

        {

            DataTable dt = (DataTable)ViewState["CurrentTable"];

            if (dt.Rows.Count > 0)

            {

                for (int i = 0; i < dt.Rows.Count; i++)

                {

                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");

                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");

                    TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");

 

                    box1.Text = dt.Rows[i]["Column1"].ToString();

                    box2.Text = dt.Rows[i]["Column2"].ToString();

                    box3.Text = dt.Rows[i]["Column3"].ToString();

 

                    rowIndex++;

                }

            }

        }

    }

 اکنون، از آنجا که همه روش ها تنظیم شده است، ما می توانیم  در رویداد Button Click از دکمه ارتباط بگیریم.

 

  protected void ButtonAdd_Click(object sender, EventArgs e)

  {

        AddNewRowToGrid();

  }

همانطور که می بینید کد بالا بسیار مستقیم  است. اجرای کد بالا به ما این خروجی  را می دهد:


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :