Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Change null Layout to default layout upload image refreshing the page

$
0
0

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


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>