如何在一種形式中使用兩種不同的操作方法？

Question

所以我試圖將表單記錄保存到 SQL 服務器數據庫。 問題是在表單中我必須使用一個按鈕上傳多個文件，一個操作是關於文件上傳，另一種操作方法是將表單的字段保存在數據庫中。 我不知道如何解決這個問題

模態形式

 <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

上傳文件時，請嘗試 onclick 事件，而不是在 JS 中提交和處理。

Answer 2

根據描述，我建議您可以使用 ajax 而不是使用表單提交按鈕，添加另一個按鈕將文件上傳到操作方法中。

您可以在 uploadPop 按鈕后面添加上傳按鈕，然后使用 jquery ajax 進行上傳。

更多細節，您可以參考以下代碼：

看法：

 @* ... 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>


}

結果：

行動方法：