ASP.NET MVC 中的按钮提交答案

【问题标题】：Button submit in ASP.NET MVCASP.NET MVC 中的按钮提交
【发布时间】：2017-12-06 18:46:47
【问题描述】：

我正在从 php 迁移到 asp.net。我创建了一个简单的页面，其中包含一个下拉菜单、一个 textarea (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>

一切正常，但是如何在我的控制器 SaveForm 中从视图中获取 mytextarea 和 formName 的值？所以，我可以将它保存到数据库中。顺便说一句，我可能以错误的方式做这件事，所以如果有更好的方法请告诉我。

控制器：

public ActionResult SaveFormPrintable(){
    return View();
}

谢谢

【问题讨论】：

您的 onclick 只是导航到一个没有任何参数“/FormsCreator/SaveForm”的 url。最简单的做法是添加一个带有提交按钮的表单。
我想在向控制器提交/发送数据之前打开询问表单名称的模式
如果您有多个表单并且模式用于提交其中一个表单，那么您需要识别您没有的表单，然后使用 JavaScript 提交 @ 987654323@
这里有很多潜在的误解。您有 <form>、hmtl 元素和 Form 您的模型。重命名您的模型和/或澄清您的问题。

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

模态框内的当前保存按钮有此代码

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 操作方法，您可以使用与方法参数相同的视图模型。

[HttpPost]
public ActionResult SaveForm(YourFormContentViewModel model)
{
  // to do : return something
}

现在这是一个普通的表单提交，你可以更新它来做一个 ajax 发布如果需要。有大量关于堆栈溢出的示例解释了如何做到这一点。

【讨论】：

完美！它实际上就像我以前在 PHP 中所做的那样工作。但是，在 PHP 中，我必须使用 AJAX 将数据发送到类（控制器）。谢谢！！！
如果需要，您可以将正常提交更改为 ajax 提交。只需序列化表单内容并使用$.post
我是 .NET 的新手，但我有使用 JQuery 和 AJAX 的前端经验。我不确定这是否是在 .NET 中实现的正确/好方法
查看stackoverflow.com/questions/47564719/… 中的最后一段代码（覆盖submit 事件并进行ajax 调用）
是的...这段代码正是我用来做的。调用 preventDefault，操作数据并通过 AJAX POST 发送。这是在.NET 中开发的好方法吗？如果是这样，.NET 的优势是什么？无论如何，如果我们避开这个话题，请忽略我的问题，哈哈