将表单更改为Ajax或Jquery表单-MVC

我应该更改哪些部分以使表单基于Ajax还是基于JQuery。 （根据您在Ajax或JQuery之间的推荐） 代码将如何处理更改

这是密码

    @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { name = "send-contact", 
      id = "contactform1", @class="validateform" }))
    {       
          @Html.AntiForgeryToken()
          if (!String.IsNullOrEmpty(@ViewBag.SendResultMessage)) 
           {                
               <text>
                  @section CustomScripts
                  {
                      <script type="text/javascript">
                          $("#myModal").Show({ ...});
                      </script>
                  }
               </text>
           } 
           @Html.TextBoxFor(m => m.Name)                                
           <div class="validation">@Html.ValidationMessageFor(m => m.Name)</div>
           <button class="b.." id="btnSubmit" type="submit">Submit message</button>
    }
</div>

@使用（Html.BeginForm（“Contact”，“Home”，FormMethod.Post，new{name=“send Contact”，
id=“contactform1”，@class=“validateform”}）
{       
@Html.AntiForgeryToken（）
如果（！String.IsNullOrEmpty（@ViewBag.SendResultMessage））
{                
@部分自定义脚本
{
$（“#myModal”）.Show（{…}）；
}
} 
@Html.TextBoxFor（m=>m.Name）
@Html.ValidationMessageFor（m=>m.Name）
提交消息
}

作为一个说明，这里我还想显示一个“模式对话框”，如果使用Ajax，应该将什么设置为

UpdateTargetId

---

非常感谢您的帮助。

我想您是在谈论使用

Ajax.BeginForm

还是使用JQuery来Ajaxify表单？ 第一种方法不推荐，因为它相当有限，JQuery方法更常见，也更灵活

您只需要在js脚本标记中添加一点JQuery，如下所示

    $(function () {
        $('#contactform1').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    //Alert success or update data on page
                    //for example $('#myModal').html(result)
                },
                error: function (result, textStatus, lerror) {
                    //Alert for errors
                }
            });

            return false;
        });
    });

这里要做的是通过JQuery钩住表单的提交事件，然后使用JQuery的ajax方法进行提交，并通过

return false防止表单的定期提交

，注意

this.action

，

this.method

的用法，它允许您通过直接从表单本身获取url和post方法（GET或post）来保持您的

Html.BeginForm

。更多信息

请注意，您还必须更改控制器中的操作，以便只为您的模式返回一些html（使用显示模板可以很好地实现这一点），json对象还可以使用额外的信息。 下面是我自己的一段代码的摘录，该代码返回搜索功能的显示模板的html，这将为您提供所需操作的逻辑

    /*Meant to be called by ajax*/
    [HttpPost]
    public ActionResult fetchInvoicesHistory(FormCollection input)
    {
        string Quarter = input["filQuarters"];

        var viewModels = InvoicePerQuarter(Quarter);

        return PartialView("DisplayTemplates/InvoiceTable",viewModels.ToList());
    }

如果您想尝试

Ajax.BeginForm

请记住在AjaxOption选项中只输入javascript函数的名称（无括号，无分号），如下所示：

@using (Ajax.BeginForm(new AjaxOptions {
        HttpMethod = "POST",
        OnSuccess = "SaveSucces",
        OnFailure = "handleAjaxError"
}))

---

我更喜欢推荐的方法，所以第二个表单（JQuery），感谢您提供的信息，现在我正在阅读，那么“表单代码”本身呢？是否也有变化？可能是答案，+1已经用于参与，您是指Html.beginform吗？对于我给您的代码，这不需要更改，但是控制器在表单点上的操作可能需要更改，ajax通过JQuery支持success函数中的result参数的多种类型，在您的情况下，由于您希望在模式中显示一些数据，我建议从操作返回一些html，通过PartialView方法。我会在上面编辑我的答案这里添加了一点我自己的代码，这样你可以更好地理解我的意思，把它标记为答案，因为你的帖子会在这方面帮助我，我应该一直玩到它工作为止，你说的是返回一个部分视图而不是视图，我想显示一个“模式对话框”，你提到的将运行代码放在“成功”下面的对话框方法。我说的对吗？感谢您的帮助哦，您可以使用

Person

作为参数的类型，在我的方法I

FormCollection

中，因为我不想创建一个额外的模型来接收筛选值，但是您需要更改

返回视图（Person）

因为

视图

方法意味着生成一个完整的HTML页面，而

部分视图

意味着只生成一点HTML，顾名思义