Question

I have the following code that populates a Drop Down List and auto submits a form but it’s not passing the id back to the controller.

<script type="text/javascript">
    $(function () {
        $("#ArticleID").change(function () {
            $('#TheForm').submit();
        });
    });
</script>

@using (Html.BeginForm("Details", "Article", FormMethod.Post, new { id = "TheForm" })){
    @Html.DropDownList("ArticleID", (SelectList)ViewBag.ArticleId, "Select Article") 
}

I get:

/Article/Details

But need:

/Article/Details/1

I’m following a tutorial that stops at this point. I’m not quite sure what is going on here regarding TheForm I tried to put ArticleID but that didn’t work. How do I do this?

---

I’ve also tried it without jQuery like this,

@using (Html.BeginForm("Details", "Article", FormMethod.Post, new { id = "TheForm" })){

@Html.DropDownList(
"ArticleID",
(SelectList)ViewData["Articles"],
"Please Select an Article",
     new
     {
         onchange = "document.getElementById('TheForm').submit();"
     })
 }

But it doesn’t send the parameter through either.

Answer 1

The url is determined before the page is rendered in the following line:

@using (Html.BeginForm("Details", "Article", FormMethod.Post, new { id = "TheForm" }))

which renders:

<form action="/Article/Details" id="TheForm" method="post">

Since the value that you want to add to the Url, ArticleID, is determined by the dropdown selection, you’ll need to manipulate the action attribute of the form using JavaScript.

Something like this would probably work:

<script type="text/javascript">
    $(function () {
        $("#ArticleID").change(function () {
            // The following line was changed to use @naspinski's suggestion
            var actionUrl = '@Url.Action("Details", "Article")/' + $('#ArticleID').val();
            $('#TheForm').attr('action', actionUrl);
            $('#TheForm').submit();
        });
    });
</script>

With that said, this feel awkward to me. It may be worth considering how that value needs or will be used. Does it really need to be part of a route? If not, you can avoid this manipulating the action attribute altogether.