Zaker
Zaker

Reputation: 537

How to use buttons in MVC for different purposes

I do have three buttons in my view. So now I want two buttons to post back and the third button to perform some jquery. How to do this. Like how to make the third button not to post back and perform some jquery actions. Thanks

Upvotes: 1

Views: 218

Answers (2)

Mark Shevchenko
Mark Shevchenko

Reputation: 8197

In HTML the tag button has the attibute type:

To post back data (submit a form) you must set type to submit (this is default value, so you may drop the type attribute at all).

To perform some javascript actions you must set type to button.

In two different submit buttoms use same name and different values:

@using (Html.BeginForm("Login", "Home")
{
    <label for="login">Login:</label>
    @Html.TextBox("login", Model.Login)

    <label for="password">Password:</label>
    @Html.Password("password", "")

    <button type="submit" name="what" value="login">Log in</button>
    <button type="submit" name="what" value="register">Register</button>
    <button type="button" id="facebook">Facebook authentication</button>
}

<script>
$(function() {
    // Perform jquery action.
    $('#facebook').click(...);
});
</script>

In controller:

public ActionResult Login(string login, string password, string what)
{
    if (what == "login")
        . . .
    else if (what == "register")
        return RedirectToAction("Register", "Home");
}

Upvotes: 1

sagar43
sagar43

Reputation: 3456

You can do this like

<form id="myForm">
    <%-- form data inputs here ---%>
    <button id="Postback">Postback</button>
    <button id="JavaScript">JavaScript</button>
</form>

and in javascript

<script type="text/javascript">
      $("#Postback").click(function() {
          var form = $("form#myForm");
          form.attr("action", "@Url.Action("action","MyController")");
          form.submit();
      });

      $("#JavaScript").click(function() {
         Do your javascript something.
      });
</script>

Upvotes: 3

Related Questions