javascriptc#asp.netasp.net-mvckendo-upload

How to call javascript after file upload via kendo.upload and Form in MVC?


I'm trying to submit a form where one of it's properties is List of files.

After the ActionResult has completed successfully i need to show a success message that has to be triggered via Javascript.

If i use Ajax.Begin form the javascript message is shown, but the files are not sent to the ActionResult, on the other hand if I use Html.BeginForm the files are sent, but I'm not able to call the javascript function and therefore I'm not able to trigger my success message.

here 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
     }
}

Thanks in advance :)

Schewns


Solution

  • After some digging and trying some approaches I went for this solution:

    I downloaded this plugin:

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

    After installation, I added this javascript function:

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

    And it worked like a charm. Thanks for the help :)