How to use two different action methods in one form?

Question

So I'm trying to save a form records to the SQL server database. The problem is that in the form I have to upload multiple files with a button and one action is about file upload and the other action method is about saving the fields of the form in the database. I don't know how to solve this

Modal - form

 <div class="modal-body">
                @using (Html.BeginForm("Dokument", "NgarkoDokument", FormMethod.Post, new { enctype = "mulptiple/form-data" }))
                {
                <div class="form-group">
                    <label for="exampleFormControlSelect1">Lloji i dokumentit</label><br />
                    <select title="Lloji i dokumentit" name="lloji" class="form-control col-md-3 box" id="tipiDropdown"> </select>


                    <input type="button" title="Ngarko dokument" name="ngarko" value="Ngarko" id="uploadPop" class="btn btn-info col-md-3" onclick="document.getElementById('file').click();" />
                    <input type="file" onchange="javascript:updateList()" multiple="multiple" style="display:none;" id="file" name="postedFiles" />
                    <div id="fileList"></div>
                </div>
                    <br /><br />

                          <div class="form-group">
                              <label for="formGroupExampleInput">Fusha indeksimi</label> <br />
                              @*<input title="Indeksimi dokumentit" id="indeksimi" class="form-control col-md-3" type="text" name="indeksimi" placeholder="indeksimi" required />*@
                              @Html.TextBoxFor(a => a.Fusha_Indeksimit.Emri_Indeksimit, new { @class = "form-control", @placeholder = "indeksimi" })

                              @* <button title="Shto indeksim" id="modalPlus" type="submit" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i></button>*@
       

                          </div>

                    <label for="formGroupExampleInput">Vendndodhja fizike e dokumentit</label><br>
                    <div id="zyraModal" class="form-group col-md-4">
                        @*<input title="Zyra fizike" id="zyra" class="form-control" type="text" name="zyra" placeholder="Zyra" />*@
                        @Html.TextBoxFor(a => a.Vendndodhja_fizike.Zyra, new { @class = "form-control", @placeholder = "Zyra" })
                    </div>

                    <div class="form-group col-md-4">
                        @* <input title="Kutia fizike" id="kutia" class="form-control" type="number" name="kutia" placeholder="Nr i kutisë" />*@
                        @Html.TextBoxFor(a => a.Vendndodhja_fizike.Nr_Kutise, new { @class = "form-control", @placeholder = "Nr i kutisë" })
                    </div>

                    <div class="form-group col-md-4">
                        @* <input title="Rafti fizik" id="rafti" class="form-control" type="text" name="rafti" placeholder="Rafti" />*@
                        @Html.TextBoxFor(a => a.Vendndodhja_fizike.Rafti, new { @class = "form-control", @placeholder = "Rafti" })
                    </div>

                    <br /><br />

                    <div class="row" id="ruaj">
                        <button title="Ruaj dokumentin" type="submit" class="btn btn-success">Ruaj</button>
                    </div>
                }
            </div>

Model class

namespace Archieve1.Models
{
    public class NgarkoDokument
    {
        public Dokumenti Dokumenti { get; set; }
        public Fusha_Indeksimit Fusha_Indeksimit { get; set; }
        public Vendndodhja_Fizike Vendndodhja_fizike { get; set; }
        public Tipi Tipi { get; set; }

        
    }

controller class

public class NgarkoDokumentController : Controller
    {

        public ActionResult Dokument()
        {
             return View();
        }
        // GET: NgarkoDokument

            
        public ActionResult GetTipi()
        {
            Test_kristiEntities db = new Test_kristiEntities();
            return Json(db.Tipi.Select(x => new
            {
                Id_Tipi = x.Id_Tipi,
                Emri_llojit = x.Emri_llojit
            }).ToList(), JsonRequestBehavior.AllowGet);

            // return View();
        }

        [HttpPost]
        public ActionResult Dokument(List<HttpPostedFileBase> postedFiles)
        {
            string path = Server.MapPath("~/App_Data/File/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            foreach (HttpPostedFileBase postedFile in postedFiles)
            {
                if (postedFile != null)
                {
                    string fileName = Path.GetFileName(postedFile.FileName);
                    postedFile.SaveAs(path + fileName);
                    ViewBag.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
                }
            }

            return View();
        }

        public ActionResult Dokument(NgarkoDokument model)
        {
            try
            {
                Test_kristiEntities db = new Test_kristiEntities();

                Tipi tipi = new Tipi();
                tipi.Emri_llojit = model.Tipi.Emri_llojit;

                db.Tipi.Add(tipi);

                Vendndodhja_Fizike vendndodhja = new Vendndodhja_Fizike();
                vendndodhja.Zyra = model.Vendndodhja_fizike.Zyra;
                vendndodhja.Rafti = model.Vendndodhja_fizike.Rafti;
                vendndodhja.Nr_Kutise = model.Vendndodhja_fizike.Nr_Kutise;

                db.Vendndodhja_Fizike.Add(vendndodhja);

                Fusha_Indeksimit indeksimi = new Fusha_Indeksimit();
                indeksimi.Emri_Indeksimit = model.Fusha_Indeksimit.Emri_Indeksimit;

                db.Fusha_Indeksimit.Add(indeksimi);

                Dokumenti dok = new Dokumenti();
                dok.Emer = model.Dokumenti.Emer;

                db.Dokumenti.Add(dok);

                db.SaveChanges();

                //int lastUserId = dok.UserID;
            }
            catch(Exception ex)
            {
                throw ex;
            }

            return RedirectToAction("Dokument");
        }
      
    }

Answer 1

According to description, I suggest you could add another button to upload the file into the action method by using ajax instead of using form submit button.

You could add the upload button behind the uploadPop button and then using jquery ajax to upload.

More details, you could refer to below codes:

View:

 @* ... otherview codes*@
<input type="button" title="Ngarko dokument" name="ngarko" value="Ngarko" id="uploadPop" class="btn btn-info col-md-3" onclick="document.getElementById('file').click();" />
<input type="file" onchange="javascript:updateList()" multiple="multiple" style="display:none;" id="file" name="postedFiles" />
<input type="button" title= "UploadButton" name="ngarko2" value="Upload" id="upload" class="btn btn-info col-md-3"  />


<div id="fileList"></div>
@* ... otherview codes*@

@section scripts{
    <script>
        $(function () {
            $("#upload").click(function () {

                var input = document.getElementById("file");
                var files = input.files;
                var formData = new FormData();
                for (var i = 0; i != files.length; i++) {
                    formData.append("postedFiles", files[i]);
                }

                $.ajax(
                    {
                        url: "/NgarkoDokument/Dokument",
                        data: formData,
                        processData: false,
                        contentType: false,
                        type: "POST",
                        success: function (data) {
                            alert("Files Uploaded!");
                        }
                    }
                );
            });
        });
    </script>


}

Result:

Actionmethod: