使用c＃ASP.NET编辑图像并从GridView中删除行

Question

I need to Edit and Delete Row of GridView using C# ASP.NET .

I tried once and able to fill the data in TextBox after click on Edit Button ,But I have also one Image to Edit and what I need is when user will click on Edit Image , The Image will also Display in proper place to Edit .In case of Delete part I have Image in Anchor Tag and I need which event I should pass from GridView and define in code behind page so that I can do the operation.

faq.aspx:

    <div class="col-md-6">
    <label for="question" accesskey="T"><span class="required">*</span> Question</label>
    <asp:TextBox ID="TextBox1" runat="server"  size="30" value="" name="question" ></asp:TextBox>
    <div id="noty" style="display:none;" runat="server"></div>
    <label for="answer" accesskey="A"><span class="required">*</span> Answer</label>
    <asp:TextBox ID="TextBox2" runat="server"  size="30" value="" name="answer" ></asp:TextBox>
    <div id="Div1" style="display:none;" runat="server"></div>
</div>
<div class="col-md-6 bannerimagefile">
    <label for="insertimage" accesskey="B"><span class="required">*</span> Insert Image</label>
    <asp:FileUpload runat="server" class="filestyle" data-size="lg" name="insertimage" id="FileUpload1" onchange="previewFile()" />
    <label for="bannerimage" accesskey="V"><span class="required">*</span> View Image</label>
    <div style="padding-bottom:10px;">
        <asp:Image ID="Image3" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;"   />
    </div>
    <div class="clear"></div>
    <asp:Button ID="Button1" runat="server" Text="Submit" class="submit" 
        onclick="Button1_Click" />
    </div>
</div>
</div>

</div>
<!--end_1st_faq_add_div-->
<!--2nd_list_banner_view_div-->
<div class="widget-area">
    <h2 class="widget-title"><strong>FAQ List</strong></h2><asp:HiddenField ID="HiddenField1"  runat="server" />
    <div class="streaming-table margin-top-zero padding-top-zero">
        <div class="table-responsive">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
                Width="100%" CssClass="table table-striped table-bordered margin-top-zero" 
                onselectedindexchanged="GridView1_SelectedIndexChanged">
            <Columns>
               <asp:TemplateField HeaderText="Sl No">
               <ItemTemplate>
               <asp:Label ID="faqid" runat="server" Text='<%#Eval("FAQ_ID") %>'></asp:Label>
               </ItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Question" >
               <ItemTemplate>
               <asp:Label ID="question" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
               </ItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Answer" >
               <ItemTemplate>
               <asp:Label ID="answer" runat="server" Text='<%#Eval("Answer") %>'></asp:Label>
               </ItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Image" >
               <ItemTemplate>
               <asp:Image ID="Image1" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" ImageUrl='<%# "/Upload/" + Convert.ToString(Eval("Image")) %>'  /> 
               </ItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Action" >
               <ItemTemplate>
               <a href="" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="Edit" id="editbtn" ><i class="fa fa-edit"></i></a>
<a href=" " data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete"><i class="fa fa-times"></i>
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
    </asp:GridView>
</div>

faq.aspx.cs:

protected void GridView1_SelectedIndexChanged(object sender, GridViewSelectEventArgs e)
{
    int index = Convert.ToInt32(e.NewSelectedIndex);
    TextBox1.Text = GridView1.Rows[index].Cells[1].Text;
    TextBox2.Text = GridView1.Rows[index].Cells[2].Text;
    HiddenField1.Value = GridView1.Rows[index].Cells[0].Text;
    Button1.Text = "Update";
}

Please help me to resolve this issue.

Answer 1

I see that you have only item temples in grid view. Hence I'm going to tell you two ways to do this: 1) Add edit template in grid view and handle the OnRowEditing event of grid view. 2) Add a hyperlink with key of row and link to another page where you can design the editor like you have done in this page by pre-populating the data using the key(primary key)

Answer 2

it is better that you use Modern data control like 'entitydataSource' or 'linqdateSource' or 'sqlDataSource' and bind your gridview by them . using 'itemtemplate' for all rows is not a good way , instead fill you grid with 'dataSource' and use 'itemTemplate' for delete or Edit Button . send button name As commandName and rowID As commandArgument to gridViewItemCommand event in code behind.

in code behindin in GridviewItemcommand_Event with switch statement loop through itemCommands like this :

int itemID = int.parse(e.commandArgument)
switch(e.commandName)
   { 
      case 'DoEdite' :{//some Code 
                       Viewstate["ID"] = itemID;
                       break;}

      case 'DoDelete' :{//some Code
                        break;}
   }

you have the itemID(e.commandeArgument) and know which button clicked(e.commandName) .so you can do what you want. In edit Mode when you send data to textBoxes use viewstate or other collection to hold your dataID because of after Edit, for Update edited date you need it,