点击按钮时停止刷新页面

Question

我需要将asp按钮设置为在点击时不刷新整个页面。

我的代码只是让一张图片更改为另一张图片，但图片的索引是在页面加载方法中设置的。每次单击按钮以前往下一个图片索引时，整个页面都会刷新并调用页面加载方法。这会将索引重置为0。

如何使页面在单击按钮时停止调用页面加载方法？

以下是我正在使用的基本代码：

在表格中：

<tr>
    <td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClick="Button1_Click" OnClientClick="return false"/> </td>
    <td> <img ID="pic" alt="" src="010.JPG" runat="server" width="200" height="200" /> </td>
    <td> <asp:Button ID="Button2" runat="server" Text="Next" OnClick="Button2_Click" OnClientClick="return false"/> </td>
</tr>

这是.cs文件：

private List<String> imagePathList = new List<String> { };
private List<Boolean> isActivePath = new List<Boolean> { };

protected void Page_Load(object sender, EventArgs e)
{
        Debug.WriteLine("GALLARY *page load*");

        pic.Width = 200;
        pic.Height = 200;

        addToList();

        getImagePath(1);
}
protected void Button1_Click(object sender, EventArgs e)
{
    Debug.WriteLine("GALLARY *Button1_Click*");
    int index = getActive();
    getImagePath(index = index - 1); 
}
protected void Button2_Click(object sender, EventArgs e)
{
    Debug.WriteLine("GALLARY *Button2_Click*");
    int index = getActive();
    getImagePath(index = index + 1);
}

private void getImagePath(int index)
{
    Debug.WriteLine("GALLARY *getImagePath* index = "+index);
    int length = imagePathList.Count;

    if (index < length && index >= 0)
    {
        //pic.Src = imagePathList[index];
        //pic.Alt = imagePathList[index];
        pic.Src = imagePathList[index];
        pic.Alt = imagePathList[index];
        setActive(index);
    }
    else
    {
        pic.Src = "DOES NOT EXIST";
        pic.Alt = "DOES NOT EXIST";
    }
}

private void addToList()
{
    Debug.WriteLine("GALLARY *addToList*");
    imagePathList.Clear();
    isActivePath.Clear();

    addImage("08.JPG");
    addImage("09.JPG");
    addImage("010.JPG");
    addImage("011.JPG");
    addImage("012.JPG");
}

private void addImage(String filename)
{
    Debug.WriteLine("GALLARY *addImage* filename = "+filename);
    imagePathList.Add(filename);
    isActivePath.Add(false);
}
private void setActive(int index)
{
    Debug.WriteLine("GALLARY *setActive* index = " + index);
    for (int i = 0; i > isActivePath.Count; i++)
    {
        isActivePath[i] = false;
    }

    isActivePath[index] = true;
}
private int getActive()
{
    Debug.Write("GALLARY *getActive*");
    int temp = 0;
    for (int i = 0; i > isActivePath.Count; i++)
    {
        if (isActivePath[i] == true)
        {
            temp = i;
        }
    }
    Debug.WriteLine("index = " + temp);
    return temp;
}

- Julie20

---

将“Button”的“postback”属性设置为false。 - dotmido

我认为您想要更新面板。 - 4b0

在页面加载方法中，编写您的代码if(!isPostback){ // code to set index to 0 }，以便每次单击按钮时都不会将索引设置为0。你需要的是一个ajax调用到一个webmethod。 - Yagnesh.Dixit

你在哪里改变图片的索引？你是否使用 JavaScript 更换图片？ - शेखर

@user2235321 请发布您的代码，这样我就能更清楚地了解您的问题...还有为什么您不想使用ajax，那是避免postback的最佳方式... - Yagnesh.Dixit

Answer 1

您需要使用UpdatePanel进行部分更新。

<asp:ScriptManager runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always" >
    <ContentTemplate>
    <asp:Image ID="Image1" runat="server" Height="23px"  Width="24px" />

    <asp:Button ID="btnImageChange" runat="server" Text="Check" OnClick="btnImageChange_Click1"  />
     </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnImageChange" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>

然后在代码后台 .cs 中写入以下内容：

protected void btnImageChange_Click1(object sender, EventArgs e)
    {
     // you can add a loop here for the list of images...
            Image1.ImageUrl = "~/Images/loading.gif";

}

- reaz

---

不行，这没用……图片没有改变是因为加载页面的方法仍在被调用。 - Julie20

我已经更新了它... 请在表单标签内添加以下行：<asp:ScriptManager runat="server"></asp:ScriptManager> - reaz

这可能是最适合 OP 的解决方案，客户端返回是错误的，因为服务器端代码（OP 需要执行的代码）无论如何都不会执行。 - Grant Thomas

当然，Page_Load方法会被调用，因为你的按钮正在进行回发！任何页面实例的服务器端代码都将执行Page_Load处理程序，为了防止其中的代码执行，请使用“if（！IsPostBack）”约定。 - Grant Thomas

如果您在Page_Load示例中添加IsPostBack条件，那么OP肯定会得到他们需要的一切。 - Grant Thomas

@GrantThomas：是的，没错。加上IsPostBack条件会更完美。但我认为他需要多了解一些UpdatePanel和相关概念才能理解它。因为他说自己是初学者。 - reaz

Answer 2

onClientClick="return false"

应该就是这样了！Onclick将引用一个ASP.net函数，onClientClick将在HTML控件中呈现为OnClick。

- Anıl Canlı

---

正如您所知，它的渲染方式类似于 onClick，但它将客户端函数封装为保护层... 如果您放置 return false，则意味着您永远不会访问服务器。 - Murali Ramakrishnan

Answer 3

尽量不要使用这种老式的按钮实现。相反，您可以使用fly buttons或由jQuery触发的按钮，这样就不会进行回传。

- Andrew Gates

Answer 4

在按钮点击时调用此JavaScript函数

        <script type="text/Javascript">
     function ChangeIndex(){
      $.ajax({
                url: "Url of your page/Methodname",
                data: JSON.stringify({variableName,VariableValue}),
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    //set your image scr here 
                },
                error: function (data, status, jqXHR) {
                    //alert('There was an error.');
                }

            }
      </script>

在你的代码后面写一个WebMethod。

    [WebMethod]
    public static string Methodname(string variableName)
    { 
      //Logic to get the index. 
      return "Index";
     }

希望这可以帮到你。请发布你的代码，以便我可以为你提供进一步的帮助。

- Yagnesh.Dixit