Send (Pass) GridView Row details to UserControl (ASCX) using jQuery in ASP.Net

Question

test0101

SOLVED CLOSED ACTIVE ANSWERED
User: test0101
Posted: on Mar 19, 2020 05:14 AM
Forum: Data Controls
Answer: 1
Views: 5406

in listTab, when click Edit button (in gridview row), will call addnew form with valued and active editTab, when click Update_click button in form addnew will update to database and active listTab with valued just update.

Please help me by code.

this is my code:

1- Main.master

<%@  Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="abc.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="main" runat="server">
    <div class="navbar navbar-default" style="font-family: Arial; background-color: #0066CC">
        <div class="container-fluid" style="font-family: Arial">
            <div class="navbar-header" style="font-family: Arial">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">ASP</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="font-family: Arial;
                background-color: #1A8CFF">
                <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                    IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
                </asp:Menu>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
            return false;
        };
        $(function () {
            $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
            $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
            $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
            $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
            $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
            $("a.selected").closest("li").addClass("active");
            $("a.selected").closest(".dropdown-toggle").addClass("active");
            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');
            });
        });
    </script>
    <hr />
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

2. Main.master.cs

public partial class Main : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = this.GetData(0);
            PopulateMenu(dt, 0, null);
        }
    }
    private DataTable GetData(int parentMenuId)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { 
            new DataColumn("ParentMenuId"), 
            new DataColumn("MenuId"), 
            new DataColumn("Title"), 
            new DataColumn("Url") });
        dt.Rows.Add(0, 1, "Home", "~/frmTab.aspx");
        // main tab            
        dt.Rows.Add(0, 2, "Services", "javascript:;");
        dt.Rows.Add(0, 3, "About", "javascript:;");
        dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
        dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
        dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
        dt.Rows.Add(3, 7, "About1", "javascript:;");
        dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
        dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
        dt.Rows.Add(7, 10, "About12", "~/About12.aspx");

        DataTable dtFinal = dt.Clone();
        DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
        if (dr.Length > 0)
        {
            dtFinal = dr.CopyToDataTable();
        }
        return dtFinal;
    }
    private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
    {
        string currentPage = Path.GetFileName(Request.Url.AbsolutePath); foreach (DataRow row in dt.Rows)
        {
            MenuItem menuItem = new MenuItem
            {
                Value = row["MenuId"].ToString(),
                Text = row["Title"].ToString(),
                NavigateUrl = row["Url"].ToString(),
                Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
            }; if (parentMenuId == 0)
            {
                Menu1.Items.Add(menuItem);
                DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
            }
            else
            {
                parentMenuItem.ChildItems.Add(menuItem);
                if (parentMenuId > 0)
                {
                    DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                    PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                }
            }
        }
    }
}

3- frmTab.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None"
    AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="abc.frmTab" %>

<%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list" %>
<%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
        <div id="dvTab">
            <ul class="nav nav-tabs" role="tablist" style="font-weight: bold">
                <li runat="server" id="idListtab"><a href="#Listtab" style="outline: none" aria-controls="Listtab"
                    role="tab" data-toggle="tab">List</a></li>
                <li runat="server" id="idAddnew"><a href="#Addnew" style="outline: none" aria-controls="Addnew"
                    role="tab" data-toggle="tab">Add new</a></li>
                <li runat="server" id="idEdittab"><a href="#Edittab" style="outline: none" aria-controls="Edittab"
                    role="tab" data-toggle="tab">Edit</a></li>
            </ul>
            <div class="tab-content" style="padding-top: 5px">
                <!-- <div role="tabpanel" class="tab-pane" id="Listtab"> -->
                <div role="tabpanel" class="tab-pane active" id="Listtab">
                    <uc:list ID="mylist" runat="server" />
                </div>
                <div role="tabpanel" class="tab-pane active" id="Addnew">
                    <uc:addnew ID="myaddnew" runat="server" />
                </div>
                <div role="tabpanel" class="tab-pane" id="Edittab">
                    <uc:addnew ID="myaddnew" runat="server" />
                </div>
            </div>
        </div>
    </div>
    <!-- Panel  End-->
    <asp:HiddenField ID="HiddenTab" runat="server" />
    <script type="text/javascript">
        function Tabs() {
            var Tab = $("#<%=HiddenTab.ClientID%>");
            var tabId = Tab.val() != "" ? Tab.val() : "Listtab";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                Tab.val($(this).attr("href").substring(1));
                //replace("#", ""));                     
                //substring(1));                 
            });
        }
        function pageLoad() {
            Tabs();
        }         
    </script>
</asp:Content>

4- frmTab.cs

using System;
namespace abc
{
    public partial class frmtab : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            HiddenTab.Value = "Listtab";
            idEdittab.Visible = false;
        }
    }
}

