按钮点击事件后如何维护下拉列表的状态？ [英] How do I maintain the state of dropdownlist after button click event?

问题描述

我创建了简单的webform，其中包含两个下拉列表，这些下拉列表在页面加载事件中加载了数字。我有add，sub，mul，divide按钮来操作计算和一个标签来显示结果。



当我从下拉列表中选择两个数字并按下按钮时，我得到了0结果。



我尝试过：



我的实施：

protected void Page_Load（object sender，EventArgs e）

{



MyCalculationClient mc = new MyCalculationClient（ ）;

DropDownList1.DataSource = mc.DisplayNumbers（）;

DropDownList1.DataTextField =Number;

DropDownList1.DataBind（）;



DropDownList2.DataSource = mc.DisplayNumbers（）;

DropDownList2.DataTextField =Number;

DropDownList2.DataBind（）;







}



protected void Button1_Click（object sender，EventArgs e）

{

int a = Convert.ToInt32（DropDownList1.Text）;

int b = Convert.ToInt32（DropDownList2.Text）;

MyCalculationClient add = new MyCalculationClient（）;

Label1.Text = add.Add（a，b）.ToString（）;

}

I have created simple webform with two dropdownlists which get loaded with numbers on page load event. I have add, sub, mul, divide buttons to operate calculation and a label to display result.

When i select two numbers from dropdownlist and hit the buttons, I got 0 as result.

What I have tried:

My implementation:
protected void Page_Load(object sender, EventArgs e)
{

MyCalculationClient mc = new MyCalculationClient();
DropDownList1.DataSource = mc.DisplayNumbers();
DropDownList1.DataTextField = "Number";
DropDownList1.DataBind();

DropDownList2.DataSource = mc.DisplayNumbers();
DropDownList2.DataTextField = "Number";
DropDownList2.DataBind();



}

protected void Button1_Click(object sender, EventArgs e)
{
int a = Convert.ToInt32(DropDownList1.Text);
int b = Convert.ToInt32(DropDownList2.Text);
MyCalculationClient add = new MyCalculationClient();
Label1.Text = add.Add(a, b).ToString();
}

推荐答案

问题是你在回发后重新加载页面，没有任何东西告诉服务器端某些控件的状态应该是不同的;作为HTTP响应生成的结果，所有内容都是默认呈现的。



人们可能会解释您特定于ASP.NET的所有方面，会话数据，等等，但我想建议更多的通用替代不可知的服务器端;它甚至可以在没有任何服务器端的情况下工作，当你只想恢复一些UI状态或任何数据之后，比如本地重新加载或任何其他需要恢复你以前状态的动作。



这个通用API是 Web存储：

网络存储 - 维基百科，免费的百科全书 [ ^ ]，

Web Storage API - Web API | MDN [ ^ ]，

Window.sessionStorage - Web APIs | MDN [ ^ ]，

Window.localStorage - Web APIs | MDN [ ^ ]。



显然，出于您的目的，您必须更喜欢会话存储，而不是本地存储。本地存储会污染您的本地浏览器数据，但即使使用本地存储，您也可以轻松将其删除。



另外，您可能更合适地希望保留所有状态记录一键并保存一次恢复所有内容。这将是最好的主意。为此，您需要序列化和反序列化所有数据。可以使用JSON轻松完成： JSON - JavaScript | MDN [ ^ ]。



您可以在我的文章的Web存储部分找到整个技术的全面样本：

JavaScript Calculator， 7动态严格模式切换和网络存储 [< a href =http://www.codeproject.com/Articles/890109/JavaScript-Calculator#a7target =_ blanktitle =New Window> ^ ]



就是这样。

-SA

The problem is that you re-load the page after postback, and nothing tells the server side that the state of some controls should be different; everything is just rendered as it should be by default, as the result of the HTTP response production.

People will probably explain your all aspects of it specific to ASP.NET, with session data, and so on, but I want to suggest more universal alternative agnostic to the server side; it can even work without any server side at all, when you simply want to restore some UI state or any data at all after, say, local reload or any other action which need restoration of your previous state.

This universal API is Web storage:
Web storage — Wikipedia, the free encyclopedia[^],
Web Storage API — Web APIs | MDN[^],
Window.sessionStorage — Web APIs | MDN[^],
Window.localStorage — Web APIs | MDN[^].

Apparently, for your purpose you have to prefer session storage, not local storage. Local storage would contaminate your local browser data, but even with local storage you can easily wipe it out.

Also, you may reasonably prefer keeping all the state record by just one key and save restore everything at once. It would be the best idea. To do so, you would need to serialize and deserialize all data. It can be easily done with JSON: JSON — JavaScript | MDN[^].

You can find a comprehensive sample of the whole technique in my article, in the Web storage section:
JavaScript Calculator, 7 Dynamic Strict Mode Switching and Web Storage[^]

That's all.

—SA

这篇关于按钮点击事件后如何维护下拉列表的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！