iJade
iJade

Reputation: 23791

Passing parameters to Controller on click of a button

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>

Upvotes: 1

Views: 55361

Answers (5)

DarkVision
DarkVision

Reputation: 1423

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

Upvotes: 3

AjItH V S
AjItH V S

Reputation: 99

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>

Upvotes: 0

Chris Harland
Chris Harland

Reputation: 476

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>

Upvotes: 0

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

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);
}

Upvotes: 3

robasta
robasta

Reputation: 4701

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);
    }

Upvotes: 0

Related Questions