[RESOLVED]pass file as parameter using jquery in asp .net mvc

Hello,

In order to import data from file excel and display data in ascx page, I want to pass a file as a parameter to the controller via a jQuery function here is my code: 

view:

<% Using (Html.BeginForm (new {enctype = "multipart / form-data"}))
                     {%>
                         <input type = "file" name = "file" />
                         <input type = "button" value = "OK" onclick = "Import (); return false;" />
                     <%}%>

jquery:

Import function () {
     var formData = new FormData ();
     formData = do something to get the file
     var Dialog = new MessageBox ();
     $ .ajax ({
         the type: 'POST'
         url: "/ Controller / Import"
         data: formData,
         cache: false,
         contentType: false,
         processData: false,
         success: function (View) {
             alert ("success");
             $ ("# DivList"). Empty ()
             $ ("# mainPageMainContent") append (View).;
         },
         complete: function () {
             ClosePatienter ();
             Dialog.MsgClose ();
         }
     });
}

Controller:

public ActionResult Import(HttpPostedFileBase file)
{
      ......
      return PartialView("OtherView", model);
}

When I execute this, file in my controller is null.

Someone can help me, thank you in advance

You can try making the following adjustments to your code as seen in the example below (ensuring your Controller Action is decorated with [HttpPost]) :

Example View

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery Reference -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // When your form is submitted
            $("form").submit(function (e) {
                // Prevent the default behavior
                e.preventDefault();

                // Serialize your form
                var formData = new FormData($(this)[0]);

                // Make your POST
                $ .ajax ({
                    type: 'POST',
                    url: "<%= Url.Action("Action","Controller") %>",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (view) {
                        alert ("success");
                    },
                    complete: function () {
                        alert("complete");
                    }
                });
            });
        })
    </script>
</head>
<body>
        <!-- Example Form -->
        <form enctype="multipart/form-data">
            <!-- Example file element -->
            <input type="file" name="file" />
            <input type="submit" />
        </form>
</body>
</html>

Example Controller

namespace Testing_Application.Controllers
{
    public class PageController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public void Import(HttpPostedFileBase file)
        {
            Console.WriteLine(file);
        }
    }
}

In the above example, the file parameter is populated as it would be expected. If you plan on handling this extensively, it can sometimes be easier to either use a specific file-uploading library to handle this or using the default form submittal behavior.

Thank you for
your reply
, I tried but the file is
still empty in controller.

Could you consider posting what your entire Controller and Views look like?

I’m having no issues at all using the example that I provided above and you can see that the File is being populated as expected when the button is clicked below :

Are you sure that your particular AJAX call is actually being executed (you can try placing an alert in the code that triggers it)? You might want to use the Developer Tools (F12) within your browser to ensure that this is actually occurring and
that you aren’t encountering any errors.

If these issues still persist, you might want to consider using a specific jQuery or Javascript library for uploading files like one of those mentioned below :

If that is the case, then you may want to consider using one of the following popular uploading libraries or tools out there :

  • NeatUpload - I’ve used this within several different applications and had success.
    The AJAX FileUpload Control
     -
     A very popular and easily integrated Upload option from the AJAX Control Toolkit.
  • Uploadify - One of the most popular and widely used Uploading libraries that supports nearly every browser and lots of cool features like multiple uploading, progress notifications etc. You can
    find a tutorial on using it within ASP.NET here.
  • PLUpload 
  • SWFUpload
  • ActiveX File Uploader

Finally. It works
thank you Laughing

the first time
I tried to
separate the jquery
party in a separate  .js file.

Leave a Reply