javascript 在asp.net中单击按钮时调用jQuery函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17801638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:41:32  来源:igfitidea点击:

Call jQuery function on button click in asp.net

javascriptjqueryasp.net

提问by Iswar

Using asp.net I am trying to call jQuery function from a server side program. In my form I've a button called clear imageand a browse option. when I browse, then image get inserted in the image field. When page is loaded the clear image is invisible. When I browse the photo then the Clear image button should be visible and the browse option should be invisible. and when i click the clear image button then the browse option should be visible and clear image button itself should be invisible. Code is as follows

使用 asp.net 我试图从服务器端程序调用 jQuery 函数。在我的表单中,我有一个按钮clear image和一个浏览选项。当我浏览时,图像被插入到图像字段中。当页面加载时,清晰的图像是不可见的。当我浏览照片时,清除图像按钮应该是可见的,而浏览选项应该是不可见的。当我单击清除图像按钮时,浏览选项应该是可见的,而清晰图像按钮本身应该是不可见的。代码如下

       <div id="PhotoTransport" style="float: left; width: 40%; padding-left: 5px;">
                <img id="imgEventPhoto" width="120" height="90" class="IntGalHLNoBrdr" alt='Sorry! No image found.'
                    src='' runat="server" />
            </div>
   <div id="divPhotoUpload" 
   style="float: left; width: 50%;">
                <input id="fupEventPhoto" type="file" size="45" name="PhotoUploadedToUpload" class="imguploader validate[required]"
                    onchange="return validatePhotographToUploadPhoto();" />
                <img id="PhotoLoading" alt="Loading..." src="<%=ResolveClientUrl("~/Images/loading.gif")%>"style="display: none;" />
            </div>                
            <div id="divPhotoThumb" style="font-size: 10px; float: left;">
                <asp:Button ID="btnClearPhoto" runat="server" Text="Clear Image" CssClass="SubmitButton"
                    OnClick="btnClearPhoto_Click" />
            </div>

I've a jQuery function as below:

我有一个 jQuery 函数,如下所示:

function ShowThumbPhoto() {           
        $('#divPhotoThumb').show();
        $('[#divPhotoUpload').hide();
    };
    function HideThumbPhoto() {
        $('[id$=divPhotoThumb]').hide();
        $('[id$=divPhotoUpload]').show();
        $('[id$=btnClearPhoto]').hide();
    };     

I also have One server side function as below

我也有一个服务器端功能如下

 private void CheckImage()
{
    if (Session["ucPhotoUploaderUploadedImagePhoto"] != null)
    {
        this.RegisterJS("ShowThumbPhoto();");

    }
    else
    {
        this.RegisterJS("HideThumbPhoto();");

    }
}

When I am trying to call Checkimage() on click event of btnClearPhoto. Here I am storing photo in Session["ucPhotoUploaderUploadedImagePhoto"]. the check image function is called on every postback. every time it is executing well.

当我尝试在 btnClearPhoto 的单击事件上调用 Checkimage() 时。在这里,我将照片存储在 Session["ucPhotoUploaderUploadedImagePhoto"] 中。每次回发时都会调用检查图像函数。每次都运行良好。

My Problem is that Despite of calling checkimage() on click event of btnClearPhoto. the code of click event of btnClearPhoto is as follows:

我的问题是,尽管在 btnClearPhoto 的点击事件上调用了 checkimage()。btnClearPhoto 的点击事件代码如下:

protected void btnClearPhoto_Click(object sender, EventArgs e)
    {
        Session["ucPhotoUploaderUploadedImagePhoto"] = null;            
        CheckImage();
    }

My problem is jQuery function is called from checkimage() but in client side the jQuery function is not called. meaning I am not able to full fill my requirement. I have tried this piece of code also but it's not working

我的问题是 jQuery 函数是从 checkimage() 调用的,但在客户端,没有调用 jQuery 函数。这意味着我无法完全满足我的要求。我也试过这段代码,但它不起作用

$("[id$=btnClearPhoto]").click(function(e){
    e.HideThumbPhoto();
});

采纳答案by Taimur Khan

$('[#divPhotoUpload').hide(); it think there is problem with this selector, removing [ will correct it. Also in asp.net id's of elements get changed depending on their parent container id, so chnage as follows whereever you have referring to your asp.net controls in javascript.

$('[#divPhotoUpload').hide(); 它认为这个选择器有问题,删除 [ 将纠正它。同样在 asp.net 中,元素的 id 会根据它们的父容器 id 进行更改,因此无论您在 javascript 中引用 asp.net 控件的任何位置,都可以按如下方式进行更改。

<%=btnClearPhoto.ClientID%> e.g
$("<%=btnClearPhoto.ClientID%>").click(function(e){
      e.HideThumbPhoto();
      });