0

I have 2 html files belong to two different controllers

This is belong to Index action of SignupController

Index.html

<div class="signup-small-font pull-right"><a href="/Account/ResetPassword">Forgot password?</a></div>

When click at this link , it will go to that url and make a request to get the view of the ResetPassword Action of AccountController and get the resetPAssword.html

Now what i want is before making that request , i need to append a custom header in the request for the server side . I was using ajax javascript :

function appendHeader(urlCulture){

$.ajax({
    type: 'GET',
    url: urlCulture,
    headers: {
        "Culture": 'zh'
    },

})
}

What should i do in the index.html anchor link to call this function before requesting for the resetPassword.html

Like what I want is when I click at it , it will navigate to Account/Resetpassword and use the response getting from javascript file to render instead of a normal response

Jake Lam
  • 3,254
  • 3
  • 25
  • 44

2 Answers2

1

In your html file 

<div class="signup-small-font pull-right"><a onclick="appendHeader(urlCulture)" href="#">Forgot password?</a></div>

In your js

function appendHeader(urlCulture){
    $.ajax({
        type: 'GET',
        url: urlCulture,
        headers: {
            "Culture": 'zh'
        },
        success: function(res) {
            window.location = 'Account/ResetPassword';
        }

    })
}

Give it a try. Im not quite sure if this is what you want to do.

Joven28
  • 769
  • 3
  • 12
1

you are using routes, you need to get the url from the javascript function

there is an example of that here: Get local href value from anchor (a) tag

you could make something similar:

<div class="signup-small-font pull-right"><a onclick="return appendCustomHeader(this);" href="/Account/ResetPassword">Forgot password?</a></div>

in your js function like the previous reply you could make something like this:

function appendCustomHeader(element){

    var url = element.href; // to get full url 

    $.ajax({
        type: 'GET',
        url: url, 
        headers: {
            "CustomHeader": 'YourCustomHeader'
        },
        success: function(res) {
            // here you make anything else with your response
        }
    })

   return false;
}

I've not tested it, I hope it works for you.

it seems you can disable href redirecttion returning false,

see this:

How can I disable HREF if onclick is executed?

Bonestack
  • 81
  • 6
  • Hi, this approach somehow also send the request twice, once with the header , and once without it – Jake Lam Jun 29 '18 at 06:45
  • Then "href" is working, that is the request without header. Try using a different attribute name instead "href", I've edited the answer. please see it. – Bonestack Jun 29 '18 at 06:58
  • If i change to route , it no longer navigate to that page. Like what I want is when I click at it , it will navigate to Account/Resetpassword and use the response getting from javascript file to render instead of a normal response – Jake Lam Jun 29 '18 at 07:16
  • I've edited. return false to disable href redirection, try it. – Bonestack Jun 29 '18 at 07:21
  • putting return false wont navigate to that page even though I still get the correct response. This is not what i want . So the idea is I need to navigate to that page, but it will render the page with the response got from the javascript file – Jake Lam Jun 29 '18 at 07:31
  • there is an answer for that, see it here: https://stackoverflow.com/questions/35236874/setting-custom-request-header-on-a-page-redirect it seems that you can't edit header on a redirect, instead try using a form and send the variables by post fields. – Bonestack Jun 29 '18 at 07:46
  • Oops, so that's mean there is no way to accomplish this – Jake Lam Jun 29 '18 at 07:53