5- frmAddnew.ascx

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None"
    AutoEventWireup="true" CodeBehind="frmaddnew.aspx.cs" Inherits="abc.frmaddnew" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="table-responsive">
        <table style="width: auto" class="table table-striped">
            <tr>
                <td class="td-align-Right">
                    <asp:Label ID="Label1" CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                </td>
                <td class="td-align-left">
                    <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName"
                        ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="td-align-Right">
                    <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                </td>
                <td class="td-align-left">
                    <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile"
                        ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile"
                        ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}"
                        ValidationGroup="reg"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="td-align-Right">
                    <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                </td>
                <td class="td-align-left">
                    <asp:TextBox ID="txtEmail" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail"
                        ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail"
                        ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                        ValidationGroup="reg"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="td-align-Right">
                    &nbsp;
                </td>
                <td>
                    <asp:Button ID="Save" CssClass="btn-danger btn-sm" runat="server" Text="Save add new"
                        OnClick="Save_Click" ValidationGroup="reg" />&nbsp;
                    <asp:Button ID="Update" CssClass="btn-danger btn-sm" runat="server" Text="save update"
                        OnClick="Update_Click" ValidationGroup="reg" />&nbsp;
                    <asp:Button ID="Reset" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Reset_Click"
                        CausesValidation="False" />&nbsp;
                </td>
            </tr>
        </table>
    </div>
</asp:Content>

6- frmAddnew.cs

using System;
namespace abc
{
    public partial class frmAddnew : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Save_Click(object sender, EventArgs e)
        {
            try
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                cmd.ExecuteNonQuery();
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                GridView1.DataSource = null;
                GridView1.DataBind();
                // i do not HOW TO ACTIVE TAB AND OPEN                
                HiddenTab.Value = "Addnew"; // ??????            
            }
            catch (Exception ex)
            {
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
            }
            finally
            {
                con.Close();
            }
        }
        protected void Update_click(object sender, EventArgs e)
        {
            try
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("update register set name= '" + txtName.Text + "', mobile='" + txtMobile.Text + "', email='" + txtEmail.Text + "'", con);
                cmd.ExecuteNonQuery();
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('upadate Sucessfully')", true);
                GridView1.DataSource = null;
                GridView1.DataBind();
                // i do not HOW TO ACTIVE TAB AND OPEN               
                HiddenTab.Value = "Listtab"; // ??????            
            }
            catch (Exception ex)
            {
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
            }
            finally
            {
                con.Close();
            }
        }
        protected void Reset_Click(object sender, EventArgs e)
        {
            txtName.Text = string.Empty; txtMobile.Text = "";
            txtEmail.Text = "";
            txtName.Focus(); HiddenTab.Value = "Addnew";
        }
    }
}

7- frmList.ascx

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None"
    AutoEventWireup="true" CodeBehind="frmList.aspx.cs" Inherits="abc.frmList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="table-responsive">
        <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr"
            CssClass="SGrid" runat="server" AutoGenerateColumns="False">
            <AlternatingRowStyle CssClass="alt" />
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Mobile Number">
                    <ItemTemplate>
                        <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Email Id">
                    <ItemTemplate>
                        <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Action">
                    <ItemTemplate>
                        <asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />
                        <asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerStyle CssClass="pgr" />
        </asp:GridView>
        <input type="hidden" runat="server" id="hiddEmail" />
    </div>
</asp:Content>

8- frmList.cs

using System;
namespace abc
{
    public partial class frmlist : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) { GridView(); }
        protected void bttEdit_Click(object sender, EventArgs e)
        {           // I DON NOT KNOW HOW TO ACTIVE EDIT TAB AND CODE HERE FOR GET ALL INFOR FROM ONE GRIDVIEW ROW AND DISPLAY ON FORM ADD NEW TO UPDATE THIS RECORD
            HiddenTab.Value = "Edittab";  // ?????
        }

        protected void GridView()
        {
            try
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("select * from register", con);
                SqlDataAdapter adp = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                adp.Fill(ds);
                if (ds.Tables[0].Rows.Count > 0)
                {
                    GridView1.DataSource = ds;
                    GridView1.DataBind();
                }
                else
                {
                    ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                    GridView1.DataSource = ds;
                    GridView1.DataBind();
                    int columncount = GridView1.Rows[0].Cells.Count;
                    GridView1.Rows[0].Cells.Clear();
                    // GridView2.FooterRow.Cells.Clear();                    
                    GridView1.Rows[0].Cells.Add(new TableCell());
                    GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                    GridView1.Rows[0].Cells[0].Text = "No Records Found";
                } HiddenTab.Value = "Listtab";
            }
            catch (Exception ex)
            {
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
            }
            finally
            {
                con.Close();
            }
        }
    }
}

Send (Pass) GridView Row details to UserControl (ASCX) using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us