locked
How to pass HttpContext from ajax to controller in asp.net mvc RRS feed

  • Question

  • User-1257308419 posted

    i am trying to display progress bar with this ajax call but it isn't working

    here's the ajax script:

    <script type="text/javascript">
    
            $(document).ready(function () {
    
                $('#upload').click(function () {
    
                    var files = $('#file')[0].files;
                    if (files.length > 0) {
                        var formData = new formData();
                        for (var i = 0; i < files.length; i++)
                        {
                            formData.append(files[i].name, files[i]);
                        }
                        var progressbarDiv = $('#progressbar');
                        var progressbarLabel = $('#progressbar-label');
    
                        $.ajax({
                            url: '@Url.Action("UploadFiles")',
                            method: 'post',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function () {
                                progressbarLabel.text('Complete');
                                progressbarDiv.fadeOut(2000);
                            },
                            error: function (err) {
                                alert(err, statusText)
                            }
                        });
                        progressbarLabel.text('Uploading...');
                        progressbarDiv.progressbar({
                            value: false
                        }).fadeIn(500);
    
                    }
                });
    
            });
    
        </script>

    here is the .cshtml page

    @model HrPortal_New_.Models.File
    @{
        ViewBag.Title = "Create";
    }
    @Styles.Render("~/Content/CreateStyleSheet.css")
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/pageStyle.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.0.0.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <h2>Upload</h2>
    @{
        if (Session["ID"] == null)
        {
            Response.Redirect("~/User/Index");
        }
        var id = Session["ID"];
        var a = id;
        //var b = ViewBag["ID"];
    }
    
    <div class="pageStyle">
        @using (Html.BeginForm("UploadFiles",
                                          "Files",
                                          FormMethod.Post,
                                          new { enctype = "multipart/form-data" }))
    
        {
            @Html.AntiForgeryToken()
    
            <div class="form-horizontal">
                <h4>File</h4>
                <hr />
    
                <div class="form-group">
                    @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.FileName, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10">
                        @*@Html.Hidden("U_ID",Session["U_ID"])*@
                        <input id="U_ID"
                               name="U_ID"
                               type="hidden"
                               value=@id />
                        @Html.ValidationMessageFor(model => model.FilePath, "", new { @class = "text-danger" })
                    </div>
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.FilePath, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
    
                        <input type="file" name="file" id="file" class="btn btn-default" />
                        @Html.ValidationMessageFor(model => model.FilePath, "", new { @class = "text-danger" })
                        @*<input type="file" name="@Html.NameFor(x => x.FilePath)" id="@Html.IdFor(x => x.FilePath)" />
                            @Html.ValidationMessageFor(x => x.FilePath)*@
                    </div>
                    <div style="width:300px">
                        <div id="progresbar" style=";display:none">
                            <span id="progressbar-label" style=";left:35%;top:20%">Loading...</span>
                        </div>
    
                    </div>
    
                    <div style="padding-left:30px;"><input class="btn btn-success" type="submit" value="Upload" id="upload"></div>
                </div>
                <div style="padding-left:20px;color:red;">
    
                    @Html.DisplayFor(model => model.Message)
                    @*<h2>@ViewBag.msg</h2>*@
                </div>
            </div>
        }
    
        <div>
    
            <a style="color:dodgerblue;" href="@Url.Action("main","UserLoggedIn")">back</a>
         
    
    
    
        </div>
    </div>
    

    and this is the file model

     public string Message { set; get; }
            public int File_ID { get; set; }
            [Required(ErrorMessage = "Name is required!")]
            public string FileName { get; set; }
            public string FilePath { get; set; }
            [Remote("IsUserExists", "Files", ErrorMessage = "User Already Uploaded CV")]
            [ServerSideRemote("User", "doesUserNameExistGet")]
            public Nullable<int> U_ID { get; set; }
        
            public virtual User User { get; set; }

    this is the error i get

    No parameterless constructor defined for this object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.MissingMethodException: No parameterless constructor defined for this object.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Tuesday, August 11, 2020 10:44 AM

