Posting to controller with jQuery

Question

After reading some information I thought this should work. The JS function is called and jQuery animation is spinning, but the action is not posted to. As well I will want the startDate and endDate to be provided from text inputs but for now even hard-coded is not working. Thanks everyone!

Controller:

public class NewsController : Controller
{
    [HttpPost]
    public ActionResult Search(string lang, string pageNumber, string startDate, string endDate, string search)
    {
    }
}

View:

@using (Html.BeginForm())
{
    <a href="#" id="go_button">...</a>
}
<script type="text/javascript">
$('#go_button').click(function () {
        $.post("/News/Search", { startDate: 'start', endDate: 'end'});
});

So the controller action is never invoked if you put a breakpoint in it? What happens when you look with FireBug? Can you see an AJAX request being sent at all? — Darin Dimitrov, Sep 21 '11 at 21:48
Bust out Firebug and see if it is actually attempting to POST or not. That way you'll know if it's on the client or the server (hopefully) — Dave, Sep 21 '11 at 21:49
@Dave: it is posting now, but I don't know what to do with the view the controller returning. I posted some comments in the answer below. Thanks for your help. — mishap, Sep 22 '11 at 00:49

score 0 · Accepted Answer · answered Sep 21 '11 at 21:50

0

Make sure that the script is either located after the anchor in the DOM or wrap in a document.ready:

$(function() {
    $('#go_button').click(function () {
        var url = '@Url.Action("Search", "News")';
        $.post(url, { startDate: 'start', endDate: 'end' }, function() {
            alert('success');
        });
        return false;
    });
});

This should work, at least it should invoke your action. What this action does, whether it throws an exception or something is another matter, but at least you should get into it and have the startDate and endDate parameters properly assigned:

public class NewsController : Controller
{
    [HttpPost]
    public ActionResult Search(string lang, string pageNumber, string startDate, string endDate, string search)
    {
        return Json(new { success = true });
    }
}

answered Sep 21 '11 at 21:50

Darin Dimitrov

1,023,142
271
3,287
2,928

Getting closer, thanks. Now the action is called, but if I remove the callback function it not called. As well my controller is supposed to return a view "return View();" and it will not do it now. Any suggestions ? – mishap Sep 21 '11 at 22:34
@Chuchelo, the thing with removing the callback function seems very weird. Checkout with FireBug or Chrome developper toolbar to see if an AJAX request is being sent when you remove the callback. If you want to return a view then go ahead, but then make sure that you have a success callback to do something useful with the result, like for example inject it into the DOM, otherwise your AJAX request really serves no purpose. – Darin Dimitrov Sep 21 '11 at 22:36
I'm sorry for all these questions but I'm a newbie. So the success callback function will insert the View into DOM ? If the view contains totally new page how can I clear the current DOM(document element) and insert the View html into it ? I'm doing all this because different buttons will call different Actions, otherwise I would have used @@using (Html.BeginForm(ControllerName)).Thanks a lot!!! – mishap Sep 22 '11 at 00:02
@Chuchelo, you don't need a success callback for an AJAX call to work. You need one if you want to do something with the results on the client side. In your case you want to replace the entire page. AJAX is useless for this. AJAX would have been appropriate if you wanted to update only a portion of you view. In your case you should use a Html.BeginForm with multiple submit buttons and each submit button will have a different name. The form will post to a controller action in which you can test which button was clicked and based on it perform different processing and return different view. – Darin Dimitrov Sep 22 '11 at 05:59

score 0 · Answer 2 · answered Sep 22 '11 at 04:44

$.post will only post the request to the server - it won't automatically update your page with your view.

You need to include a success function which you then use to insert the View into the DOM.

e.g.

try something like this in the jquery

$(function() {
    $('#go_button').click(function () {
        var url = '@Url.Action("Search", "News")';
        $.post(url, { startDate: 'start', endDate: 'end' }, function() {
            $('#result').html(data);
        });
        return false;
    });
});

This will post to your action and put the returned view inside an element with the ID 'result'.

You should have your action return a PartialView, if you don't the Layout to be included.

Thank you, I already understand that, but is it possible to put the returned result into the document element, so that I can display the whole view instead of partial. By the way the original problem I'm struggling with is here http://stackoverflow.com/questions/7508233/posting-same-form-to-different-actions-depending-on-button-clicked , not sure if I can ask to have a look, but that where these questions came from. Thanks a lot for your help! — mishap, Sep 22 '11 at 05:27

Posting to controller with jQuery

2 Answers2