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>

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

的Controler：

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

由于

Answer 1

模态中的当前保存按钮具有此代码

onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'"

因此，当用户点击该按钮时，它将执行代码window.location.href='/FormsCreator/SaveForm;，该代码执行GET调用（重定向到该网址。

您需要的是表单提交。您可以将表单内的表单名称的输入与表单下拉列表和textarea一起保留为隐藏的输入元素。在模式对话框中有另一个文本框，用于从用户读取表单名称，当用户单击保存按钮时，读取该文本框的值并更新我们实际表单中的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代码，它在模态对话框的save按钮上监听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 enter code here Form操作方法，因此您可以使用与方法参数相同的视图模型。

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

现在这是正常的表单提交，您可以更新它以执行ajax帖子如果需要。有很多关于堆栈溢出的例子说明了如何做到这一点。

ASP.NET MVC中的按钮提交

1 个答案: