MVC C# Pass parameter to VIA ActionLink to Controller

Question

Issue

I have a link on my Register page which needs to call a method in the Controller that sends out a code. When the user finishes the form they click submit and you can check the codes match and register the user.

The problem I am having is when the user clicks the Send Code link, I need to pass the email that has been entered as a parameter which i can't seem to do.

Code

Here is how my ActionLink is setup:

<%: Html.ActionLink("Send verification code", "Verify", new { id = "codeLink" })%>

This ActionLink makes a Javascript AJAX call to the method in the Controller to stop the page refreshing. The variable 'email' is populated as i have debugged and tested this.

    $("#codeLink").click(function (e) {
        e.preventDefault();

        var dataToPost = "{ email:'" + email + "'}";

        $.ajax({

            url: $(this).attr("href"),
            data: dataToPost,
            type: "POST",
            dataType: 'json',
            cache: false,
            contentType: "application/jsonrequest; charset=utf-8"
        });
    });

The way the email box is setup is like below:

        <p>
            <%:Html.Label(Resources.UserEmailAddress)%>
            <%:Html.TextBoxFor(m => m.uEmail, new { id = "uEmail" }) %>
            <%:Html.ValidationMessageFor(m => m.uEmail) %>
        </p>

These steps successfully call the method on the controller but the parameter (JSON) does not get passed.

    public void Verify(string email)
    {
        var VerificationCode = Guid.NewGuid().ToString();
        VerificationCode = VerificationCode.Substring(VerificationCode.IndexOf("-") + 1, 4);

        Session["VerificationCode"] = VerificationCode;

        var emailUsername = new EmailValidationCode();
        emailUsername.SendEmail(email, VerificationCode);
    }

So I need a way of the user clicking "Send Code" which stays on the same page and calls the Verify method in the controller, passing the email that has been entered above it.

I assume you have a typo in your `ActionLink()` - your using [this overload](https://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx#M:System.Web.Mvc.Html.LinkExtensions.ActionLink%28System.Web.Mvc.HtmlHelper,System.String,System.String,System.Object%29) which adds a route value, not a html attribute (your not generating an element with `` — , Feb 10 '17 at 12:38
If its not a typo, then your just making a normal redirect and not sending anything for the `email` parameter — , Feb 10 '17 at 12:41
@StephenMuecke Sorry I am unsure what you mean. Could you explain and show me. — Ben Clarke, Feb 10 '17 at 12:44
You should use simple `Click`. @StephenMuecke explains better above, — Mihai Alexandru-Ionut, Feb 10 '17 at 12:45
It needs to be `Html.ActionLink("Send verification code", "Verify", null, new { id = "codeLink" })` in order to add `id="codeLink"` in the `` tag — , Feb 10 '17 at 12:45
@StephenMuecke is right, check this for furhter info : http://stackoverflow.com/questions/200476/html-actionlink-method — er-han, Feb 10 '17 at 12:47
@BenClarke, also, you should look at my answer, because you have to use `JSON.stringify()` in order to send a json `object`. — Mihai Alexandru-Ionut, Feb 10 '17 at 12:48
Please do not save the verification code in session because mostly verification links are valid for a day — Mohtisham Zubair, Feb 10 '17 at 13:01

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-17T13:41:50.577

3

You have to pass a javascript object.

var dataToPost = { email:email};
$.ajax({

        url: $(this).attr("href"),
        data: dataToPost,
        type: "POST",
        dataType: 'json',
        cache: false
 });

Also, contentType is the type of data you're sending, so application/json; The default is application/x-www-form-urlencoded; charset=UTF-8.

If you use application/json, you have to use JSON.stringify() in order to send JSON object.

JSON.stringify() turns a javascript object to json text and stores it in a string.

var dataToPost = { email:email};
$.ajax({

        url: $(this).attr("href"),
        data: JSON.stringify(dataToPost),
        type: "POST",
        dataType: 'json',
        cache: false,
        contentType: "application/json; charset=utf-8"
 });

edited Feb 17 '17 at 13:41

answered Feb 10 '17 at 12:32

Mihai Alexandru-Ionut

47,092
13
101
128

Thanks. If he use `application/jsonrequest; charset=utf-8` he have to `stringify` the javascript object, using JSON.stringify. – Mihai Alexandru-Ionut Feb 10 '17 at 12:35
This did not work. What parameter should the 'Verify' method accept? A String or an Object? – Ben Clarke Feb 10 '17 at 12:36
Have you removed `application/jsonrequest; charset=utf-8` ? – Mihai Alexandru-Ionut Feb 10 '17 at 12:38
Yes i removed that bit. – Ben Clarke Feb 10 '17 at 12:39
@BenClarke , have a look at my answer. – Mihai Alexandru-Ionut Feb 10 '17 at 12:41
great explaination for default behavior – Mohtisham Zubair Feb 10 '17 at 12:58
@Alexandru-IonutMihai Finally got it working. It was a mix between your answer and Stephen Muecke comment. Thanks for your help! – Ben Clarke Feb 10 '17 at 13:25

MVC C# Pass parameter to VIA ActionLink to Controller

Issue

Code

1 Answers1