MVC call method on click with / without postback

Question

I have a question regarding the calling method from view.

Basically on my view I have 2 links:

1 link : When I click on it, some method should be called and executed, but nothing should change on webpage, so no postback.

2 link: When I click on it, some method should happen and postback can happen, on the same page

In controller I have:

public ActionResult FirstMethod(){ return View();}
public ActionResult SecondMethod(){ return View();}

In view:

@Html.ActionLink("Action 1", "FirstMethod", "Controller");
@Html.ActionLink("Action 2", "SecondMethod", "Controller");

So when I click on both action happens but then i get an error saying cannot find FirstMethod.chtml ..

So is this possible to have one method with postback and another one without? And how to return to the same page ... and not try to get FirstMethod.chtml ..

Answer 1

Following solution is based on AJAX -

Controller -

    public class DemoController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult CallMe()
        {
            return new ContentResult() { Content = "This is Demo " };
        }
}

Index.cshtml -

<h2>Index</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#Click").click(function () {
            $.ajax({
                url: "/Demo/CallMe",
                type: "GET",
            error: function (response) {
                    alert(response);
            },
            success: function (response) {
                alert(response);
            }
        });
        });
    })
</script>

<input type="button" value="Click" id="Click" />

First navigate to /demo/Index, that will display the page with above markup with a button in the page. And when we click on the Click button, we have -

Answer 2

The @Html.ActionLink method basically just forwards you to the specified controller-action, you cannot change this, since this is the purpose of the method.

You have to handle the click client-side, and bind a specific action to it (post some data to a url, and do nothing afterwards). One fairly easy way to do this, is to use jQuery.Post

Example from the above jquery link.

Example: Request the test.php page, but ignore the return results.

$.post("test.php");

Answer 3

Actually, there is no postback concept in asp.net mvc. all interactions with server should via the controller/action.

@Html.ActionLink() method just generate a link(tag a in html) and do nothing. everything happens after you send a request(such as click the link) to controller/action, if you want do nothing when click the link, you'd better use AJAX method like this

@Html.ActionLink("Action 1", "FirstMethod", "Controller", null/*routeValues*/, new { id = "link1Id" });
<script type="text/javascript">
$(function () {
    $("#link1Id").click(function () {
        $.get("/Contoller/FirstMethod", function () {
            //do nothing or alert(something)
        });
        return false;
    });
})
</script>

Answer 4

You can simply return another view after you've done what you wanted in your controller action:

public ActionResult SecondMethod()
{
    //do something    
    return View("FirstMethod");
}

After you've seen this you will most probably be disgusted by the use of magic strings to reference views or controllers and that disgust is completely understandable :)

Then you should look whether something like T4MVC could fit your needs.