How to get parameter value after submit the form in asp.net c# using jQuery

Question

How to get parameter value after submit the form in asp.net c# using jQuery

Ashok Kumar 121

I have created two aspx pages{page1.aspx and page2.aspx} with master page {main.master} and I redirected to page2 from page1 with `<a>` tag button click (in page1) my logic is executing fine but while I'm calling that parameter in page2.aspx using jQuery logic I'm getting null value or Error on console log.

Note :- I have created two aspx pages with master page because in my real time scenario I should work like that.

This is my entire logic

Master page:-


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="main.master.cs" Inherits="main" %>
<!DOCTYPE html>
<html>
<head runat="server">

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

<script type="text/javascript" src="../customjs/custom.js"></script>


<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

<body>
    <form id="form1" runat="server">
        <div>

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>

        </div>
    </form>
</body>
</html>


And page1.aspx page :-



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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<a class="redirectclick">RedirectToPage2</a>
</div>

 <script type="text/javascript">
$(document).ready(function () {
            //"use strict";
           FinalSB();
});
    </script>
</asp:Content>


And page2.aspx page :-



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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script type="text/javascript">
        $(document).ready(function () {
            "use strict";
             FinalOC();
        });
</script>
</asp:Content>


jQuery logic :-


function FinalSB(){

$(".redirectclick").on("click", function (e) {
        e.preventDefault();
        //alert('click');
       redirectopage2();
});

}

function FinalOC(){
//alert('click');


    var p = document.querySelector('message').value;
    alert(p); //null value is coming or value is not defined error coming in console log

    //var searchParams = new URLSearchParams(window.location.search);
    //alert(searchParams);
    //var p = searchParams.get('message'); //null value is coming or value is not defined error coming in console log

}

function redirectopage2() {

    post_to_url('http://localhost:51609/page2.aspx',
    {
        message:"Calling"
        
    }, 'post','_blank');
}

//Form Submit
function post_to_url(path, params, method, targetOpt) {
    method = method || "post";
    targetOpt = targetOpt || "_blank";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("target", targetOpt);
    form.setAttribute("action", path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("disabled", 'true');
            //hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();

}



The entire logic is above and logic is working fine but the parameter value is not coming when I click on the `<a>` tag button please suggest me how to achieve this and where I did the mistake.

I have did this logic as per my experience and next I'm unable to moving to solve this issue.
Please suggest me how to solve this issue.

Sorry for my bad English.

Answer 1

Hi @Ashok Kumar,

According to your needs, I created simple examples to achieve such requirement. Here is the code sample:

Page1:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
        <a class="redirectclick" href="page2.aspx">RedirectToPage2</a>
    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            //"use strict";
            FinalSB();
        });
    </script>
</asp:Content>

Page 2:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:Label runat="server" ID="MessageLabel" hidden="hidden"></asp:Label>

    <script type="text/javascript">
        $(document).ready(function () {
            //"use strict";
             FinalOC();
        });
        <%--function FinalOC() {
            var p = $('#<%= MessageLabel.ClientID %>').text();
            alert(p);
        }--%>
    </script>
</asp:Content>

Page2.aspx.cs

public static string message { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                if (Request.RequestType == "POST")
                {
                    message = Request.Form["Message"];
                    MessageLabel.Text = message;
                }
            }
        }

        [WebMethod]
        public static string getMessage() {
            return message;
        }

custom.js

function FinalOC() {
    $.ajax({
        url: "page2.aspx/getMessage",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d);
        }
    });
}

function FinalSB() {

    $(".redirectclick").on("click", function (e) {
        e.preventDefault();
        //alert('click');
        redirectopage2();
    });

}

function redirectopage2() {

    post_to_url('page2.aspx',
        {
            message: "Calling"

        }, 'post', '_blank');

}

//Form Submit
function post_to_url(path, params, method, targetOpt) {
    method = method || "post";
    targetOpt = targetOpt || "_blank";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("target", targetOpt);
    form.setAttribute("action", path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var input = document.createElement("input");
            input.setAttribute("name", key);
            input.setAttribute("value", params[key]);
            form.appendChild(input);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

Result:

result

The form submission is on the server side, so you can't get the data from the server side from the browser DOM, in this case, you can get it through server controls (e.g. ASP:Label in prevoius example) or Ajax request. On the other hand, as Bruce mentioned, the submitted form does not contain the disaled element.

Best regards,

Xudong Peng

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Ashok Kumar 121 Reputation points

2023-03-03T13:02:55.16+00:00

Hi @XuDong Peng-MSFT thanks for your answer post but my requirement is with master page (And logic should be jQuery or JavaScript) only if you have any other solution please provide.

Thank in advance.
AgaveJoe 19,446 Reputation points

2023-03-03T14:21:28.77+00:00

post but my requirement is with master page

The master page runs on the server while jQuery/JavaScript runs in the browser. There is no concept of a master page when the jQuery/JavaScript runs. It does not matter what server side control renders the jQuery/JavaScript script; content page, master page, or file reference. In the end the JavaScript just needs to be available within the page (rendered). what are you trying to do? Create a global jQuery/JavaScript function?

In my opinion, your solution seems overly complicated when an HTTP request easily handled with standard Web Forms tooling. Page1 can post to page2 which is just an asp button attribute. Or page1 can do a Redirect and add the needed parameters to the URL (querystring). Or page1 can do a server transfer which transfers all of page1's members to page2.

Can you explain the use case?
Ashok Kumar 121 Reputation points

2023-03-06T05:06:46.0366667+00:00

Hi @AgaveJoe thanks for your comment, actually I'm new to this concept and please correct me if I'm doing wrong concept.

What I have tried :- I have created a master page and added two .aspx pages and next I have created a external .js file here I have written some code that is if I click on the page1.aspx page contains redirect button it should redirect to page2.aspx page along with my required fields data of page1.aspx and in page2.aspx page I should take that page1.aspx data using form submit concept with out passing any parameters like this I have tried this and this I have referred these concepts.

Hope you understand my concept and please suggest me how to achieve this.
Sorry for my bad English
Ashok Kumar 121 Reputation points

2023-03-06T05:07:14.97+00:00

And I have tried the same concept once we submit the form I'm trying to get the passed parameter value using this logic FinalOC() in this method I'm getting the value using this var p = document.querySelector('message').value; line code but I'm getting the alert(p); null value [please once refer my question posted] and
@XuDong Peng-MSFT given solution and he said I found that the form was not submitting properly using the master page so my question is can we do form submit using master page if not what is the best practice please guide me.

Note :- As of my knowledge form submitting (directly we cant access the page) is better than passing required parameters to URL (encrypt parameters should pass and decrypt it write logic) {this I understand from my teammates}

Thanks in advance.
XuDong Peng-MSFT 4,746 Reputation points Microsoft Vendor

2023-03-06T07:12:32.7566667+00:00

Hi @Ashok Kumar,

I'm so sorry for the previous reply, I tested the code again and it works with master page. Maybe it's the browser cache or something else causing the previous error. I've edited the answer, please check it if work for you.

Answer 2

Bruce (SqlWork.com) 31,021

The browser does not post disabled fields. Not sure why you would disable a hidden field.

How to get parameter value after submit the form in asp.net c# using jQuery

2 answers

Activity