Question

I am using jquery form plugin for file upload . my question is how to access the jsonresult from the controller in the script part of view using jquery.
my script is as

 $(function() {
       $("#uploadForm").ajaxForm({
               iframe: true,
               dataType: "json",
               contentType: "application/json; charset=utf-8",
                target :"myTable",
               url: "/UploadFile/Index",
             success: function(response,statusText)  {
        var jsonObject= result.childNodes[0].innerHTML;
       for (i = 0; i < response.length; i++) {
               alert(response.filesList[i]);
                   $('#myTable').append('<tr><td> <a href=' + response.filesList[i] + '></a> td></tr>');
               }
        }
    }
      })
 })

and in my controller takes filename and adds to static list type string filesList and returns as jsonresult type

 [AcceptVerbs(HttpVerbs.Post)]
            public JsonResult Index(HttpPostedFileBase file)
            {
    string filename = file.FileName;
                filesList.Add(filename);
   return new JsonResult
        { ContentType = "text/plain",
            Data = Json(new
                {
                 filesList = filesList.Select(x => "File uploaded successfully " + x)
                }, JsonRequestBehavior.AllowGet)
        };
}

But i think it is wrong representation of handling json result in script, what i want it to do is append filesList to table ,for that how to handle jsonresult object in script.

thanking you,
michaeld

Answer 1

If i understood your problem, first you should rewrite controller. Why would you need text/html when returning json? And string + list of strings is impossible, i guess you want the list of the messages and file names

    [AcceptVerbs(HttpVerbs.Post)]
public JsonResult Index(HttpPostedFileBase file)
            {
                List<String> fileNames = new List<string>();

            fileNames.Add(file.FileName);


            return Json(new
            {
                FileNames = fileNames.Select(x=> "File uploaded successfully " + x)
            }, JsonRequestBehavior.AllowGet);
}

Then on client side, directly use the result object, as you set the dataType = ‘json’, it is already the json object

success: function(result) {
       for (i = 0; i < result.FileNames; i++) {
       $('#myTable').append('<tr><td> <a href=' + result.FileNames[i] + '></a> td></tr>');
        }
    }