How to call an action method using jquery and pass search string to action method

Question

I need to pass search string to action method.

View:

<div>
  <input id="search" type="text" placeholder="Search">
  <div id="submitButton"></div>
</div>
<script type="text/javascript">
$("#submitButton").click(function () {
    var options = {};
    options.url = "/Section/Search";
    options.type = "POST";
    options.data = JSON.stringify({ t: $("#search").val() });
    options.contentType = "application/json";
    options.dataType = "json";
    $.ajax(options);
});
</script>

I need to call this action method and take search string.

Controller: Section/Search

[HttpGet]
public ActionResult Search(string SearchResults)
{
    using (var db = new LambertonEntities())
    {
        var article = db.News.ToList();
        return View(article);
    }
}

`options.url = "/Section/Search?SearchResults=" + $("#search").val();` ?? — Venkata Krishna, Mar 09 '15 at 18:11
This is correct but I would need to redirect to that Search page. — user2224493, Mar 09 '15 at 19:15

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Don't get your code becouse you have ajax POST method and HttpGet Controller, but still.

If you want to pass parameters and use POST you can just pass data params as you already do:

$("#submitButton").click(function () {
    var options = {};
    options.url = "/Section/Search";
    options.type = "POST";
    options.data = { SearchResults: $("#search").val() };
    options.contentType = "application/json";
    options.dataType = "json";
    $.ajax(options);
});

But if you want to use GET i recomend to use $.param() method like this:

$("#submitButton").click(function () {
    var options = {};
    options.url = "/Section/Search?" + $.param({ SearchResults: $("#search").val() });
    options.type = "GET";
    options.contentType = "application/json";
    options.dataType = "json";
    $.ajax(options);
});

The best adwantage of using $.param() if you don't need to create url param string at your own no matter how complicated your object is.

If you want to redirect to this action you shouldn't use ajax. Your Controller method should allow GET.

$("#submitButton").click(function () {
    window.location.href = "/Section/Search?" + $.param({ SearchResults: $("#search").val() });
});

This will redirect you to search page in same window.

$("#submitButton").click(function () {
    window.open("/Section/Search?" + $.param({ SearchResults: $("#search").val() }));
});

This will redirect you to search page in new window. For more info.

yes correct but i would need to redirect to search page – user2224493 Mar 09 '15 at 19:15 — user2224493, Mar 09 '15 at 19:15

score 0 · Answer 2 · answered Mar 09 '15 at 18:21

try this:

JS

$("#submitButton").click(function () {
var options = {};
options.url = "/Section/Search";
options.type = "POST";
options.data = JSON.stringify({ searchResults: $("#search").val() });
options.contentType = "application/json";
options.dataType = "json";
$.ajax(options);

});

Server

[HttpPost]
public ActionResult Search(string SearchResults)
{
    using (var db = new LambertonEntities())
    {
        var article = db.News.ToList();
        return View(article);
    }
}

yes correct but i would need to redirect to search page – user2224493 Mar 09 '15 at 19:16 — user2224493, Mar 09 '15 at 19:16

How to call an action method using jquery and pass search string to action method

2 Answers2