Description:-
In
previous example we allready expalin that how to perform Insert,Update,Delete
in Gridview without Postback using Jquery/Ajax.but now in this example we
explain how to Load Asp.Net usercontrol(.ascx control) in aspx webpage without
Postback using Jquery Ajax in asp.net.we can also Load the css or javascript
that are define in usercontrol.
.Net provide a Web server controls by using this in your ASP.NET Web pages, you can easily create our own custom, reusable controls using the same techniques as you use for creating ASP.NET Web pages and these controls are known as user controls.
A user control is a kind of composite control that works much like an ASP.NET Web page andYou can easily embed them in ASP.NET Web pages in which they act as a unit.
This is very useful example when
that type of problem you faced like
For Example:-
I have a ASP.Net(C#) page. When a user
selects a value in dropdownlist, some new controls will be visible to him. I am
able to that now, but the page has to reload every time and state has to be
maintained between postbacks.
So in this sitution you can easily
Load the control without Postback or PageLoad.
Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Dynamically Read/Write File in asp.Net How to Read Write File in Asp.Net using C#
Default.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
var control = "EmployeeWebUserControl.ascx";
$.ajax({
type: "POST",
url: "Default.aspx/GetUserControl",
data: "{userControl:'" + control + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (r) {
$('#div1').html(r.d);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="Button1" value="Load Data from User Control" />
<div id="div1"></div>
</div>
</form>
</body>
</html>
Default.aspx.cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.Services;
using
System.Web.UI.HtmlControls;
using
System.IO;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public static string GetUserControl(string userControl)
{
Page page = new Page();
UserControl control = (UserControl)page.LoadControl(userControl);
HtmlForm form = new HtmlForm();
form.Controls.Add(control);
page.Controls.Add(form);
StringWriter writer = new StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
}
now create a web user control with name EmployeeWebUserControl and paste the below code
EmployeeWebUserControl.ascx:-
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeWebUserControl.ascx.cs" Inherits="EmployeeWebUserControl" %>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2" rowstyle-cssclass="record">
<Columns>
<asp:BoundField DataField="id" HeaderText="Id" />
<asp:TemplateField HeaderText="Username">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Username") %>' CssClass="unm"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Password">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Password") %>' CssClass="pwd" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a href="#" id='<%# Eval("id") %>' class="updatebutton">
<img border="0" src="Image/edit.gif" alt="Delete" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<Itemtemplate>
<a href="#" id='<%# Eval("id") %>' class="delbutton"> <img src="Image/delete.png" alt="Delete" border="0"></a>
</Itemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
EmployeeWebUserControl.ascx.cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
using
System.Data.SqlClient;
public partial class EmployeeWebUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SQLDB;User
ID=Demoh;Password=Demo1@"))
{
using (SqlCommand cmd = new SqlCommand("select * from
Users", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
gvUsers.DataSource = dt;
gvUsers.DataBind();
}
}
}
}
}
0 comments:
Post a Comment