ASP.NET MVC 中的按钮提交

Question

我正在从 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();
}

谢谢

Answer 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 发布。 有很多关于堆栈溢出的例子解释了如何做到这一点。

ASP.NET MVC 中的按钮提交

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-12-06 19:03:58

ASP.NET MVC 中的按钮提交

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-12-06 19:03:58

解决方案1
2 已采纳 2017-12-06 19:03:58