2

pageload に既にバインドされている 2 つのドロップダウン リストがあります。ajax 関数を起動した後、これら 2 つのドロップダウン リストを再バインドしたいと思います。ドロップダウンリストに追加すると、ajax関数を使用して新しいデータをバインドできます。画面は、Asp.net C#コーディングを使用して開発されています。

4

3 に答える 3

3

これがasp.netのドロップダウンリストです

<asp:DropDownList id="ddlCourse" runat="server" AutoPostBack="false" 
                                    Height="28px" title="Select Course" Width="290px" 
      ></asp:DropDownList>

これがWebサービスメソッドを呼び出しているjqueryメソッドです

function BindCourse() {
    $.ajax({
        type: "POST",
        url: "/WebService/CollegeWebService.asmx/GetCourseDetails",
        data: "{}",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnCoursePopulated,      
        error: function (xml, textStatus, errorThrown) {
            alert('error');
            alert(xml.status + "||" + xml.responseText);
        }
    });
}

これは、ajex呼び出しメソッドで使用され、PopulateControlメソッドを呼び出してドロップダウンリストをバインドするためのメソッドです。

function OnCoursePopulated(response) {

    PopulateControl(response.d,   $('#<%=ddlCourse.ClientID %>'));

}

PopulateControlメソッドの説明は次のとおりです

function PopulateControl(list, control) {

    if (list.length > 0) {

        control.removeAttr("disabled");

        control.empty().append('<option selected="selected" value="0">Please select</option>');
        $.each(list, function () {


            control.append($("<option></option>").val(this['Value']).html(this['Text']));

        });
    }
    else {
        control.empty().append('<option selected="selected" value="0">Not available<option>');
    }
}

したがって、最終的にドロップダウンリストをバインドします

于 2012-06-05T09:02:19.437 に答える
2

以下をデモとして試すことができます。サーバー側の DropDownLists は、例外「無効なポストバックまたはコールバック引数」が発生しないように、HTML 選択要素に置き換えられます。このデモの欠点は、ポストバック後に値がフォームに復元されないことです。これを Default.aspx のフォーム内に配置できます。

<script type="text/javascript" 
 src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    function populate(populateInitial) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '/Default.aspx/populate',
            data: "{'populateInitial': '" + populateInitial + "'}",
            dataType: "json",
            async: false,
            success: function(result) {
                var ddlItems = document.getElementById('ddlItems');
                ddlItems.options.length = 0;
                $.each(result.d, function(key, item) 
                 { ddlItems.options[key] = new Option(item); });
            }
        });
    }
</script>

<form id="form1" runat="server">
<div>     
    <select id="ddlItems" name="ddlItems">
    </select>
    <br />
    <input type="button" onclick="populate('0');" value="Change values" />
    <br />
    Selected item: 
      <asp:Label ID="lblSelectedItem" runat="server" Text=""> </asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" 
     Text="Write out selected item text" />
</div>

<script type="text/javascript">
    populate('1');
</script>

そして、これらのメソッドを Default.aspx.cs 内に配置します。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            lblSelectedItem.Text = Request["ddlItems"].ToString();
        }
    }

    [System.Web.Services.WebMethod()]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> populate(string populateInitial)
    {
        if (populateInitial == "1")
            return (new string[] { "a", "b" }).ToList();
        else
            return (new string[] { "c", "d", "e", "f" }).ToList();
    }
于 2012-06-05T09:20:43.703 に答える
1

javascript jqueryでそれを読み取り、ドロップダウン用のhtmlを生成するよりも、ドロップダウン値とテキストフィールド値のxmlまたはjson、さらにはhtmlに応答する何らかのページ（ジェネリックハンダーを追加することをお勧めします）へのAjax呼び出しを行う必要があります以下です

   <select id="ddl">
        <option value="value">text</option>
    </select>

「値」とテキストを読み取り、これを生成する必要があります> <option value="value">text</option> およびddlに追加します

于 2012-06-05T07:46:55.847 に答える