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
– st_stefanov, Commented May 16, 2019 at 6:11
Do you have a sample for me to be able to do what you're saying? — ikey
– ikey, Commented May 16, 2019 at 6:37
@st_stefanov You cannot use the MVC Ajax helper with files upload. — Mannan Bahelim
– Mannan Bahelim, Commented May 16, 2019 at 7: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
– ikey, Commented May 16, 2019 at 7:13

DevS · Accepted Answer · 2019-05-16 09:27:07Z

1

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");
          }
      });

answered May 16, 2019 at 9:27

DevS

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Onur · Accepted Answer · 2019-05-16 09:18:06Z

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, 2019 at 9:18

Onur

11 bronze badge

1 Comment

ikey Over a year ago

I've already did this but my problem is about executing the action on a partial view.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related