Change null Layout to default layout upload image refreshing the page

Question

User2131089582 posted

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

Answer 1

User1535942433 posted

Hi hocamahdi99.

Accroding to your description and codes,I create a demo of the two issue(One  of the layout is null and another one of the layout is to the default layout).The two issue both don't refresh the page.

Could you post your current code to us?It will help us solve your problem more faster.

Since you don't post more codes about form, I create a test with layout to default layout.

More details,you could refer to below codes:

@{
    ViewBag.Title = "Index2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts{
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <link href="~/Content/uploadfile.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.uploadfile.js"></script>
    <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: "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("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('DownloadFile?url=' + json.url, "_blank");
                }
            });
            $("#extrabutton").click(function () {
                extraObj.startUpload();
            });
        });
    </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>

Result:

More details,you could refer to below article:

https://forums.asp.net/t/2131040.aspx?ASP+NET+MVC+don+t+want+to+Refresh+layout+page+every+time

Best regards,

Yijing Sun

Answer 2

User2131089582 posted

where do u get 

<script src="~/Scripts/jquery-3.0.0.min.js"></script>

Answer 3

User1535942433 posted

Hi 

As far as I think,there are two solution:

1.You could download from nuget.

Right click your application-->click Manage Nuget Packages-->select jquery and the version to be 3.0.0.-->install

2.You could download from Internet.Then you could copy the jquery file to your application folder and drag the file to your visual studio application.Just like this:

https://jquery.com/download/

Best regards,

Yijing Sun