Share via

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

Question

Tuesday, August 11, 2020 10:44 AM

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>
<h4>Upload</h4>
@{
    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)
                @*<h4>@ViewBag.msg</h4>*@
            </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.

All replies (4)

Tuesday, August 11, 2020 3:15 PM

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.

Thursday, August 13, 2020 10:40 AM

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

Tuesday, September 29, 2020 8:17 AM

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 2:43 PM

 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?

  • Last updated on