Fire jQuery change event on drop down list in ASP.NET MVC and pass a parameter to url actions

Question

This is a view logic

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "getOurSlider" }))
{
    <input type="search" name="term" id="term" placeholder="enter your search" />

    @Html.DropDownList("DropSearch", new List<SelectListItem>
            {
                new SelectListItem { Text = "search by start ", Value = "stSeach", Selected=true},
                new SelectListItem { Text = "search by end", Value = "endSearsh"},
                new SelectListItem { Text = "search by contains", Value = "conSearch"}
            }, "choose search type")

    <input type="submit" value="start with search" />
}

This is the code in the controller:

public ActionResult searchWithDropsAj()
{
    return View(db.movieTbls.ToList());
}

[HttpPost]
public ActionResult searchWithDropsAj(string term)
{
    string searchoptions = Request["DropSearch"];
    var productSearch = new List<movieTbl>();

    if (searchoptions == "conSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.Contains(term) || pr.movieName == null
                         select pr).ToList();
    }
    else if (searchoptions == "stSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.StartsWith(term) || pr.movieName == null
                         select pr).ToList();
    }
    else if (searchoptions == "endSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.EndsWith(term) || pr.movieName == null
                         select pr).ToList();
    }

    return View(productSearch);
}

I want to use jQuery load when I change the dropdownlist, call the controller action and so on.

I tried many things like this

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var term = $('#term').val();
        $('#DropSearch').change(function () {

            @*$("#getOurSlider").load('@(Url.Action("searchWithDropsAj", "movieTbls")',
                { term: $("#term").val()});*@
            $('#getOurSlider').load('@Url.Action("searchWithDropsAj", "movieTbls")', {term="term" });
        });
    });
</script>

as I couldn't pass the dropdownlist value to controller action as in action works base on this value and i tried many things but not works for me

To be clear: the problem is passing the parameter to the action searchWithDropsAj he didn't send the value to return the normal view not the search result

What exactly happens when you select value from the dropdown? Are you getting any error? Are you able to debug the code of searchWithDropsAj method? — Chetan
– Chetan, Commented May 13, 2018 at 19:59
the problem is passing the parameter to the action searchWithDropsAj he didn't send the value to return the normal view not the search result — user4833581
– user4833581, Commented May 13, 2018 at 20:04

Shyju · Accepted Answer · 2018-05-13 20:26:35Z

If you want to use jQuery load method to update the results when user makes a selection in your dropdown, first step is to get rid of the ajax form.

Render a normal form tag with the action attribute value set to your http post action method.

@using (Html.BeginForm("searchWithDropsAj","movieTbls"))
{
    <input type="search" name="term" id="term" placeholder="enter your search" />

    @Html.DropDownList("DropSearch", new List<SelectListItem>
    {
        new SelectListItem { Text = "search by start ", Value = "stSeach", Selected=true},
        new SelectListItem { Text = "search by end", Value = "endSearsh"},
        new SelectListItem { Text = "search by contains", Value = "conSearch"}
    }, "choose search type")

    <input type="submit" value="start with search" />
}
<div id="getOurSlider"></div>

Now listen to the change event on this SELECT element and read the input and select element value and send it to the server.

$(document).ready(function () {

    $('#DropSearch').change(function () {

        // read the dropdown selection
        var val = $(this).val();  

        // read the url to send data to
        var url = $(this).closest("form").attr("action");  

        //read the input value
        var term = $("#term").val(); 

        // make the ajax call
        $('#getOurSlider').load(url, { searchType: val, term: term });
    });

 });

You can add the searchType parameter to your action method. Also make sure that you are not returning a full view (with layout) as you are doing an ajax call to udpate part of the current page. You can use the PartialView method

[HttpPost]
public ActionResult searchWithDropsAj(string term, string searchType)
{
    var productSearch = new List<movieTbl>();
    if (searchType == "conSearch")
    {
      // your existing code to get data
    }
    // your existing code to get data       

    return PartialView(productSearch);
}

Some tips

If something is not working, open the browser dev tools and check the console tab to see whether there are any script errors.
Check the network tab to see whether the ajax call to the searchWithDropdAj action method is made. Check what the response status is. If everything goes good, It should be a 200 response. Check the response tab to further verify the markup returned from the ajax call.
If the response is not 200, but something like 500, that means your server code crashed and returned the exception details and 500 status code back. Check the response tab to see the exception detail. Also try to put breakpoint in your server code and inspect the parameter values are expected.
This goes with item #1. Make sure your jQuery dependent code is executed only after jQuery is loaded to the page. If you get a message saying $ is not defined, that means, you are trying to execute some code which use jQuery, even before jQuery is loaded to the page. Check the view source of the page to make sure the order is correct (jQuery included first, then your script which uses jQuery). Often times, people put the jQuery dependent script on the razor view, but forgot to put it inside the Scripts section. Read where should i place the js script files in a mvc application so jquery works well? for further reference

Collectives™ on Stack Overflow

Fire jQuery change event on drop down list in ASP.NET MVC and pass a parameter to url actions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related