javascript互斥CheckBox问题

时间:2013-09-24 13:35:56

标签: javascript asp.net asp.net-mvc asp.net-mvc-3

我有一个单选按钮,显示telerik网格中的记录列表。选中单选按钮后,将显示完整和不完整的记录。但是,用户想要一种仅显示完整或不完整记录的方法。我添加了两个互斥的复选框。用户可以选中完整或不完整的复选框来显示数据。它在我的本地工作正常,但它在服务器上不能很好地工作。第一次,用户必须先单击复选框两到三次才能保持状态。此外,如果检查完成并且用户接下来检查不完整,则复选标记将返回完成。用户必须再次执行此操作。我在这里做错了什么?

这是复选框的html

@Html.CheckBox("complete", SessionWrapper.currentEncounter.complete, new { id = "chkComplete", onclick = "chkInCompleteOption(1);this.form.submit();" }) <strong>Complete</strong>

@Html.CheckBox("Incomplete", SessionWrapper.currentEncounter.incomple, new { id = "chkInComplete", onclick = "chkInCompleteOption(2);this.form.submit();" }) <strong>Incomplete</strong>

//这是javascript

var completeCheck = '@SessionWrapper.currentEncounter.complete';
var inCompleteCheck = '@SessionWrapper.currentEncounter.incomplete';

 function chkInCompleteOption(e) {
        if (e == 1) {
            var cc = $('#chkComplete').is(':checked');
            var data = { "complete": cc, "inComplete": false };
                        var url = '@Url.Action("CompletedOption", "Orders")';
                        $.ajax({
                            url: url,
                            type: 'post',
                            dataType: 'text',
                            data: data,
                            success: function (data) {
                                testComplete();
                                return true;
                            },
                            error: function (error) {
                                alert("An error has occured.");
                                return false;

                            }
                        });

                    }
                    else if (e == 2) {
                        var inc = $('#chkInComplete').is(':checked')
                        var data = { "complete": false, "inComplete": inc };
                        var url = '@Url.Action("CompletedOption", "Orders")';
                        $.ajax({
                            url: url,
                            type: 'post',
                            dataType: 'text',
                            data: data,
                            success: function (data) {
                                testInComplete();
                                return true;
                                //  $('#chkComplete').removeAttr("checked", "checked");
                                //  $('#chkInComplete').attr("checked", "checked");

                            },
                            error: function (error) {
                                alert("An error has occured.");
                                return false;

                            }
                        });
        }


    }


function testInComplete() {
        if (inCompleteCheck == true) {
              inCompleteCheck =  $('#chkInComplete').attr("checked", "checked");
              document.getElementById('chkInComplete').checked = true;
        } else {
            $('#chkInComplete').removeAttr("checked");
        }
    }


    function testComplete() {
        if (inCompleteCheck == true) {
            completed = $('#chkComplete').attr("checked", "checked");
            document.getElementById('chkComplete').checked == true;
        } else {
            $('#chkComplete').removeAttr("checked");
        }
    }

//在服务器端设置互斥值

public bool CompletedOption(bool complete, bool inComplete)

            if (inComplete == true && complete == true)
            {
                return false;
            }

            if (complete == true)
            {
                SessionWrapper.currentEncounter.complete = true;
            }
            else if (SessionWrapper.currentEncounter.complete == true && (complete == null || inComplete == null))
            {
                SessionWrapper.currentEncounter.complete = true;
            }
            else
            {
                SessionWrapper.currentEncounter.complete = false;
            }


            if (inComplete == true)
            {
                SessionWrapper.currentEncounter.incomplete = true;
            }
            else if (SessionWrapper.currentEncounter.incomplete == true && (complete == null || inComplete == null))
            {
                SessionWrapper.currentEncounter.incomplete = true;
            }
            else
            {
                SessionWrapper.currentEncounter.incomplete = false;
            }


            return true;
        }

1 个答案:

答案 0 :(得分:0)

我发现了这个问题。服务器端正在正确更新;但是,每次执行时,ajax都会返回错误消息。当预期字符串时,服务器端的方法返回一个布尔值。我还将异步和缓存设置为false。我再次运行应用程序,它可以工作。

//将方法签名从布尔值更改为字符串

public string CompletedOption(bool complete, bool inComplete)
{
  return "true";
}

ajax post

$.ajax({
            url: url,
            type: 'post',
            dataType: 'text',
            async: false, //Added
            cache: false, //Added
            data: data,
            success: function (data) {
                  return data;
            },
            error: function (error) {
                alert("An error has occured.");
                return false;
            }
        });