我正在从 php 迁移到 asp.net。我创建了一个简单的页面，其中包含一个下拉列表、一个文本区域 (tinyMCE) 和一个用于将文本保存到数据库中的按钮。保存按钮会打开一个引导模式，以输入我要保存的表单的名称。
@model FormsCreator.Models.ModelView.ListFormsCreator
@{
Layout = "";
}
<html>
<head>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/tinymce/tinymce.min.js"></script>
<script src="~/Scripts/JS/formsCreator.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form>
<br/><br />
<div class="form-group col-sm-3">
@Html.DropDownListFor(m => m.Forms, new SelectList(Model.Forms, "FormsCreatorID", "FormName"),
"Select a Form", new { @class = "form-control" })
</div>
<br/><br/>
<div class="form-group col-sm-12">
<textarea class="form-control" id="mytextarea" name="mytextarea">Next, start a free trial!</textarea>
</div>
<div class="form-group col-sm-12">
<button id="btnSaveForms" align="center" type="button" class="btn btn-primary" onclick="openModal();">Save</button>
</div>
</form>
<div class="modal fade" id="saveForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button>
</div>
<div class="modal-body">
<input type="text" id="formName" name="formName" required />
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-success" type="button" onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'">Save</button>
<button data-dismiss="modal" class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>
<script>
function openModal() {
$("#saveForm").modal();
}
</script>
</body>
</html>
一切正常，但如何在我的 Controller SaveForm 中从 View 中获取 mytextarea 和 formName 的值？所以，我可以将其保存到数据库中。顺便说一句，我可能以错误的方式这样做，所以如果有更好的方法请告诉我。
Controller :
public ActionResult SaveFormPrintable(){
return View();
}
谢谢
最佳答案
模式中当前的保存按钮包含此代码
onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'"
因此，当用户单击该按钮时，它将执行代码 window.location.href='/FormsCreator/SaveForm;，该代码执行 GET 调用(重定向到该 URL。
您需要的是表单提交。您可以将表单名称的输入与表单下拉列表和文本区域一起保留为隐藏的输入元素。在模式对话框内有另一个文本框，用于从用户读取表单名称，当用户单击“保存”按钮时，读取该文本框的值并更新我们实际表单内的 formname 隐藏输入元素，该元素的 action 属性设置为您的HttpPost 操作方法。
<form action="@Url.Action("SaveForm", "FormsCreator")" method="post">
<textarea class="form-control" id="mytextarea"
name="mytextarea">Next, start a free trial!</textarea>
<input type="hidden" id="formName" name="formName" required />
<button type="button" class="btn btn-primary" onclick="openModal();">Save</button>
</form>
<div class="modal fade" id="saveForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close"
type="button">X</button>
</div>
<div class="modal-body">
<input type="text" id="formNameTemp" required />
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn" id="btn-save"
type="button">Save</button>
<button data-dismiss="modal" class="btn" type="button">Close</button>
</div>
</div>
</div>
</div>
并使用 javscript 代码，监听模式对话框上保存按钮上的 click 事件，读取值并将其设置为表单内的隐藏输入，然后触发表单提交事件。
$(document).ready(function () {
$("#btn-save").click(function(e) {
//Read the value from input in modal dialog
var v = $("#formNameTemp").val();
// Set the value to the hidden input in form and submit the form
$("#formName").val(v).closest("form").submit();
});
});
现在，由于表单将提交到 Save Form 操作方法，因此您可以使用相同的 View 模型作为方法参数。
[HttpPost]
public ActionResult SaveForm(YourFormContentViewModel model)
{
// to do : return something
}
现在这是一个普通的表单提交，您可以更新它以执行 ajax post 如果需要。有大量关于堆栈溢出的示例解释了如何做到这一点。
关于javascript - ASP.NET MVC 中的按钮提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47681420/