如何在asp.net中重新加载页面后保留JavaScript值?

时间:2015-02-04 14:26:17

标签: javascript c# jquery html asp.net

我的asp.net应用程序中有一个html表。单击td元素时,我使用JavaScript将该值存储在隐藏字段中。

function rebind() {
        $('.window td').on('click', function () {
            var idName = this.id;
            var selectedid = idName.substring(1);
            console.log(selectedid);
            $('#hidden').val(selectedid);
         });
      }

现在,我想在此单击事件之后重新加载此aspx页面,因为我需要根据td值显示新数据,并且我还希望在重新加载或刷新后保留此隐藏字段值并且我想在上面使用它服务器端(aspx.cs)。

我试过像这样的ajax,

$.ajax({
        url: "Default.aspx",
        data: selectedid,
        type: "POST",
        success: function (result) {
            alert('Yay! It worked!');
        },
        error: function (result) {
            alert('Error');
        }
    });

但是我无法在c#端访问selectedid变量。我想知道我是否朝着正确的方向前进?

1 个答案:

答案 0 :(得分:0)

<input type="hidden" id="MyHiddenField" name="MyHiddenField" />
<button type="button" onclick="setHiddenValue();">Set Hidden Value</button>
<br />
<asp:Button runat="server" Text="Cause Postback" OnClick="PostBackBtn_Click" />
<br />   
<asp:Label ID="ResultLbl" Text="No result yet, hit Set Hidden Value then Cause Postback." runat="server" />
<script type="text/javascript">
    function setHiddenValue() {
        $("#MyHiddenField").val("Hello, world!");
    }
</script>

代码背后:

protected void PostBackBtn_Click(object sender, EventArgs e)
{
    var value = Request.Form["MyHiddenField"];
    //do something with value
    ResultLbl.Text = value;
}

您可以看到,现在我们已经检索了服务器端的值,并使用它来设置带有回发值的标签。您可以使用另一个隐藏值将值传递回JS而不是使用Label。


或者,将AJAX与ASP.NET Web API一起使用。这样做的好处是页面不会重新加载。您可以将值发送到控制器,并让服务器返回一些更新的数据。这对带宽很有用,因为只有我们绝对需要来回发送的数据才会被实际发送。我们不必担心丢失JavaScript变量,因为页面永远不会重新加载,并且用户没有得到“回发闪烁”。

$.ajax({
    url: "api/Products/GetAllProductsForCategory?categoryId=" + $("#MyHiddenField").val);
    type: "GET"
})
.done(function(data){
    alert("received data: " + data);
    //now we'd turn the data into HTML and add it to the DOM
    });

ASP.NET Web API

public class ProductsController : ApiController
{
    public IEnumerable<Product> GetAllProductsForCategory(string categoryId)
    {
        return products.Where(p => p.Category == categoryId);
    }
}