ASP.NET MVC action on button click

Question

I want to take some action on a button click the code is given below--->

<% if(Model!=null && Model.Count>0){%>
<ul>
<% foreach(var Movie in Model)
        {
            %> <li> <%= Movie.Id %>  
            <%= Movie.Title %>  
            <%= Movie.ReleaseDate %> 

            <input type="button" value="edit" name="edit" onclick="EditMovie" /> 
            <input type="button" value="delete" name="delete" /> </li> 
            <% } %>
<% } %>
</ul>

I have some functionality to do, but how to link up these buttons to those controls ?

You can have a form associated with each button, with some action pointing to a controller action, or you can have an ajax call — jose
– jose, Commented Jan 4, 2013 at 12:42
use javascript or jquery to take some action when button is clicked. — Karthik Chintala
– Karthik Chintala, Commented Jan 4, 2013 at 12:53

Darin Dimitrov · Accepted Answer · 2013-01-04 13:10:36Z

You could have a separate form for each button:

<ul>
    <% foreach(var Movie in Model) { %> 
    <li> 
        <%: Movie.Id %>  
        <%: Movie.Title %>  
        <%: Movie.ReleaseDate %> 
        <%= Html.BeginForm("EditMovie", "Movies", new { id = Movie.Id }, FormMethod.Post) { %>
            <input type="submit" value="edit" name="edit" /> 
        <% } %>
        <%= Html.BeginForm("DeleteMovie", "Movies", new { id = Movie.Id }, FormMethod.Post) { %>
            <input type="submit" value="delete" name="delete" /> 
        <% } %>
    </li> 
    <% } %>
</ul>

and then you will have 2 respective controller actions:

[HttpPost]
public ActionResult EditMovie(int id)
{
    ...
}

[HttpPost]
public ActionResult DeleteMovie(int id)
{
    ...
}

As an alternative to using forms you could use AJAX:

<ul>
    <% foreach(var Movie in Model) { %> 
    <li> 
        <%: Movie.Id %>  
        <%: Movie.Title %>  
        <%: Movie.ReleaseDate %> 

        <%= Ajax.ActionLink(
            "edit", 
            "EditMovie", 
            "Movies", 
            new { id = Movie.Id }, 
            new AjaxOptions { HttpMethod = "POST" }
        ) %>

        <%= Ajax.ActionLink(
            "delete", 
            "DeleteMovie", 
            "Movies", 
            new { id = Movie.Id }, 
            new AjaxOptions { HttpMethod = "POST" }
        ) %>
    </li> 
    <% } %>
</ul>

Don't forget to include the jquery and jquery.unobtrusive-ajax.js scripts to your page if you decide to use Ajax.ActionLink helpers.

Joshua · Accepted Answer · 2013-01-04 13:08:19Z

Easiest approach? Something like this:

<% if(Model!=null && Model.Count>0){%>
<ul>
    <% foreach(var Movie in Model) { %> 
        <li>
            <%= Movie.Id %>  
            <%= Movie.Title %>  
            <%= Movie.ReleaseDate %> 
            <% using (Html.BeginForm("EditMovie")) { %>
                <%: Html.Hidden("Id", Movie.Id) %>
                <input type="submit" value="edit" name="edit" /> 
                <input type="submit" value="delete" name="delete" /> 
            <% } %>
        </li> 
    <% } %>
</ul>
<% } %>

And then in your code behind:

public ActionResult EditMovie(int Id, string edit, string delete)
{
    if (delete != null)
    {
        // delete 
    }

    if (edit != null)
    {
        // edit
    }

    return View();
}

Stuart Hallows · Accepted Answer · 2013-01-04 13:13:06Z

0

The jQuery to hook up handlers would be something like;

    $(document).ready(function(){
    $('input[type="button"]').on('click', function(e){
        // etc
    });
});

answered Jan 4, 2013 at 13:13

Stuart Hallows

8,9735 gold badges47 silver badges57 bronze badges

Comments

Adriano Silva · Accepted Answer · 2013-01-04 14:08:32Z

0

You can handle form action with Jquery.

$(document).ready(function(){
    $('.button-edit').on('click', function(e){
        $('#formMovie').attr('action','/edit/'+ someParameter)
    });
    $('.button-delete').on('click', function(e){
        $('#formMovie').attr('action','/edit/' + someParameter)
    });
});

answered Jan 4, 2013 at 14:08

Adriano Silva

2,5861 gold badge17 silver badges29 bronze badges

Comments

Alexey Zimarev · Accepted Answer · 2013-10-25 12:16:58Z

0

    foreach {
...
        <button type="button" class="btn btn-default editButton" id="[email protected]">Edit</button>
...
    }

@section Scripts {
    <script type="text/javascript">
    $(document).ready(function () {
        $("editButton").click(function () {
            var id = this.id.split("_")[0];
            location.href = '@Url.Action("EditMovie", new RouteValueDictionary() { { "Controller", "Movie" } } )?id=' + id;
        });
    });
    </script>
}

answered Oct 25, 2013 at 12:16

Alexey Zimarev

19.8k2 gold badges67 silver badges93 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC action on button click

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related