locked
Change null Layout to default layout upload image refreshing the page RRS feed

  • 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

    Thursday, February 13, 2020 5:50 PM

All replies

  • 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

    Friday, February 14, 2020 3:52 AM
  • User2131089582 posted

    where do u get 

    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    Saturday, February 15, 2020 3:13 AM
  • 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

    Monday, February 17, 2020 5:34 AM