如何使用单选按钮更改事件提交AJAX表单? [英] How to submit AJAX Form using radio button change event?

问题描述

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

I have a AJAX form & I want to submit it on radio button change event.

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">

                }

我使用以下代码，但是它不起作用.

I uses following code but it does not work.

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

推荐答案

@Babul Mirdha Ajax.BeginForm 是一种有效的机制，但是自定义与标准完全不同的特定提交行为会产生很大的影响头痛.我想现在你知道了.

@Babul Mirdha Ajax.BeginForm is a mechanism that works fine, but customize specific submit behaviors very different from the standard can generate big headache. I think now you know that.

每次(我和许多其他开发人员也会说)需要开发一些自定义行为时，我都会使用基本的Jquery.像这样:

Every time I (and many other developers will say it too) need to develop some custom behavior I use the basic Jquery. Like this:

在您的控制器中:

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>

通过这种方式，您可以完全控制行为.

This way you have full control over behavior.

这篇关于如何使用单选按钮更改事件提交AJAX表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！