All replies

  • User-474980206 posted

    HttpContxt is a server side object created for a request. You do not pass via ajax. the error is probably a controller or an action parameter that requires a constructor, thus the error.

     you don't explain where the error is from.

    Tuesday, August 11, 2020 3:15 PM
  • User1686398519 posted

    Hi Learner94,

    • Learner94

      display progress bar with this ajax call but it isn't working
      • According to the code you provided, I modified your code, please refer to it.

    Controller

            public ActionResult Index()
            {
                return View();
            }
            [HttpPost]
            public ActionResult UploadFiles()
            {
                bool result = false;
                HttpFileCollectionBase files = Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFileBase file = files[i];
                    if (file != null)
                    {
                        string savepath = Server.MapPath("~/UploadedFiles");
                        if (!Directory.Exists(savepath))
                        {
                            Directory.CreateDirectory(savepath);
                        }
                        //Generate unique name
                        var filename = Guid.NewGuid().ToString() + file.FileName;
                        string path = Path.Combine(savepath, filename);
                        file.SaveAs(path);
                        try
                        {
                            //Store in the database
                            FileTest filetest = new FileTest();
                            filetest.FileName = filename;
                            filetest.FilePath = Path.Combine("~/UploadedFiles", filename);
                            db.FileTests.Add(filetest);
                            result = true;
                        }
                        catch (Exception e)
                        {
    
                        }
                    }
                }
                return Json(result,JsonRequestBehavior.AllowGet);
            }

    View

    <style>
        .ui-progressbar {
            ;
        }
        .progress-label {
            ;
            left: 50%;
            top: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
    </style>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    
    <div class="pageStyle">
        <div class="form-horizontal">
            <h4>File</h4>
            <div class="form-group">
                <div class="col-md-10">
                    <input type="file" name="file" id="file" class="btn btn-default" />
                </div>
                <div style="padding-left:20px;color:red;">
                    @Html.DisplayFor(model => model.Message)
                </div>
            </div>
            <div class="form-group" id="progressbar" style=";display:none"><div class="progress-label">Loading...</div></div>
    
        </div>
        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <input class="btn btn-success" type="submit" value="Upload" id="upload">
            </div>
        </div>
    </div>
    <div>
        <a style="color:dodgerblue;" href="@Url.Action("main","UserLoggedIn")">back</a>
    </div>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#upload').click(function (){
                var progressbar = $("#progressbar"), progressLabel = $(".progress-label");
                var files = $('#file')[0].files;
                var fileData = new FormData();
                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }
                }
                 $.ajax({
                    url: '@Url.Action("UploadFiles")',
                     method: 'Post',
                     contentType: false,  
                     processData: false, 
                     data: fileData,
                     success: function (data) {
                         if (data) {
                             $("#progressbar").css("display", "block");
                             progressbar.progressbar({
                                 value: false,
                                 change: function () {
                                     progressLabel.text(progressbar.progressbar("value") + "%");
                                 },
                                 complete: function () {
                                     progressLabel.text("Complete");
                                 }
                             });
                             function progress() {
                                 var val = progressbar.progressbar("value") || 0;
                                 progressbar.progressbar("value", val + 1);
                                 if (val < 99) {
                                     setTimeout(progress, 200);
                                 }
                             }
                             setTimeout(progress, 3000);
                         } 
                     },
                     error: function (err) {
                          alert(err, statusText)
                      }
                  });
            });
         });
    </script>
    • Learner94

      No parameterless constructor defined for this object.
      • Where did this error occur? Can you give a screenshot of the error report?

    Here is the result.

    Best Regards,

    YihuiSun

    Thursday, August 13, 2020 10:40 AM
  • User-1257308419 posted

    thanks but this is not working for me it shows loading only and file is uploaded to the folder but no progress is shown

    Tuesday, September 29, 2020 8:17 AM
  • User-1257308419 posted

     progressbar.progressbar({
                                 value: false,
                                 change: function () {
                                     progressLabel.text(progressbar.progressbar("value") + "%");
                                 },

    my code doesn't enter this part...i copied exact code you gave but i think there's some compatibility issue of bootstrap version jquery or jquery ui version can you please guide me regarding this?

    Tuesday, September 29, 2020 2:43 PM