Passing parameters to Controller on click of a button

Question

This might be a trivial question, me being a new bee :) Here is my View code

<button type="button" id="btnLogin" onclick="location.href='<%: Url.Action("Authenticate", "Login") %>'" runat="server"></button>

Here is my Controller code

 public ActionResult Authenticate(string username,string password)
    {
        bool status = Login.Authenticate(username, password);
        return View("Status", status);
    }

I'm able to go to that controller but i'm unable to pass the parameters.Can any let me know what is the rite way to pass parameters to controller function.

Full View Code

<table>
    <tr>
        <td>
            <input type="text" id="txtUsername" runat="server" />
        </td>
        <td>
            <input type="text" id="txtPassword" runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <button type="button" id="btnLogin" onclick="location.href='<%: Url.Action("Authenticate", "Login") %>'" runat="server"></button>
        </td>
    </tr>
</table>

With the current answers you're getting there. One thing I wanted to add is that you need the input fields names to match your parameter names in the controller if you want ASP.NET MVC to bind the values. ie <input type="text" id="username" name="username" /> will match with string username — Gabriel
– Gabriel, Commented Dec 11, 2012 at 15:00

AliRıza Adıyahşi · Accepted Answer · 2012-12-11 15:14:34Z

3

You can pass input values with its name attribute.

<%using (Html.BeginForm("Authenticate", "Login"))
{%>
    <table>
        <tr>
            <td>
                <input type="text" id="txtUsername" name="username" />
            </td>
            <td>
                <input type="text" id="txtPassword" name="password"  />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="Login" class="submit_button"/>
            </td>
        </tr>
    </table>
<%}%>

CONTROLLER

[HttpPost]
public ActionResult Authenticate(string username, string password)
{
    bool status = Login.Authenticate(username, password);
    return View("Status", status);
}

edited Dec 11, 2012 at 15:14

answered Dec 11, 2012 at 14:52

AliRıza Adıyahşi

15.9k24 gold badges118 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AliRıza Adıyahşi Over a year ago

If you want to do it with any button (not submit, and no form), you can use ajax post.

iJade Over a year ago

its still giving me null parameters

AliRıza Adıyahşi Over a year ago

Are your view name and action name same? If they are different, write action url to BeginForm like this: Html.BeginForm("Authenticate", "Login") and add HttpPost attribute to action

AliRıza Adıyahşi Over a year ago

Also, model using is the better.Purpose of MVC architecture is using models between controllers and views

iJade Over a year ago

ys they are both same Authenticate.But still getting null parameters,I checked putting a break point in the controller action

|

DarkVision · Accepted Answer · 2016-04-05 14:04:59Z

3

you know there is a third parameter to url action where you can add parameter

@Url.Action("Authenticate", "Login" , new {name = "name"})

you just need a way to add your value there

answered Apr 5, 2016 at 14:04

DarkVision

1,4233 gold badges21 silver badges34 bronze badges

Comments

robasta · Accepted Answer · 2012-12-11 15:05:58Z

0

Use a <form> that posts to the Authenticate method in your controller. Also change the <button> to a <input type="submit"

Like this:

<form method="post" action="@Href("~/account/authenticate")" id="LogOnForm">
.... @*input boxes*@
<input type="submit" value="Login"/>
</form>

EDIT: for ajax login, use this script (jquery is required). Note that the form needs an ID

<script type="text/javascript">
      $(document).ready(function () {
            $("#LogOnForm").submit(function (event) {
                event.preventDefault();                
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/account/authenticate")',
                    data: $("#LogOnForm").serialize(),
                    success: function (data) {                       
                       if (data.Status) {
                            //Logged in succesfully
                         } else {
                            //Login failed
                         }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {                            
                        console.log(xhr.responseText);
                    }
                });
            });
      });

    </script>

EDIT: Controller Modification:

public JsonResult Authenticate(string username,string password)
    {
        bool status = Login.Authenticate(username, password);
        return Json( new @"Status", status);
    }

edited Dec 11, 2012 at 15:05

answered Dec 11, 2012 at 14:47

robasta

4,6915 gold badges39 silver badges54 bronze badges

4 Comments

iJade Over a year ago

well i dont want to post the form...is there any way to do it my way

robasta Over a year ago

then change the method="post" to method="get" or you can use Ajax

iJade Over a year ago

how to do it using AJAX.any useful links

robasta Over a year ago

you will need two things for an ajax login. Firstly, use jquery to perform the ajax query (more here: api.jquery.com/jQuery.ajax) and secondly, your Authenticate method needs to return a JsonResult instead of an ActionResult.

Chris Harland · Accepted Answer · 2012-12-11 15:16:32Z

0

You need to at the parameters into the call string using Javascript

<script type="text/javascript">
    function postdata(location) {
        var url = '<%: Url.Action("Authenticate", "Login", new { username = XXX, password = YYY) %>';
        var Username = document.getElementById(Username).value;
        var Password= document.getElementById(Password).value;
        url = url.replace("XXX", Username );
        url = url.replace("YYY", Password);
        location.href=url;
    }
</script>

<button type="button" id="btnLogin" onclick="postdata()" runat="server"></button>

answered Dec 11, 2012 at 15:16

Chris Harland

4764 silver badges18 bronze badges

3 Comments

avb Over a year ago

You don't 'need' to do that using javascript, it's an option.

iJade Over a year ago

i am still getting null parameters.Checked putting a break point in the controller action

Chris Harland Over a year ago

Fair comment. 'Need' may be the wrong word, but I find it the most effective method.

AjItH V S · Accepted Answer · 2015-10-28 06:23:43Z

0

Missing name property on your input fields. Add a name property to your username and password input boxes. The name property should be same as your action controller arguments.

<table>
    <tr>
        <td>
            <input type="text" id="txtUsername" runat="server" name="username" />
        </td>
        <td>
            <input type="text" id="txtPassword" runat="server"  name="password"/>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <button type="button" id="btnLogin" onclick="location.href='<%: Url.Action("Authenticate", "Login") %>'" runat="server"></button>
        </td>
    </tr>
</table>

answered Oct 28, 2015 at 6:23

AjItH V S

996 bronze badges

Collectives™ on Stack Overflow

Passing parameters to Controller on click of a button

5 Answers 5

6 Comments

Comments

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related