0

我应该更改哪些部分以使我的表单基于 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>

作为注释，这里我想显示一个“模态对话框”，如果使用 Ajax，应该设置UpdateTargetId什么？

非常感谢任何帮助。

4

1 回答 1

1

我想您是在谈论使用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 连接到表单的 submit 事件，然后使用 JQuery 的 ajax 方法进行提交并防止表单的常规提交 via return false;，注意使用this.action，this.method这可以让您保持Html.BeginForm不变直接从表单本身获取 url 和 post 方法（GET 或 POST）。更多信息在这里

请注意，您还必须更改控制器中的操作以仅返回一些 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记住仅将 javascript 函数的名称放在 AjaxOption 选项中（无括号，无分号），如下所示：

@using (Ajax.BeginForm(new AjaxOptions {
        HttpMethod = "POST",
        OnSuccess = "SaveSucces",
        OnFailure = "handleAjaxError"
}))
于 2013-08-02T11:44:43.393 回答