Pass javascript return value to controller in MVC 4

Question

In My MVC 4 Application i have a partial view. That contain a drop down list. when i change the drop down list, that value has to send the controller. But it is sending null value. How can i send the drop down value to controller.

Thanks in advance.

Here is my code:

Drop down list Code :

<select name="ddSortByPrice" id="ddSort" onchange="this.form.submit(getComboA(this))")">
<option>-- Sort By Price --</option>
@foreach (var item in ViewBag.SortingStatus){
<option value="@item.Value">@item.Text</option>
}</select>

Javascript Code:

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;
         $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>', new { value: val },        function(result) {
         // TODO: handle the success
         });
 }

Controller code:

public ActionResult WhatsNewSortBy(string value)
    {
        return RedirectToAction("WhatsNewOffers", "Product", new { @sortBy = value});
    }

This link may be helpful for you => stackoverflow.com/questions/6655978/…. Although it discusses MVC3 but the logic will be pretty much the same. Specially if you are using Razor. — Talha Masood
– Talha Masood, Commented Dec 13, 2013 at 11:25
In your example code you set var value = sel.options[sel.selectedIndex].value; However your postback is using the value of an undefined variable val Is this a typo in your example code, or is that typo in your actual code as well? — Jim Yarbro
– Jim Yarbro, Commented Dec 13, 2013 at 11:53
@jyarbro am getting value into "value". i can find it using alert. but in the controller on form submit am getting it as null — Ranjith Kumar Nagiri
– Ranjith Kumar Nagiri, Commented Dec 13, 2013 at 11:58
In your $.post() you are specifically setting value: val, which doesn't exist. — Jim Yarbro
– Jim Yarbro, Commented Dec 13, 2013 at 12:04

Shiva Saurabh · Accepted Answer · 2013-12-19 11:40:48Z

you can use something like

@using (Html.BeginForm("WhatsNewSortBy", "RouteValue", FormMethod.Post))
{
    <span style="display:none;">
    @Html.DropDownList("SortBy", ViewData["SortBy"] as SelectList, "-- Sort By Price --", new { onchange = "this.form.submit()" })

}

Use the SortBy in the object Model as string so that you can again pass it back to the controller

Here in ViewData["SortBy"] you can pass from controller

 IList<SelectListItem> sortBy = new List<SelectListItem>();
        for (int i = 0; i < 100; i++) // add the logic you like 
        {
            SelectListItem sort = new SelectListItem();

                sort.Text = i.ToString();
                sort.Value = i.ToString();
                sortBy.Add(sort);
        }

        ViewData["SortBy"] = sortBy;

you can use the sorting without the use of any javascript here.

KrishnaDhungana · Accepted Answer · 2013-12-13 12:45:00Z

1

First of all, it should be {value:value} not val because looks like val does not exist. Also you don't have to write new for javascript object literal. Try:

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;
         $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>',{ value: value}, function(result) {
         // TODO: handle the success
         });
 }

edited Dec 13, 2013 at 12:45

answered Dec 13, 2013 at 12:36

KrishnaDhungana

2,6844 gold badges29 silver badges37 bronze badges

1 Comment

KrishnaDhungana Over a year ago

@RanjithNagiri - are you posting form twice?

Rui · Accepted Answer · 2013-12-13 18:34:52Z

0

There's nothing wrong with getting the value from the select that way, here a jsfiddle that shows it working with vanillaJS and jquery: http://jsfiddle.net/89JZn/:

<select onchange="handleChangeWithVanillaJs(this)">
    <option value="v1">val1</option>
    <option value="v2">val2</option>
    <option value="v3">val3</option>
</select>

And the the jQuery and plain javascript version of the handler:

var handleChange = function(select){
    var selectedValue = $(select).val();
    alert(selectedValue);
};

var handleChangeWithVanillaJs = function(select){
    var selectedValue = select.options[select.selectedIndex].value;
    alert(selectedValue);
}

The call you are making to $.post is incorrect though, you should be getting a TypeError from that "new { value: value }" and "val" does not exist in {value: val}, the syntax is fieldName: fieldValue. Just pass in {value: value}:

 $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>', { value: value },        function(result) {
         // TODO: handle the success
         });

Make sure your controller action has [HttpPost] and you action's parameter name is value with the appropriate type, i.e.:

[HttpPost]
public ActionResult WhatsNewSortBy(string value)
{
    return RedirectToAction("WhatsNewOffers", "Product", new { @sortBy = value});
}

edited Dec 13, 2013 at 18:34

answered Dec 13, 2013 at 12:12

Rui

4,9163 gold badges32 silver badges35 bronze badges

1 Comment

Rui Over a year ago

Decorate your action method with [HttpPost]: [HttpPost] public ActionResult WhatsNewSortBy(string value){...}

Collectives™ on Stack Overflow

Pass javascript return value to controller in MVC 4

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related