c# - 将 C# 转换为客户端 Javascript

Question

我有一个 Asp.Net 页面，其中包含选项列表以及 ListView 控件中的复选框。我已经使用分页控件应用了分页。但是，我想在 ListView 的各个分页页面中维护复选框的状态。我用下面的代码完成了这个

private List<int> IDs
    {
        get
        {
            if (this.ViewState["IDs"] == null)
            {
                this.ViewState["IDs"] = new List<int>();
            }
            return (List<int>)this.ViewState["IDs"];
        }
    }

protected void AddRowstoIDList()
{
    int checkAction = 0;

    foreach (ListViewDataItem lvi in lvCharOrgs.Items)
    {
        CheckBox chkSelect = (CheckBox)lvi.FindControl("chkSelect");
        if ((((chkSelect) != null)))
        {
            int ID = Convert.ToInt32(lvCharOrgs.DataKeys[lvi.DisplayIndex].Value);


            if ((chkSelect.Checked && !this.IDs.Contains(ID)))
            {
                this.IDs.Add(ID);
                checkAction += 1;
            }
            else if ((!chkSelect.Checked && this.IDs.Contains(ID)))
            {
                this.IDs.Remove(ID);
            }
        }
    }
}

protected void lvCharOrgs_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    ListViewDataItem lvi = (ListViewDataItem)e.Item;
    if ((lvi.ItemType == ListViewItemType.DataItem))
    {
        // Find the checkbox in the current row
        CheckBox chkSelect = (CheckBox)lvi.FindControl("chkSelect");
        // Make sure we're referencing the correct control
        if ((chkSelect) != null)
        {
            // If the ID exists in our list then check the checkbox
            int ID = Convert.ToInt32(lvCharOrgs.DataKeys[lvi.DisplayIndex].Value);
            chkSelect.Checked = this.IDs.Contains(ID);
        }
    }

    if (Profile.proUserType == "basic")
    {//basic account so no choice of charity
        ((CheckBox)e.Item.FindControl("chkSelect")).Checked = true;
        ((CheckBox)e.Item.FindControl("chkSelect")).Enabled = false;
    }
}

现在我有一个 CustomValidator 控件，它检查以确保已选择 3 到 5 个记录。如果为真，则页面有效并已处理。如果不是这种情况(例如少于 3 个或多于 5 个)，则该页面无效并且 CustomValidator 抛出一个标签来通知这一事实。

我在服务器端使用以下代码来实现这一点。

protected void lvCharOrgsValidator_ServerValidate(object source, ServerValidateEventArgs args)
{// Custom validate lvCharOrgs
   //update selected rows
    AddRowstoIDList();
    //get count and verify is correct range
    int counter = this.IDs.Count;
    args.IsValid = (counter >=3 && counter <=5) ? true : false;
}

除了我需要从 AJAX Control Toolkit 实现“ValidatorCallout”扩展程序外，这一切都很好。但是，这不适用于 CustomValidators，除非它们实现了客户端验证。因此，我需要将“lvCharOrgsValidator_ServerValidate”方法转换为客户端 JavaScript 函数。

希望这能阐明我的要求。

Answer 1

以下是做什么的？

AddRowstoIDList();

类似下面的内容是一个开始，但需要有关上述方法的更多详细信息才能提供有效的答案

function validateRowCount(sender, args) {
    //update selected rows
    AddRowstoIDList(); // Does this add row indexes to an array?

    //get count and verify is correct range
    var counter = IDList.length;
    args.IsValid = (counter >=3 && counter <=5);
}

可能值得一看Script#对于长期解决方案，如果您计划进行大量转换。

编辑:

现在我可以看到 AddRowstoIDList() 方法，在客户端执行此操作会略有不同。首先，获取对为 lvCharOrgs 呈现的 DOM 元素的引用。在 vanilla JavaScript 中执行此操作的最直接方法可能是将 JavaScript 函数放在页面中并使用服务器标记来获取呈现的 ClientID。

function validateRowCount(sender, args) {
    var lvCharOrgs = document.getElementById('<%= lvCharOrgs.ClientID %>');

    var checkboxes = lvCharOrgs.getElementsByTagName('input');
    var len = checkboxes.length;
    var counter = 0;

    for(var i =0; i < len; i++) {
        if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) counter++;
    }
    args.IsValid = (counter >=3 && counter <=5);
}

应该像这样工作 - Working Demo

如果您想查看代码，请在 URL 中添加 /edit