Executing JavaScript after uploading a file using Kendo Upload and Form in MVC

Currently, I am faced with a challenge while trying to submit a form that includes a List of files as one of its properties.

Upon successful completion of the ActionResult, I need to display a success message using Javascript.

When I utilize Ajax.Begin form, the Javascript message displays correctly, but unfortunately, the files are not sent to the ActionResult. On the other hand, if I opt for Html.BeginForm, the files get sent, however, it prevents me from calling the javascript function and subsequently hindering the triggering of my success message.

Below is my view:

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, 
        new { id = "exceptionForm", enctype = "multipart/form-data" }))
{
   @Html.TextAreaFor(m => m.Notes)
   @(Html.Kendo().Upload()
   .Name("EventFiles")
   )
   <div >
      <button href="#">
      submit
      </button>
   </div>
}

My Action

[HttpPost]
public ActionResult Action(Model model)
{
   //do something
   result = new BaseJsonData();
   result.HasCompletedSuccessfully = true;
   return this.Json(result);
}

My model

public class EventModel
{
   public string Notes { get; set; }
   public IEnumerable<HttpPostedFileBase> EventFiles { get; set; }
}

My javascript:

onSuccess: function (data) {
     if (data.HasCompletedSuccessfully) {
      //show message extention
     }
}

I appreciate any help in advance :)

Schewns

Answer №1

If you want to utilize the asynchronous mode of the Telerik control, you will need to do so directly:

.CSHTML

@(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Save", "Upload")
                .Remove("Remove", "Upload")
                .AutoUpload(true)
            )
            .Events(events => events
                .Success("onSuccess")
                .Error("onError")
            )
        )

Javascript:

<script>
    function onSuccess(e) {
        alert("Success (" + e.operation + ")");
    }

    function onError(e) {
        alert("Error (" + e.operation + ")");
    }      
</script>

For further details, please refer to the Telerik documentation:

Answer №2

After a thorough exploration and experimentation with different methods, I ultimately settled on the following solution:

I opted to download and use this plugin:

http://jquery.malsup.com/form/#download

Following installation, I included this javascript function:

$('#exceptionForm').ajaxForm({
  complete: function (response) {
    var data = response.responseJSON;
    if (data.HasCompletedSuccessfully) {
            //warning message
    }
})

Fortunately, it worked flawlessly. Appreciate the assistance :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I show the post JSON response that was retrieved in ReactJS on the same form component that was used to submit the value?

Thank you for your assistance in advance. I am currently developing a web crawler that will operate in the following steps: The user inputs the seed URL (front-end) The user clicks the submit button (front-end) The seed URL is processed by the backend usi ...

Mistakes encountered when utilizing the Gremlin DSL in the `repeat` stage

Our team is utilizing gremlin-javascript and has recently implemented a DSL (Domain Specific Language) to streamline our queries. However, we have encountered an issue when trying to use DSL methods within a repeat step. Every time we attempt this, we con ...

An uncaught exception occurred with the WebDriverBackedSelenium wait timeout

When using WaitForPageToLoad(timeout) with webdriverbackedselenium, an unhandled exception is being thrown even though there is a try catch block in place. try { selenium.WaitForPageToLoad(timeout); } ...

Regular expressions can be used to remove specific parts of a URL that come before the domain name

Looking for some help with a javascript task involving regex and the split function. Here's what I need to achieve: Input: http://www.google.com/some-page.html Output: http://www.google.com I attempted the following code but unfortunately it didn&ap ...

Using a package manager with Deno: Best practices and tips

I just learned about Deno, the alternative to NodeJS. I'm trying to figure out how to use yarn or npm with Deno, but I can't seem to find any instructions. Is there a way to use yarn or npm with Deno? ...

I am attempting to invoke a JavaScript function from within another function, but unfortunately, it does not seem to be functioning

I encountered an issue that is causing me to receive the following error message: TypeError: Cannot read property 'sum' of undefined How can this be resolved? function calculator(firstNumber) { var result = firstNumber; function sum() ...

Conceal player controls for HTML videos on iOS devices

How can I hide the video player controls in Windows and Android, they are hidden but still visible on iOS. I have tried different methods but can't seem to hide them. Here is what it looks like on iOS: https://i.sstatic.net/Uwrg3.png Here is my code ...

With a tree arrangement flanking the Transfer module on either side

I have successfully implemented the antd's Transfer component using the examples provided in the documentation. I was able to create a tree transfer box that looks like this: https://i.sstatic.net/OEPPK.png However, I am wondering if there is a way t ...

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Within my Next.js project, I have successfully implemented a custom hook and component. The functionality works smoothly as each section opens independently without interfering with others, which is great. However, there are two issues that I am facing. Fi ...

A guide on effectively testing the value of Object.constructor using Jasmine and minimizing redundancy in the it statements for AngularJS

In my AngularJS application, I have defined an object model like this: .factory('Watermark', function () { // Constructor, with a class name // Assumption: the backend provides us with a topic or not! function Watermark(content, tit ...

Trouble with the drop-down menu displaying "string:2" in an AngularJS application

Currently, I am utilizing AngularJS ng-model to choose the value from a drop-down menu. Additionally, I am implementing datatable for organizing the columns. <select id="{{user.id}}" ng-model="user.commit" name="options" ng-change="update_commit_level ...

I am in search of a reporting tool to enhance the analysis and insights for my project

In my MySQL database, I have established one-to-many relationships structured like this: Parent --> Child 1 --> Child 2 --> Child 3. Each parent entry can have zero or multiple child entries. I encountered an issue with Reports Designer 3.0 wher ...

What is the best way to switch out the characters 'a' and 'b' in a given string?

Let's say we have the following text. Lorem ipsum dolor sit amet The revised text should look like this: merol merol merol merol Is there a predefined function in JavaScript that can help us replace characters like this within a string? ...

Error in TypeScript detected for an undefined value that was previously verified

I have developed a function that can add an item to an array or update an item at a specific index if provided. Utilizing TypeScript, I have encountered a peculiar behavior that is puzzling me. Here is the Playground Link. This simple TypeScript functio ...

Having trouble deciphering mathematical formulas while editing content on ckeditor

While using math formulas in CKEditor, I noticed that when I insert new content via textarea, the formulas are displayed correctly. However, when I go back to edit the content, the text formulas do not display as before. This is the source code I am using ...

How do parameters get passed in the URL automatically after submitting a form?

I am currently working with MVC 4 and have created a single view that contains a basic HTML form for adding employee data to a table using a web API method call via AJAX in Visual Studio 2013. In my code, I am not passing any parameters in the URL, but th ...

Adding a URL link to a mentioned user from angular2-mentions within an Angular 4 application can be achieved in the following way:

Need help with adding a URL RouterLink to mention a user using angular2-mentions. This is the code snippet I currently have: <div class="col-sm-12"> <input type="text" [mention]="contactNames" [mentionConfig]="{triggerChar:'@',maxI ...

Is there a way to retrieve the widths of several <span> elements at once?

Having a few <span> elements generated dynamically, I need to find out their combined width. Wrapping them in a <div> and using alert($("#spanWrap").width()); resulted in the container's width instead of that of the <span> elements. ...

Setting up Stylelint in a Vue 3 app with VSCode to automatically lint on save

I am looking to perform linting on my scss files and scss scope within .vue components. Here is what my configuration looks like in stylelint.config: module.exports = { extends: [ 'stylelint-config-standard', 'stylelint-config-rece ...

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...