How to invoke my post method when I'm changing dropdown list in ASP.NET MVC

Question

I'm very new to MVC and Javascript so please be patient with me, I'm working on small application and I came to part when I need to select something from dropdown list and based on that selection I need to redirect user to another View, I also need to determine somehow where I should redirect user, so that is reason why I tried to pass parameter also ( database ID to my post method) but unfortunatelly this is not working, in section below I will post my code:

Method which is sending data to my DropDownList :

 public ActionResult ShowArticleGroup()
 {
    List<ArticleGroup> articlesGroups = GroupsController.GetAllGroups();


    ViewBag.articlesGroups = articlesGroups;
    return View(articlesGroups);

 }




[HttpPost]
public ActionResult ShowArticleGroup(string id)
{
   //Here I wanted to take ID of selected Group and because there will be allways 3 Groups  I can do if else and Redirect by ID
   if(id =="00000000-0000-0000-0000-000000000002")
   {
      return RedirectToAction("Create","Article");
   }
   return RedirectToAction("Create", "Article");
 }

And my VIEW - there is only one control on the view : just one dropdown, and based on selection I should be redirected to another view, and I wanted here to take ID of selected group and by that I wanted to redirect user to appropiate view:

@model IEnumerable<Model.ArticleGroup>


@{
    ViewBag.Title = "Add new article";
}
<h3 style="text-align:center">Choose article group</h3>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group" style="text-align:center">
            @Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null, new { onchange = "document.location.href = '/Articles/ShowArticleGroup/' + this.options[this.selectedIndex].value;" })
        </div>

    </div>

}

Community · Accepted Answer · 2017-05-23 11:47:01Z

First of all, usage of location.href on DropDownList seems wrong here:

@Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null, 
 new { onchange = "document.location.href = '/Articles/ShowArticleGroup/' + this.options[this.selectedIndex].value;" })

AFAIK, location.href used for redirect to another page using HTTP GET, hence it will try to call first ShowArticleGroup action method without parameter, and the URL parameter simply ignored since given URL parameter only exist in POST.

To submit the form with DropDownList, you need to handle change event triggering POST into controller action method:

jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#Group").change(function() {
            var groupId = $("#Group").val();
            $.post('@Url.Action("ShowArticleGroup", "ControllerName")', { id: groupId }, function (response, status) {
                 // response handling (optional)
            });
        });
    });
</script>

DropDownList

@Html.DropDownList("Group", new SelectList(ViewBag.articlesGroups, "GroupID", "GroupTitle.Name"), null)

I recommend you using strongly-typed DropDownListFor with binding to a viewmodel approach if you want to pass viewmodel contents during form submit.

NB: $.post is shorthand version of $.ajax which uses POST submit method as default.

Related issues:

Autopost back in mvc drop down list

MVC 4 postback on Dropdownlist change

Collectives™ on Stack Overflow

How to invoke my post method when I'm changing dropdown list in ASP.NET MVC

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