Step 1:-
Open Visual Studio 2015 => Goto File Menu => New => Project...
Step 2:- In
the Installed Templates list, select Visual C# => Web
Step 3:-
Select ASP.Net Web Application from the Web list => Type UserControlDemo
in the Name box and click OK
Step 4:-
Select Empty template from ASP.NET Templates List
Step 5:-
Right-click UserControlDemo in Solution Explorer => Add => Click
New Items...
Step 6:-
Select Web Form User Control from the Web list = > Type FileUploadUserControl.ascx
in the Name box and click OK
Step 7:-
Copy Past following code to FileUploadUserControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FileUploadUserControl.ascx.cs" Inherits="UserControlDemo.FileUploadUserControl" %>
<table>
<tr>
<td>Title</td>
<td>
<asp:TextBox ID="txtTitle" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
<tr>
<td>Browse
File</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="Static" /></td>
</tr>
<tr>
<td colspan="2" style="text-align:
center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return
Validate();" OnClick="btnSubmit_Click" />
</td>
</tr>
</table>
<script>
function
Validate() {
var jTitle =
document.getElementById("txtTitle").value;
var jFileUpload =
document.getElementById("FileUpload1").value;
if (jTitle === "") {
alert("Required
Title Field.");
document.getElementById("txtTitle").focus();
return false;
}
if (jFileUpload === "") {
alert("Required
FileUpload Field.");
document.getElementById("FileUpload1").focus();
return false;
}
return true;
}
</script>
Design Look like...
Tips:-
To expose
the User Control controls to content page, create the Public Property and
handle the button click event, create the delegate and event.
Step 8:-
Copy Past following code to FileUploadUserControl.ascx.cs
using System;
using
System.Web.UI.WebControls;
namespace
UserControlDemo
{
public partial class FileUploadUserControl :
System.Web.UI.UserControl
{
public delegate void EventHandler(object
sender, EventArgs e);
public static event EventHandler
onClick;
public string Text
{
get { return
txtTitle.Text; }
set { txtTitle.Text =
value; }
}
public FileUpload
FileUpload
{
get { return
FileUpload1; }
}
protected void
Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
protected void
btnSubmit_Click(object sender, EventArgs e)
{
if (onClick != null)
{
onClick(sender, e);
}
}
}
}
Step 9:-
Right-click UserControlDemo in Solution Explorer => Add => Click
New Items...
Step 10:-
Select Web Form from the Web list = > Type ConsumeUserControl.aspx
in the Name box and click OK
Step 11:-
Register FileUploadUserControl.ascx to ConsumeUserControl.aspx page. To register
drag and drop FileUploadUserControl.ascx from in Solution Explorer to ConsumeUserControl.aspx
page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConsumeUserControl.aspx.cs" Inherits="UserControlDemo.ConsumeUserControl" %>
<%@ Register Src="~/FileUploadUserControl.ascx" TagPrefix="uc1" TagName="FileUploadUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:FileUploadUserControl runat="server" ID="FileUploadUserControl" />
<br />
<b>Result:</b>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
Design Look like...
Step 12:- To
handle the button click event of FileUploadUserControl button, register the
event on ConsumeUserControl.aspx.cs
using System;
namespace
UserControlDemo
{
public partial class ConsumeUserControl :
System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
FileUploadUserControl.onClick
+= FileUploadUserControl_onClick;
}
private void
FileUploadUserControl_onClick(object sender, EventArgs e)
{
Label1.Text =
FileUploadUserControl.Text;
if (FileUploadUserControl.FileUpload.HasFile)
{
Label1.Text += "
| <b>File Path:</b> " +
FileUploadUserControl.FileUpload.PostedFile.FileName;
}
}
}
}
All Done
Run Protect
Output Look like...
This comment has been removed by a blog administrator.
ReplyDelete