如何在asp.net页面重载后preserve的JavaScript值？

问题描述

我有一个html表我的asp.net应用程序。当点击一个TD元素，我使用JavaScript的值保存在一个隐藏字段。

 函数重新绑定（）{
        $（'窗口TD'）。在（'点击'，功能（）{
            VAR idName = this.id;
            变种selectedid = idName.substring（1）;
            的console.log（selectedid）;
            $（'＃隐藏）VAL（selectedid）。
         }）;
      }
 

现在，我想是因为我需要新的数据显示为每TD值这个点击事件后重新载入这个aspx页面，我也想preserve重装后这个隐藏字段的值，或刷新，我想使用它在服务器端（aspx.cs）。

我试过阿贾克斯这样的，

  $。阿贾克斯（{
        网址：Default.aspx的
        数据：selectedid，
        键入：POST，
        成功：函数（结果）{
            警报（'！耶它的工作！'）;
        }，
        错误：功能（结果）{
            警报（'错误'）;
        }
    }）;
 

但我不能够在C＃中端访问selectedid变量。我想知道如果我在正确的方向我要去？

解决方案

 ＆LT;输入类型=隐藏ID =MyHiddenFieldNAME =MyHiddenField/＆GT;
＆LT;按钮式=按钮的onclick =setHiddenValue（）;＆GT;设置隐藏的价值与LT; /按钮＆GT;
＆LT; BR /＆GT;
＆LT; ASP：按钮=服务器文本=回发的OnClick =PostBackBtn_Click/＆GT;
＆LT; BR /＆GT;
＆LT; ASP：标签ID =ResultLbl文本=没有结果呢，打设置隐藏的价值，然后回发。 =服务器/＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    功能setHiddenValue（）{
        $（＃MyHiddenField）VAL（你好，世界！）。
    }
＆LT; / SCRIPT＆GT;
 

和背后code：

 保护无效PostBackBtn_Click（对象发件人，EventArgs的发送）
{
    VAR值=的Request.Form [MyHiddenField];
    //做一些有价值的东西
    ResultLbl.Text =价值;
}
 

您可以看到，我们现在已经检索服务器端的值，并用它来设置一个与标签回发时的价值。你可以使用另外一个隐藏的值传递值回JS，而不是使用一个标签。

---

另外，使用AJAX与。这有一个页面不重新加载的优势。您可以将值发送到控制器，并且让服务器返回一些更新的数据。这是伟大的带宽，因为只有我们绝对需要来回发送数据实际上将被发送。同时，我们也不必担心失去JavaScript的变量，因为页面重新加载从来没有，用户没有得到回发忽悠。

  $。阿贾克斯（{
    网址：API /产品/ GetAllProductsForCategory的categoryId =+ $（＃MyHiddenField）VAL）;
    键入：GET
}）
.done（功能（数据）{
    警报（接收到的数据：+数据）;
    //现在我们就打开数据转换成HTML，并把它添加到DOM
    }）;
 

的ASP.NET Web API

 公共ProductsController类：ApiController
{
    公共IEnumerable的＆LT;产品与GT; GetAllProductsForCategory（字符串categoryId）
    {
        返回products.Where（P =＆GT; p.Category ==的categoryId）;
    }
}
 

I have an html table in my asp.net application. When a td element is clicked, I store that value in a hidden field using JavaScript.

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

Now, I want to reload this aspx page after this click event because I need new data to be displayed as per the td value and I also want to preserve this hidden field value after reload or refresh and I want to use it on server side (aspx.cs).

I've tried ajax like this,

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

But I am not able to access selectedid variable on c# side. I want to know if I am going in the right direction?

解决方案

<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>

And code behind:

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

You can see that now we've retrieved the value on the server side and use it to set a label with the value upon postback. You could use another hidden value to pass the value back to JS instead of using a Label.

---

Alternatively, use AJAX with ASP.NET Web API. This has the advantage that the page doesn't reload. You can send your value to a controller, and have the server return some updated data. This is great for bandwidth, since only the data that we absolutely need to send back and forth will actually be sent. And we don't have to worry about losing the JavaScript variables since the page never reloads, and the user doesn't get the "postback flicker".

$.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);
    }
}

这篇关于如何在asp.net页面重载后preserve的JavaScript值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！