How to execute an action from a partial view using ASP.Net MVC?

Question

I have a problem executing an action from a partial view that is used inside another view.

I've tried this JQuery used to change the content of the div

$(document).ready(function () {
        //File Upload Button
        $(".fileUpload").click(function () {
            $.ajax({

                type: 'GET',
                url: '@Url.Action("FileUpload", "Dashboard")',
                data: { type: $(this).attr("data-type") },
                success: function (response) {
                    $(".content").html(response);
                },
                error: function () {
                    alert("Problem on uploading file");
                }

            });

        });
    });

And this the code under the controller to load the partial view.

public ActionResult FileUpload()
{
  return PartialView("~/Views/Dashboard/FileUpload.cshtml");
}

I've managed to run this code and show the partial view but I'm having a hard time now how to execute the action from that partial view.

I've added another action Fileload

[HttpPost]
public ActionResult FileLoad()
        {
             //some codes to execute
        }

That will be called by this partial view

@model Payout.Models.FundTransfer

@using (Html.BeginForm("FileLoad", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        <input type="file" name="Filepath" id="Filepath" />
    </div>
        <div>
            <input type="submit" name="submit" value="Submit" />
        </div>
}

And now I don't know what is the best way to execute that action. Do you have any suggestions?

Why don't you use the integrated in MVC way, by using AjaxForm... — st_stefanov, May 16 '19 at 06:11
Do you have a sample for me to be able to do what you're saying? — ikey, May 16 '19 at 06:37
https://stackoverflow.com/questions/17095443/how-to-use-simple-ajax-beginform-in-asp-net-mvc-4 — st_stefanov, May 16 '19 at 06:50
@st_stefanov You cannot use the MVC Ajax helper with files upload. — Mannan Bahelim, May 16 '19 at 07:08
@Mannan Bahelim what if I'll try to only pass the file path that was get from the partial view and access the file on the main view? Will it be possible? or if not, do you have any alternatives? — ikey, May 16 '19 at 07:13

score 1 · Accepted Answer · answered May 16 '19 at 09:27

Could you modify your code as below

$.ajax({
          url: '@Url.Action("FileUpload", "Dashboard")',
          type: "POST",
          processData: false,
          data: { type: $(this).attr("data-type") },
          dataType: "html",
          contentType: false,
          success: function (data) {
              $(".content").html(response);
          },
          error: function () {
              alert("Problem on uploading file");
          }
      });

score 0 · Answer 2 · answered May 16 '19 at 09:18

0

So what is the prompted error here?

Btw, your post action should be like this for asp.net core;

public ActionResult FileLoad(IFormFile Filepath)

or like this for classic asp.net;

public ActionResult FileLoad(HttpPostedFileBase Filepath)

answered May 16 '19 at 09:18

Onur

1
1

I've already did this but my problem is about executing the action on a partial view. – ikey May 17 '19 at 00:33

How to execute an action from a partial view using ASP.Net MVC?

2 Answers2