如何在一种形式中使用两种不同的动作方法?
How to use two different action methods in one form?
所以我试图将表单记录保存到 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>
型号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; }
}
控制器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");
}
}
上传文件时,尝试onclick事件,而不是在JS中提交和处理。
根据描述,我建议您可以使用 ajax 添加另一个按钮将文件上传到 action 方法中,而不是使用表单提交按钮。
您可以在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>
}
结果:
操作方法:
所以我试图将表单记录保存到 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>
型号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; }
}
控制器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");
}
}
上传文件时,尝试onclick事件,而不是在JS中提交和处理。
根据描述,我建议您可以使用 ajax 添加另一个按钮将文件上传到 action 方法中,而不是使用表单提交按钮。
您可以在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>
}
结果:
操作方法: