MVC 使用 jquery 代替提交按钮

Posted 2023-03-10

【中文标题】MVC 使用 jquery 代替提交按钮

【英文标题】：MVC use jquery instead of submit button

【发布时间】：2016-04-05 13:49:51

【问题描述】：

在我的页面上，我有一个这样的部分：

using (html.BeginForm("AddSubTor", "Maintor", FormMethod.Post, htmlAttributes: new  ID = "frmSubTors" ))

  @Html.AntiForgeryToken()

  @Html.Partial("_SublistPartial")

  <div class="row" style="margin-top: 15px;">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center ">
      @* submit button here *@
      <input type="submit" class="btn btn-default" value="Add"  />
    </div>
  </div>
  @Html.ValidationSummary(true, "", new  @class = "text-danger" )

我不会使用提交按钮，而是将其替换为看起来像按钮的图像，我是否也可以在 jquery 函数中执行相同的提交。就像在那个按钮状图像的点击事件中一样？我提交的数据还会被提交吗？

我想这样做的原因是在部分中我有两个单选按钮。在两者上，我都有一些用于检索数据和其他内容的 Jquery 代码。

如果我使用一个简单的提交按钮，我可以设置单选按钮，但没有点击事件，因此不会检索数据并且没有完成其他事情。 因此，如果我可以使用 Jquery，那么我可以简单地调用单选按钮单击事件调用的函数，从而获取我的数据。

[编辑] 我正在寻找这样的东西：

$.Ajax(
  url: 'controller/action',
  type: 'POST',
  success: function(data) 
    $('#frmSubTors').html(data);
  
).done(function() 
  // do my other stuff here
);

这也行吗？

【问题讨论】：

我不遵循你的推理。 type="submit" 按钮不需要onclick 事件，它会将表单值发布到您的操作中。你最后一段有点含糊。

更新问题

【参考方案1】：

是的，如果您使用$('#frmSubTors').submit()，表单将提交所有字段。

【参考方案2】：

是的，您可以在单击图像时使用 jQuery 提交表单。 用图片替换提交按钮并给它一个id。

<div class="col-sm-12 col-md-12 col-lg-12 text-center ">
      @* submit button here *@
      <img id="myImage" src="blah.jpg" />
</div>

然后让 jQuery 响应点击事件：

$(document).ready(function() 
    $("#myImage").click(function() 
        $("#frmSubTors").submit();
    

更多 jQuery 的点击事件信息：http://www.w3schools.com/jquery/event_click.asp

【讨论】：

但是在提交完成并且部分更新后我可以做任何功能吗？与 .Ajax 一样，您有一个在返回数据后触发的 Done 事件，然后 Jquery 脚本继续执行。这里也可以吗？

【参考方案3】：

您可以使用图像事件提交表单。

$('img').on("click", function () 
    $('#frmSubTors').submit();
);

【参考方案4】：

您可以使用 ajax 提交form，如下所示。

$("#your_img_id").click(function () 
    $.ajax(
        type: 'POST',
        url: '/Maintor/AddSubTor',
        data: $(this).serialize(), //serializes the form's elements.
        success: function (data) 
            // do your other stuff here after succesful form submit
        
    );
);

如果您的form 有<input type="file">，请执行以下操作。

$("#your_img_id").click(function () 
    var formData = new FormData($('#frmSubTors')[0]);

    $.ajax(
        type: 'POST',
        url: '/Maintor/AddSubTor',
        data: formData,
        cache: false,
        contentType: false,
        processType: false,
        success: function(data) 
            // do your other stuff here after succesful form submit
        
   );
);

希望这会对你有所帮助。

【讨论】：

谢谢。这确实帮助了我一点。 formdata需要序列化，但后来我遇到了一个新问题，防伪令牌的东西。在这里找到了解决方案：***.com/questions/14473597/…