Hi there i'm following this tutorial github to create upload image without refreshing page and i'm success follow this tutorial, here is the link of gihub that i follow
https://github.com/hayageek/jquery-upload-file/tree/master/c%23
here is the code preview
@*
* jQuery Upload File Plugin C# Implementation Example
* Developed by Aleixo Porpino Filho
*@
@{
ViewBag.Title = "Home Page";
Layout = null;
}<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="~/Content/jquery-upload-file-master/js/jquery.uploadfile.js"></script><br /><div class="row"><div class="col-md-4"><div id="fileuploader">Upload</div></div></div><div id="extrabutton" class="ajax-file-upload-green">Start Upload</div><script>
//This example show how to use upload plugin with Asp.Net C# MVC
//The plugin use an extraHTML, download and delete buttons$(document).ready(function () {
var extraObj = $("#fileuploader").uploadFile({
url: "../Home/UploadFile",
statusBarWidth: 'auto',
dragdropWidth: 'auto',
showDelete: true,
showDownload: true,
autoSubmit: false,
showProgress: true,
extraHTML: function () {
var html = "<div><b>File Tags:</b><input type='text' name='tags' value='' /> <br/>";
html += "<b>Category</b>:<select name='category'><option value='1'>ONE</option><option value='2'>TWO</option></select>";
html += "</div>";
return html;
},
deleteCallback: function (data, pd) {$.post("../Home/DeleteFile?url=" + data.url,
function (resp, textStatus, jqXHR) {
//Show Message
console.log(resp, textStatus);
alert(resp.msg);
pd.statusbar.hide(); //You choice.
});
},
downloadCallback: function (json, pd) {
console.log(pd);
window.open('../Home/DownloadFile?url=' + json.url, "_blank");
}
});$("#extrabutton").click(function () {
extraObj.startUpload();
});
}); /*
* C# implementation example
* Developed by Aleixo Porpino Filho
*/
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadFile()
{
try
{
HttpPostedFileBase hpf = HttpContext.Request.Files["file"] as HttpPostedFileBase;
string tag = HttpContext.Request.Params["tags"];// The same param name that you put in extrahtml if you have some.
string category = HttpContext.Request.Params["category"];
DirectoryInfo di = Directory.CreateDirectory(Server.MapPath("~/Tmp/Files"));// If you don't have the folder yet, you need to create.
string sentFileName = Path.GetFileName(hpf.FileName); //it can be just a file name or a user local path! it depends on the used browser. So we need to ensure that this var will contain just the file name.
string savedFileName = Path.Combine(di.FullName, sentFileName);
hpf.SaveAs(savedFileName);
var msg = new { msg = "File Uploaded", filename = hpf.FileName, url= savedFileName };
return Json(msg);
}
catch (Exception e)
{
//If you want this working with a custom error you need to change in file jquery.uploadfile.js, the name of
//variable customErrorKeyStr in line 85, from jquery-upload-file-error to jquery_upload_file_error
var msg = new { jquery_upload_file_error = e.Message };
return Json(msg);
}
}
[Route("{url}")]
public ActionResult DownloadFile(string url)
{
return File(url, "application/pdf");
}
[HttpPost]
public ActionResult DeleteFile(string url)
{
try
{
System.IO.File.Delete(url);
var msg = new { msg = "File Deleted!" };
return Json(msg);
}
catch (Exception e)
{
//If you want this working with a custom error you need to change the name of
//variable customErrorKeyStr in line 85, from jquery-upload-file-error to jquery_upload_file_error
var msg = new { jquery_upload_file_error = e.Message };
return Json(msg);
}
}i'm success to follow that tutorial, then i try to change the Layout below
@{
ViewBag.Title = "Home Page";
Layout = null;
}To
@{
ViewBag.Title = "Home Page";
Layout = _Layout.cshtml;
}then the result is when i submit the form it reloads the page because i change the form, please i hope you can resolve my issues, i confuse what is the problem, is there conflict when i use default layout, Thanks