如何使用单选按钮更改事件提交AJAX表单

本文关键字：提交 AJAX 表单 事件 何使用 单选按钮 | 更新日期: 2023-09-27 18:22:17

我有一个AJAX表单&我想在单选按钮更改事件上提交它。

AJAX形式：

     @using (Ajax.BeginForm("Vote", "Rate", null ,
                       new AjaxOptions
                           {
                               InsertionMode = InsertionMode.Replace,
                               HttpMethod = "GET",
                               OnFailure = "searchFailed",
                               LoadingElementId = "ajax-loader",
                               UpdateTargetId = "searchresults",
                           },new { id = "voteForm" }))
                {
                <input type="radio" name="Stars" value="1">
                <input type="radio" name="Stars" value="2">
                <input type="radio" name="Stars" value="3">
                }

我使用了以下代码，但它不起作用。

       $("#voteForm").ajaxSubmit({ url: '/Vote/Vote', type: 'get' });

如何使用单选按钮更改事件提交AJAX表单

试试这个：

<script type="text/javascript">
    $(function () {
        $("input[name='Stars']").change(function() {
            $("#voteForm").ajaxSubmit({ url: '/Vote/Vote', type: 'get' });
        });
    });
</script>

@Babul-Mirdha Ajax.BeginForm是一种运行良好的机制，但自定义与标准非常不同的特定提交行为会让人头疼。我想现在你知道了。

每当我（以及许多其他开发人员也会这么说）需要开发一些自定义行为时，我都会使用基本的Jquery。像这样：

在您的控制器中：

public JsonResult Vote(YourModel model)
{
    // do something:
    // model.Stars
    return Json(new { message = "Success" }, JsonRequestBehavior.AllowGet);
}

您的型号：

public class YourModel
{
    // ...
    public int Stars { get; set; }
}

你的观点：

<script type="text/javascript">
    $(function () {
        $("#voteForm input[name=Stars]").change(function () {
            $.ajax({
                url: '/Home/Vote',
                type: 'GET',
                data: $("form#voteForm").serialize(),
                dataType: 'json',
                success: function (data) {
                    alert(data.message);
                },
                error: function (jq, message) {
                    alert(message);
                }
            });
        });
    });
</script>
<form id="voteForm" action="@Url.Action("Vote")">
    <input type="radio" name="Stars" value="1" checked="checked"/>
    <input type="radio" name="Stars" value="2" />
    <input type="radio" name="Stars" value="3" />
    <input type="text" name="Tbx" />
</form>

这样你就可以完全控制自己的行为。

相关文章：