Javascript ダイナミックコントロールサーバーコントロールの例

Javascript ダイナミックコントロールサーバーコントロールの例_JavaScript スキル

WBOY

リリース： 2016-05-16 16:37:04

オリジナル

1859 人が閲覧しました

最近、多くのページで、ユーザーが選択できるようにいくつかのドロップダウンリストボックスを読み込む必要があります。元々は、これらはすべてサーバー側で読み込まれていました。最後に、ビジネスロジックの考慮事項により、DropDownList の一部の機能はクライアント側で実装する必要があります。ドロップダウンリスト機能は、すべてをサーバー側に配置するよりもはるかに使いやすくなりました。

具体的な方法:

ページに DropDownList コントロールを配置し、それが生成する HTML コードを分析するための項目を追加します。このようにして、動的コントロールに js を使用すると、テストコードは次のようになります。

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

ログイン後にコピー

ブラウザで表示して HTML を分析します。以下は、DropDownList コントロールによって生成された HTML コードです。通常のセレクションとは異なります

違いはあります。その後、js を通じて動的に入力、削除、選択、その他のコントロールを実行できます。

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

ログイン後にコピー

1 を削除し、2 つの HTML ボタンコントロールを追加して、それぞれオプションを追加したり、すべてのオプションを削除したりできます。ボタンのソースコードは次のとおりです:

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

ログイン後にコピー

関数の追加と削除は次のようになります:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

ログイン後にコピー

ブラウザで表示すると、選択ドロップダウンオプションを簡単に作成できます。これらはクライアント側で生成されるため、サーバー側よりも効率的です

副業用のコード。ただし現時点で、DropDownList1.SelectedValue を使用してユーザーが選択したオプションを取得したい場合は、

を実行する必要があります。

エラーが発生しました。これは、DropDownList が JS によって動的に追加されるため、その項目は ViewState に属さず、維持されないためです。

つまり、サーバー側では処理できないということです。この問題を解決するには、次の 2 つの方法を使用できます: 1. 隠しコントロールの保存

ユーザーオプションメソッド 2. Request.Form メソッド。 (msdn「Taste of Ajax」を参照)

1. ページに非表示コントロールを追加し、それを使用して DropDownList オプションの変更に関する情報を保存します。これにより、ユーザーの選択感覚がわかります

関心のある情報を受信した後、サーバー側で情報を取得して処理することで、顧客とサービスの分業を合理的に実現できます。

DropDownList コントロールに onchange イベントを追加します。このときの HTML コードは次のとおりです。

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

ログイン後にコピー

Onchange イベントは次のとおりです。このイベントは主にユーザーが選択した値を保存します。

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

ログイン後にコピー

この後、asp:button コントロールを使用して結果をテストします。

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

ログイン後にコピー

この時点ですべての作業は完了しましたが、DropDownList の変更イベントは、ユーザーがドロップダウンの選択を変更する場合にのみ使用できます。

が選択されている場合にのみトリガーされます。したがって、ユーザーがデフォルトのオプションを使用して送信すると、null 値が返されます。したがって、オプション、つまり

を入力できます。

隠し初期化。次のようにコード行を addOption イベントに追加します:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

ログイン後にコピー

ただし、上記の赤い部分は TT ブラウザでは ADD に成功しません。他のブラウザでは試していません。

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}

ログイン後にコピー