In this article i will illustrate how to create simple widget and use that widget in a web page.
Widget:
Widgets are the small piece of code that can be embedded in any web page. Google Ads is common example for widgets that we see every day. These ads are produced by placing small piece of code( widget) in a webpage.
We can create our own widgets and make available to others or use the widgets created by others in our web pages. Widget is like a normal web page only. So it has its own post backs , click events etc. So be careful while embedding widgets in your webpage.
Here is the code for creating sample calculator widget which just calculates the sum of two numbers and outputs the result
Creating a Widget using C#.net (Sample Calculator Widget)
Aspx Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreateaCalculatorWidget.aspx.cs" Inherits="Forum_Topics_CreateaCalculatorWidget" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblWidget" runat="server" Text="Sample Calculator Widget" ForeColor="Red"></asp:Label>
<br />
<br />
<asp:textbox ID="txtNum1" runat="server"></asp:textbox>
<br />
+
<br />
<asp:textbox ID="txtNum2" runat="server"></asp:textbox>
<br />
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
<br />
<br />
<asp:textbox ID="txtResult" runat="server" Enabled="false"></asp:textbox>
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Forum_Topics_CreateaCalculatorWidget : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnAdd_Click(object sender, EventArgs e)
{
txtResult.Text = ( Int32.Parse(txtNum1.Text) + Int32.Parse(txtNum2.Text)).ToString();
}
}
Output:
How to use Widgets in a Web Page:
Iframe is used to embed widgets in our web page .
Widget can be present in our local server or in the remote sever.
Specify the absolute path of widget in the “src” attribute of Iframe.
Sample code for using widget in web page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="useWidget.aspx.cs" Inherits="Forum_Topics_useWidget" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblWidget" runat="server" Text="Using Sample Calculator Widget in my web page"
ForeColor="#3366FF"></asp:Label>
<br />
<br />
<iframe id="frm1" runat="server" src="CreateaCalculatorWidget.aspx"></iframe>
</div>
</form>
</body>
</html>
Output:
I benefit reading this article. I demand to learn more on this topic
ReplyDeletedevelopment asp.net
Ya sure:-)
Delete