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

Question

我有一个 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' });

Answer 1

@Babul MirdhaAjax.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>

这样您就可以完全控制行为。

Answer 2

尝试这个：

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