I came across this problem while I was developing a mobile web application in MVC4. I think most of you all have faced this issue and found a solution as well. But I thought it was worth to share this, becuase this did the trick for me.
In my MVC4 web application , I had my _Layout.cshtml page like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
@if (IsSectionDefined("Header")) {
@RenderSection("Header")
} else {
<h1>@ViewBag.Title</h1>
@Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
</body>
</html>
But inorder to resolve the error, I had to modify the page like below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
@if (IsSectionDefined("Header")) {
@RenderSection("Header")
} else {
<h1>@ViewBag.Title</h1>
@Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
Note that I changed the place of JQuery script line from section <body> to <head>.
source : http://forums.asp.net/t/1835597.aspx/1
Sunday, December 23, 2012
Monday, December 3, 2012
Windows Phone 7 Photo Upload
Recently I have developed a native Windows Phone 7 program to upload images to remote server.
MainPage.xaml
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="517" Margin="0,6,0,0" Name="listimge" VerticalAlignment="Top" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="chk" /><Image Source="{Binding ImageFile}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Upload" Height="72" HorizontalAlignment="Left" Margin="150,529,0,0" Name="uploadButton"
VerticalAlignment="Top" Width="160" Click="UploadClick" />
</Grid>
MainPage.xaml.cs
The below method is used to load image files from the Picture Gallery to the ListBox.
private MediaLibrary MyMediaLibrary { get; set; }
private void LoadImageGallery()
{
MyMediaLibrary = new MediaLibrary();
PictureCollection pictures = MyMediaLibrary.Pictures;
foreach (Picture picture in pictures)
{
var image = new BitmapImage();
image.SetSource(picture.GetImage());
var mediaImage = new MediaImage {ImageFile = image};
listimge.Items.Add(mediaImage);
}
}
This method is used to upload the selected images(iterating through the ListBox to find the selected index) to the remote server.
private void UploadClick(object sender, RoutedEventArgs e)
{
for (int i = 0; i < listimge.Items.Count; i++)
{
if (listimge.ItemContainerGenerator != null)
{
var item = listimge.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
var tagregCheckBox = FindCheckBox<CheckBox>(item);
if (tagregCheckBox.IsChecked == true)
{
UploadImage(i);
tagregCheckBox.IsChecked = false;
}
}
}
}
Helper function which is used to identify the checked Checkboxses in the ListBox.
private T FindCheckBox<T>(DependencyObject parentElement) where T : DependencyObject
{
int count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0)
return null;
for (int i = 0; i < count; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
{
return (T) child;
}
var result = FindCheckBox<T>(child);
if (result != null)
return result;
}
return null;
}
This method is used to find the image from image gallery, get the stream of the identified image and send it to the remote server.
private void UploadImage(int selectedIndex)
{
const int BLOCK_SIZE = 4096;
var uri = new Uri("http://10.20.10.71/MVCFile/File", UriKind.Absolute);
var webClient = new WebClient();
webClient.AllowReadStreamBuffering = true;
webClient.AllowWriteStreamBuffering = true;
Stream selectedImageStream = MyMediaLibrary.Pictures[selectedIndex].GetImage();
webClient.OpenWriteCompleted += (s, args) =>
{
using (var binaryReader = new BinaryReader(selectedImageStream ))
{
using (var binaryWriter = new BinaryWriter(args.Result))
{
long count = 0;
long fileSize = selectedImageStream .Length;
var bytes = new byte[BLOCK_SIZE];
do
{
bytes = binaryReader.ReadBytes(BLOCK_SIZE);
count += bytes.Length;
binaryWriter.Write(bytes);
} while (count < fileSize);
}
}
};
webClient.WriteStreamClosed += (s, args) => { MessageBox.Show("Send Complete"); };
webClient.OpenWriteAsync(uri, "POST");
}
Finally add the 'LoadImageGallery' method to the constructor of MainPage.
// Constructor
public MainPage()
{
InitializeComponent();
LoadImageGallery();
}
Server side File Uploading Controller
public class FileController : Controller
{
public ActionResult Index()
{
string filename = Server.MapPath(String.Format("{0}.jpg", "YourFileName"));
try
{
using (var fs = new FileStream(filename, FileMode.Create))
{
using (var bw = new BinaryWriter(fs))
{
using (var br = new BinaryReader(Request.InputStream))
{
long bCount = 0;
long fileSize = br.BaseStream.Length;
const int BLOCK_SIZE = 4096;
byte[] bytes = new byte[BLOCK_SIZE];
do
{
bytes = br.ReadBytes(BLOCK_SIZE);
bCount += bytes.Length;
bw.Write(bytes);
} while (bCount < fileSize);
}
}
}
return Json(new { Result = "Upload Complete" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new { Result = "Upload Error", Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
}
MainPage.xaml
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="517" Margin="0,6,0,0" Name="listimge" VerticalAlignment="Top" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="chk" /><Image Source="{Binding ImageFile}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Upload" Height="72" HorizontalAlignment="Left" Margin="150,529,0,0" Name="uploadButton"
VerticalAlignment="Top" Width="160" Click="UploadClick" />
</Grid>
MainPage.xaml.cs
The below method is used to load image files from the Picture Gallery to the ListBox.
private MediaLibrary MyMediaLibrary { get; set; }
private void LoadImageGallery()
{
MyMediaLibrary = new MediaLibrary();
PictureCollection pictures = MyMediaLibrary.Pictures;
foreach (Picture picture in pictures)
{
var image = new BitmapImage();
image.SetSource(picture.GetImage());
var mediaImage = new MediaImage {ImageFile = image};
listimge.Items.Add(mediaImage);
}
}
This method is used to upload the selected images(iterating through the ListBox to find the selected index) to the remote server.
private void UploadClick(object sender, RoutedEventArgs e)
{
for (int i = 0; i < listimge.Items.Count; i++)
{
if (listimge.ItemContainerGenerator != null)
{
var item = listimge.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
var tagregCheckBox = FindCheckBox<CheckBox>(item);
if (tagregCheckBox.IsChecked == true)
{
UploadImage(i);
tagregCheckBox.IsChecked = false;
}
}
}
}
Helper function which is used to identify the checked Checkboxses in the ListBox.
private T FindCheckBox<T>(DependencyObject parentElement) where T : DependencyObject
{
int count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0)
return null;
for (int i = 0; i < count; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
{
return (T) child;
}
var result = FindCheckBox<T>(child);
if (result != null)
return result;
}
return null;
}
This method is used to find the image from image gallery, get the stream of the identified image and send it to the remote server.
private void UploadImage(int selectedIndex)
{
const int BLOCK_SIZE = 4096;
var uri = new Uri("http://10.20.10.71/MVCFile/File", UriKind.Absolute);
var webClient = new WebClient();
webClient.AllowReadStreamBuffering = true;
webClient.AllowWriteStreamBuffering = true;
Stream selectedImageStream = MyMediaLibrary.Pictures[selectedIndex].GetImage();
webClient.OpenWriteCompleted += (s, args) =>
{
using (var binaryReader = new BinaryReader(selectedImageStream ))
{
using (var binaryWriter = new BinaryWriter(args.Result))
{
long count = 0;
long fileSize = selectedImageStream .Length;
var bytes = new byte[BLOCK_SIZE];
do
{
bytes = binaryReader.ReadBytes(BLOCK_SIZE);
count += bytes.Length;
binaryWriter.Write(bytes);
} while (count < fileSize);
}
}
};
webClient.WriteStreamClosed += (s, args) => { MessageBox.Show("Send Complete"); };
webClient.OpenWriteAsync(uri, "POST");
}
Finally add the 'LoadImageGallery' method to the constructor of MainPage.
// Constructor
public MainPage()
{
InitializeComponent();
LoadImageGallery();
}
Server side File Uploading Controller
public class FileController : Controller
{
public ActionResult Index()
{
string filename = Server.MapPath(String.Format("{0}.jpg", "YourFileName"));
try
{
using (var fs = new FileStream(filename, FileMode.Create))
{
using (var bw = new BinaryWriter(fs))
{
using (var br = new BinaryReader(Request.InputStream))
{
long bCount = 0;
long fileSize = br.BaseStream.Length;
const int BLOCK_SIZE = 4096;
byte[] bytes = new byte[BLOCK_SIZE];
do
{
bytes = br.ReadBytes(BLOCK_SIZE);
bCount += bytes.Length;
bw.Write(bytes);
} while (bCount < fileSize);
}
}
}
return Json(new { Result = "Upload Complete" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new { Result = "Upload Error", Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
}
Subscribe to:
Posts (Atom)