Retain (Maintain) Image URL set using jQuery on ASP.Net Button Click (PostBack)

indradeo
 
on May 15, 2022 11:19 PM
786 Views

Dear Sir,

I have created a form where I have saved some values and image, but while I have saved all value and image then image automatic hide.

<table border="1" class="auto-style43">
        <tr>
            <td class="auto-style75">
                <img src="images/m1.png" class="auto-style42" /></td>
            <th class="auto-style46" style="box-sizing: border-box;" colspan="5"><span class="auto-style44">Meja Thermal Power Plant<br />
                <span style="color: rgb(0, 0, 0); font-family: Roboto; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">A Joint Venture of NTPC Ltd &amp; UPRVUNL</span></span><br class="auto-style44" />
            </th>
        </tr>
        <tr>
            <td class="auto-style100"></td>
            <th class="auto-style101" style="box-sizing: border-box;" colspan="5"></span>
        <font style="box-sizing: border-box;">
            <span class="auto-style45">VISITOR GATE PASS </span></font></th>
        </tr>
        <tr>
            <td class="auto-style63" rowspan="2">
                <img id="imgCapture" /></td>
            <th class="auto-style68" style="box-sizing: border-box;" colspan="4">Visitor Id:
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style88">Visitor Aadhar No. :
            <asp:TextBox ID="TextBox2" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
        </tr>
        <tr>
            <th class="auto-style83" style="box-sizing: border-box;" colspan="4">Visitor Name :
            <asp:TextBox ID="TextBox1" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
            <th class="auto-style84">Gender :
            <asp:DropDownList ID="DropDownList1" runat="server" Height="33px" Width="149px" CssClass="auto-style35">
                <asp:ListItem>Male</asp:ListItem>
                <asp:ListItem>Female</asp:ListItem>
                <asp:ListItem>Others</asp:ListItem>
                <asp:ListItem></asp:ListItem>
            </asp:DropDownList>
            </th>
        </tr>
        <tr>
            <th class="auto-style122" style="box-sizing: border-box;">Father/Husband Name:</th>
            <th class="auto-style114" style="box-sizing: border-box;" colspan="2">&nbsp;<asp:TextBox ID="TextBox4" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
            <th class="auto-style96" colspan="2">Current Address :&nbsp;
            </th>
            <th class="auto-style97">
                <asp:TextBox ID="TextBox5" runat="server" Height="33px" Width="346px" CssClass="auto-style120"></asp:TextBox>
            </th>
        </tr>
        <tr>
            <th class="auto-style94" style="box-sizing: border-box;">Purpose of visit :</th>
            <th class="auto-style54" style="box-sizing: border-box;" colspan="4">
                <asp:TextBox ID="TextBox6" runat="server" CssClass="auto-style116" Height="50px" Width="346px"></asp:TextBox>
            </th>
            <th class="auto-style72"></th>
        </tr>
        <tr>
            <th class="auto-style121" style="box-sizing: border-box;">Emp.Name:</th>
            <th class="auto-style118" style="box-sizing: border-box;" colspan="2">
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style103">Emp. ID :</th>
            <th class="auto-style113">
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style93">Department :<asp:Label ID="Label12" runat="server" Text=""></asp:Label></th>
        </tr>
        <tr>
            <th class="auto-style99">Gate pass Cretion Date/Time:</th>
            <th class="auto-style112">
                <asp:Label ID="Label10" runat="server" Text="Label" CssClass="auto-style106"></asp:Label></th>
            <th class="auto-style90" colspan="2">Plant Entry&nbsp; Date/Time:</th>
            <th class="auto-style109">
                <asp:Label ID="Label11" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style90"></th>
        </tr>
        <tr>
            <th height="120" colspan="3" class="auto-style73" style="height: 60px">CISF Signature</th>
            <th height="120" colspan="3" colspan="2" class="auto-style73" style="height: 60px">Employee Signature</th>
        </tr>
        <tr>
            <th colspan="6" class="auto-style73">
                <div class="noprint">
                    <input id="btnCapture" type="button" value="Image Capture" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="Button2" runat="server" Text="Submit" CssClass="auto-style81" CausesValidation="false" Height="22px" Width="78px" OnClick="Button1_Click" />
                    &nbsp;&nbsp;&nbsp;&nbsp;       
                        <button id="Print" onclick="window.print();return false;" causesvalidation="false">
                            Print</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </div>
        </tr>
    </table>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WebCam.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        Webcam.set({
            width: 170,
            height: 120,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#webcam');
        $("#btnCapture").click(function () {
            Webcam.snap(function (data_uri) {
                $("#imgCapture")[0].src = data_uri;
                $("#btnUpload").removeAttr("disabled");
            });
        });
        $("#btnUpload").click(function () {
            $.ajax({
                type: "POST",
                url: "cisf_v.aspx/SaveCapturedImage",
                data: "{data: '" + $("#imgCapture")[0].src + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) { }
            });
        });
    });
</script>
<div class="noprint">
    <table align="center" border="1" bgcolor="#B7FFC9" cellpadding="4" cellspacing="2" style="border: 1px solid #999999; font-family: Century; width: 311px; margin-left: 44px;" class="auto-style1">
        <tr>
            <td class="auto-style80" colspan="4" style="text-align: center; background-color: #FEEEDE">Capture Image</td>
            <div class="noprint">
                <th height="120" colspan="2" class="auto-style74">
                    <div id="webcam"></div>
            </div>
        </tr>
    </table>
</div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on May 17, 2022 01:41 AM
on Jun 10, 2022 08:00 AM

Hi indradeo,

When you are clicking on Button your entire page reloading so that your Image URL value is destroying.

So the solution is that you need to set Image url value in HiddenField and call that HiddenField on jQuery Button click it will retain your Image url value on Button click.

Please refer below sample.

HTML

<img id="imgMVC" src="Images/MVC.png" alt="MVC Logo" width="200" />
<br />
<input type="hidden" id="hfImg" runat="server" />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
<hr />
<img id="imgCopy" width="200" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
    $(function () {
        $('[Id*=btnSubmit]').on('click', function () {
            var img = $('[id*=imgMVC]');
            $('[id*=hfImg]').val(img.attr('src'));
        });
    });
</script>

Code

C#

protected void Submit(object sender, EventArgs e)
{
    imgCopy.Attributes["src"] = hfImg.Value;
}

VB.Net

Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    imgCopy.Attributes("src") = hfImg.Value
End Sub

Screenshot