Computer Programming

Saturday, June 25, 2016

June 25, 2016

jQuery Autocomplete List appear onFocus TextBox

In this example i will show you, How to show array list when we focus on TextBox. I mean to say that array list contain users name and its show when we focus on TextBox. Here we have a simple example which is contain list of users name, also i have a autocomplete function in Script library . I have a video , you can check for implementation as well as output.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<script>
$(function () {
var users = ['jacob lefore', 'Bill', 'smith wick', 'ammey', 'rodkils', 'BillSmith'];
$('#TextBox1').autocomplete({
source: users,
minLength:0
}).focus(function () {
$(this).autocomplete("Search", "");
})
})

</script>
</head>
<body>
Enter name: <input type="text" id="TextBox1" placeholder="TextBox Focus"/>
</body>
</html>

Wednesday, June 15, 2016

ASP.NET

June 15, 2016

How to use FileUpload Control in ASP.NET

Introduction
The FileUpload control displays a text box control and a browse button that enable users to browse a file from the local or remote machine to upload it on the Web server. You can upload a file on the Web Server by specifying the full path of the file to be uploaded (for example D:\Myfiles\Test.txt) in the textbox of this control . Alternatively , you can select the file by clicking the browse button , and then locating it in the Choose File dialog box.

Top Related article

Public Properties of the FileUpload Class
FileBytes : Obtains an array of the bytes in a file that is specified by using a FileUpload control

FileContent : Obtains a Stream object that points to a file to upload using the FileUpload control.

FileName : Obtains the name of a file on a client to upload using the FileUpload control.

HasFile : Obtains a value indicating whether the FileUpload control contains a file.

PostedFile : Obtains the underlying HttpPostedFile object for a file that is uploaded by using the FileUpload control.

Public Method of the FileUpload Class
SaveAs : Saves the data of an uploaded file to a specified path on the web server.

Example of FileUpload control in ASP.NET

<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            FileUpload1.SaveAs(Server.MapPath("~/images/" + FileUpload1.FileName));
        }
        else
        {
            emptyupload.Text = "Choose your file";
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            font-size: larger;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="auto-style1">

        <strong>Pick Your file from file upload control<br />
        </strong>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" />
        <br />
        <asp:Label ID="emptyupload" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Output

Example of file upload control in asp.net

Only GIF image support by FileUpload control

Note : GetExtension is the method of the path class which is detect extension of the filename.

Multiple File Upload control on Same Page

This is the new features comes into the DOTNET Framework 3.5. If you have three or more file upload control on same page then what to do for save files into project directory. If you use traditional code like
if(fileupload1.hasfile)
{
//code)}
if(fileupload2.hasfile)
{
//code
}
This is the wrong for developer perspective. You can use new features of DOTNET Framework 3.5 i.e HttpFileCollection class. By using Request.Files property you can get the files from the server.
Check the simple example of it.

Source Code:

<div>

<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:FileUpload ID="FileUpload2" runat="server" />
<br />
<asp:FileUpload ID="FileUpload3" runat="server" />
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>

</div>
protected void Button1_Click(object sender, EventArgs e)
{
string filepath = "E:\\Upload";
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
try
{
if (hpf.ContentLength>0)
{
Label1.Text += "File Content Type: " + hpf.ContentType+"<br/>";
Label1.Text += "File Size: " + hpf.ContentLength + "<br/>";
Label1.Text += "File Name: " + hpf.FileName + "<br/>";
hpf.SaveAs(filepath + "\\" + System.IO.Path.GetFileName(hpf.FileName));
Label1.Text += "Location of the file: " + filepath + "\\" + System.IO.Path.GetFileName(hpf.FileName);

}
}
catch (Exception ex)
{

Label1.Text += "Error: " + ex.Message;
}
}

}
Code Generate the following output:

Monday, June 13, 2016

ASP.NET

June 13, 2016

ASP.NET Searching Data using SqlDataSource Control

In this article, i will show you, How to search data from database table using SqlDataSource control. Visual Studio SqlDataSource control have inbuilt many functionality to make dynamic application. By using SqlDataSource control you can do different types of functionality like Sorting, Searching, Insert, Update, Delete data. In this article i will show you an example of searching/filtering data from database table. So first of Design a Database table using Sql Server Explorer. Now, you can take three tuples in it. I have a Database table schema, you can check.

Search Data From Database table using SqlDataSource Control:

1. First to add one TextBox, One Button and a GridView control in a page.

2. By using Show Smart tag you can configure your GridView Control with the database table using SqlDataSource control.

3. When you configure your SqlDataSource control please check the Where clause button. In it you can select Field name, which is used to searching. Operator is "=" and parameter is control.

4. You can Run your Web Site.

The Complete Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="search.aspx.cs" Inherits="search" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

Enter Name:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />

</div>
<asp:Button ID="Button1" runat="server" Text="Search Student Details" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="StudentId" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="StudentId" HeaderText="StudentId" InsertVisible="False" ReadOnly="True" SortExpression="StudentId" />
<asp:BoundField DataField="StudentName" HeaderText="StudentName" SortExpression="StudentName" />
<asp:BoundField DataField="StudentCity" HeaderText="StudentCity" SortExpression="StudentCity" />
</Columns>
</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Student] WHERE ([StudentName] = @StudentName)">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="StudentName" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>

</form>
</body>
</html>

Code Generate the Following output:

ASP.NET Searching Data using SqlDataSource Control

Wednesday, June 8, 2016

asp.net mvc MVC

June 08, 2016

Save and Retrieve Image into database table in ASP.NET MVC

According to my previous article, Which is written in web form. If you are a web form user then try this article. In this article i will show you, How to save image file into database table using ASP.NET MVC, also retrieve image from table to ASP.NET MVC Application. You know that image file saved in the form binary array. So, First to create a table, in which you can take varbinary(max) type field. I will give you an example of simple table.

CREATE TABLE [dbo].[Brand] (
[BrandId] INT IDENTITY (1, 1) NOT NULL,
[BrandImage] VARBINARY (MAX) NULL,
PRIMARY KEY CLUSTERED ([BrandId] ASC)
);

Now, Add a EDMX file to prepare a DataContext as well as model. Now, open a HomeController.cs file to write the code for save file. In this file first to pass model in the view. Add a file control in the view file.

@using (Html.BeginForm("AddImage", "Home", FormMethod.Post, new {enctype="multipart/form-data"}))

{

@Html.AntiForgeryToken()

<h4>Brand</h4>

<hr />

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.BrandImage, htmlAttributes: new { @class = "control-label col-md-2" })

</div>

</div>

}

Save file using controller file

public ActionResult AddImage(Brand model, HttpPostedFileBase image1)

{

var db = new Database1Entities3();

if (image1!=null)

{

model.BrandImage = new byte[image1.ContentLength];

image1.InputStream.Read(model.BrandImage, 0, image1.ContentLength);

}

db.Brands.Add(model);

db.SaveChanges();

return View(model);

}

Show Image using controller file

public ActionResult ShowImage()

{

Database1Entities3 db = new Database1Entities3();

var item = (from d in db.Brands

select d).ToList();

return View(item);

}

ShowImage View section

@model IEnumerable<WebApplication1.Brand>

ViewBag.Title = "ShowImage";

}

<h2>ShowImage</h2>

<table>

<tr>

@foreach (var item in Model)

{

<td>

var base64 = Convert.ToBase64String(item.BrandImage);

var imgSrc = String.Format("data:image/gif;base64,{0}", base64);

}

</td>

}

</tr>

</table>

Tuesday, May 31, 2016

JQUERY

May 31, 2016

Calendar Control with Disabled past date

In this article, i will show you, how to show calendar control with disabled past date. I mean to say that if you select date then calendar control disabled all previous day. Also i will provide you, After select a specific date then you don't move to previous months. Lets see an example.

Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.

$(function () {
$("input[id*='calid']").datepicker();
})

Disabled Previous Date:

$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar Control with Disabled past date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>

$(function () {
$("input[id*='calid']").datepicker({

minDate: new Date(2016,6,1)
});
})

</script>

</head>
<body>
<form id="form1">
<input type="text" id="calid" />
</form>
</body>
</html>

Code Generate the Following code

Thursday, May 26, 2016

asp.net mvc MVC

May 26, 2016

Anti Xss in ASP.NET MVC

In this ASP.NET MVC Video tutorial i will show you, How to prevent your page from XSS attack. XSS stands for Cross side Scripting attack. Suppose you open your banking website, also open forgery website in other tabs, that sites attack on your banking website also steal your credential information. So, if you are developer then prevent your web page from XSS attacks. Lets see this video:

Tuesday, May 24, 2016

ASP.NET Projects

May 24, 2016

Import Export project in ASP.NET C#

Project Introduction:

In this project, we have some modules, which is related to Import and Export goods services. This project provides online facilities to pickup your goods from any where in the nation. Actually projects is based on packers and movers functionality. Lots of goods transport one place to another place. We all know about import and export. Suppose, you want to bring goods from other places and that place is far from you place. So , you face too much difficulties. So, i design a packer and mover based project in ASP.NET C#.

Project modules

Project contains lots of things which is related to customer as well as company who pick up goods. So i dived the project in different categories, categories further divided in sub categories.

Module:

User Module (Who Generate pick up request)
Branch Module(Who handle pick up request , i am taking state level branch module)
Agent Module (Who deliever the goods)
Admin (Who handle all such functionality)