[Solved] JavaScript code not working with Master Page and Content Page in ASP.Net

Last Reply 10 months ago By dharmendr

Posted 10 months ago

hello,

 

i am using this code for image rotation, https://www.aspforums.net/Threads/174671/Rotate-Image-and-save-in-Folder-Directory-on-Server-in-ASPNet/Replies/2#Replies

 

this code does not work with master page and content page. but without master page it works

 

please advice

Posted 10 months ago

Hi nauna,

When you are using master page and content page then document.getElementById not working due to issue with the IDs of Controls. For more details to resolve the issue refer below article.

JavaScript document.getElementById not working with Master Page and Content Page in ASP.Net

Check the below example.

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="CS.aspx.cs" Inherits="CS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <input type="hidden" id="hfData" runat="server" />
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>
                Original Image
            </th>
            <th>
                &nbsp;
            </th>
            <th>
                Image after Rotated
            </th>
        </tr>
        <tr>
            <td>
                <asp:Image ID="image" ImageUrl="~/Images/Test.jpg" runat="server" class="north" />
                <canvas id="canvas"></canvas>
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                <asp:Image ID="Image1" ImageUrl="~/Output/Test.jpg" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <br />
                <input id="btnRotate" type="button" name="name" value="Rotate" />&nbsp;
                <asp:Button ID="btnSave" Text="Save" runat="server" OnClick="Save" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var img = null, canvas = null;
        $(function () {
            img = document.getElementById("<%=image.ClientID%>");
            canvas = document.getElementById('canvas');
            if (!canvas || !canvas.getContext) {
                canvas.parentNode.removeChild(canvas);
            } else {
                img.style.position = 'absolute';
                img.style.visibility = 'hidden';
            }
            RotateImage(0);
            $('[id*=btnRotate]').click(function () {
                if (img.className == "north") {
                    RotateImage(90);
                    img.className = "west";
                }
                else if (img.className == "west") {
                    RotateImage(180);
                    img.className = "south";
                }
                else if (img.className == "south") {
                    RotateImage(270);
                    img.className = "east";
                }
                else if (img.className == "east") {
                    RotateImage(0);
                    img.className = "north";
                }
            });
        });

        function RotateImage(degree) {
            if (document.getElementById('canvas')) {
                var context = canvas.getContext('2d');
                var cw = img.width, ch = img.height, cx = 0, cy = 0;
                switch (degree) {
                    case 90:
                        cw = img.height;
                        ch = img.width;
                        cy = img.height * (-1);
                        break;
                    case 180:
                        cx = img.width * (-1);
                        cy = img.height * (-1);
                        break;
                    case 270:
                        cw = img.height;
                        ch = img.width;
                        cx = img.width * (-1);
                        break;
                }
                canvas.setAttribute('width', cw);
                canvas.setAttribute('height', ch);
                context.rotate(degree * Math.PI / 180);
                context.drawImage(img, cx, cy);
                document.getElementById("<%=hfData.ClientID%>").value = canvas.toDataURL();
            }
            else {
                switch (degree) {
                    case 0:
                        image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                        break;
                    case 90:
                        image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                        break;
                    case 180:
                        image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                        break;
                    case 270:
                        image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                        break;
                }
            }
        }
    </script>
</asp:Content>

C#

protected void Save(object sender, EventArgs e)
{
    string base64String = hfData.Value.Replace("data:image/png;base64,", string.Empty);
    byte[] bytes = Convert.FromBase64String(base64String);
    string filePath = Server.MapPath("~/Output/" + "Test.jpg");
    System.IO.File.WriteAllBytes(filePath, bytes);
    Response.Redirect(Request.Url.AbsoluteUri);
}

Screenshot