CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4
Ranjith Kumar Nagiri
Ranjith Kumar Nagiri

Reputation: 863

Pass javascript return value to controller in MVC 4

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});
    }

Upvotes: 0

Views: 4812

Answers (3)

Shiva Saurabh
Shiva Saurabh

Reputation: 1289

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.

Upvotes: 1

Rui
Rui

Reputation: 4886

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});
}

Upvotes: 0

KrishnaDhungana
KrishnaDhungana

Reputation: 2684

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
         });
 }

Upvotes: 1

Related Questions