Fatal编程技术网
  • javascript/
  • Javascript ASP.NET MVC中的按钮提交

Javascript ASP.NET MVC中的按钮提交

javascript jquery asp.net asp.net-mvc

Javascript ASP.NET MVC中的按钮提交,javascript,jquery,asp.net,asp.net-mvc,Javascript,Jquery,Asp.net,Asp.net Mvc,我正在从php迁移到asp.net。我创建了一个简单的页面，其中包含一个下拉列表、一个文本区域（tinyMCE）和一个按钮，用于将文本保存到数据库中。“保存”按钮打开一个引导模式，输入要保存的表单的名称 @model FormsCreator.Models.ModelView.ListFormsCreator @{ Layout = ""; } <html> <head> <script src="~/Scripts/jquery-3.2.1.mi

我正在从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>
谢谢，您当前在模式中的保存按钮有此代码

onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'"
因此，当用户单击按钮时，它将执行代码
window.location.href='/FormsCreator/SaveForm，执行GET调用（重定向到该url）

您需要的是表单提交。您可以将表单名称的输入作为隐藏输入元素与表单下拉列表和文本区域一起保存在表单中。在模式对话框中使用另一个文本框从用户处读取表单名称，当用户单击保存按钮时，读取该文本框的值并更新表单名称隐藏n实际表单中的input元素，它将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>


现在，由于表单将提交到
Save
表单操作方法，因此可以使用与方法参数相同的视图模型


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



现在，这是一个普通表单提交，如果需要，您可以更新它以执行ajax post。堆栈溢出上有大量示例说明了如何执行此操作。
您当前在模式中的保存按钮有以下代码


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


因此，当用户单击该按钮时，它将执行代码
window.location.href='/FormsCreator/SaveForm；
，执行GET调用（重定向到该url）

您需要的是表单提交。您可以将表单名称的输入作为隐藏输入元素与表单下拉列表和文本区域一起保存在表单中。在模式对话框中使用另一个文本框从用户处读取表单名称，当用户单击保存按钮时，读取该文本框的值并更新表单名称隐藏n实际表单中的input元素，它将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>


现在，由于表单将提交到
Save
表单操作方法，因此可以使用与方法参数相同的视图模型


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



现在，这是一个普通的表单提交，如果需要，您可以更新它以执行ajax post。有大量关于堆栈溢出的示例解释如何执行此操作。
您的onclick只是导航到一个没有任何参数的url“/FormsCreator/SaveForm”。最简单的方法是添加一个带有提交按钮的表单。我想在向控制员提交/发送数据之前打开模式，询问表单名称。如果您有多个表单，并且该模式用于提交其中一个表单，那么您需要识别您没有的表单，并使用JavaScript提交
$（#formId”）.submit（）
这里可能会有很多误解。你有
、hmtl元素和
表单
你的模型。重命名你的模型和/或澄清你的问题。你的onclick只是导航到一个没有任何参数的url“/FormsCreator/SaveForm”。最简单的方法是添加一个带有提交按钮的表单。我想在向控制员提交/发送数据之前打开模式，询问表单名称。如果您有多个表单，并且该模式用于提交其中一个表单，那么您需要识别您没有的表单，并使用JavaScript提交
$（“#formId”）.submit（）
这里有很多误解的可能性。你有
、hmtl元素和
表单
你的模型。重命名你的模型和/或澄清你的问题。太好了！它实际上像我在PHP中使用的旧方法一样工作。但是，在PHP中，我必须使用AJAX将数据发送到类（控制器）。谢谢！！！如果需要，您可以将普通提交更改为ajax提交。只需序列化表单内容并使用
$。post
我是.NET新手，但我在前端使用JQuery和ajax方面有经验。我不确定这是否是在.NET中实现的正确/好方法请查看中的最后一段代码（覆盖
submit
事件并进行ajax调用）是的…这段代码正是我用来做的。调用preventDefault，操作数据并通过AJAX POST发送。这是在.NET中开发的一种好方法吗？如果是，那么.NET的优点是什么？不管怎样，如果我们回避这个主题，请忽略我的问题！它实际上像我在PHP中使用的旧方法一样工作。然而，在PHP我必须使用AJAX将数据发送到类（控制器）。谢谢！！！如果需要，您可以将普通提交更改为ajax提交。只需序列化表单内容并使用
$。post
我是.NET新手，但我在前端使用JQuery和ajax方面有经验。我不确定这是否是在.NET中实现的正确/好方法请查看中的最后一段代码（覆盖
submit
事件并进行ajax调用）是的…这段代码正是我用来做的。调用默认值，操作数据并通过ajax POST发送。这是在.NET中开发的一种好方法吗？如果是，那么.NET的优点是什么？无论如何，如果我们回避这个主题，请忽略我的问题lol