June 2016

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>