locked
call action method in controller on dropdown list RRS feed

  • Question

  • User2131089582 posted

    i was following this tutorial https://stackoverflow.com/questions/5669619/asp-net-mvc2-dropdownlist-and-url-action how to make dropdownlist with Url.Action , so my goal is when i select items on dropdown list it will call an action on a controller with the parameter value of the selected Dropdownlist value, here is my code 

      [Route("FindByChapter/{author}/{chapterId}")]
            public async Task<ActionResult> FindByChapter(int? number,string author,string chapterId,int? page,string currentFilter)
            {
                await SetChapterViewBag();
    
               //Some of my code
                return View("FindByChapter","",model);
            }
    
            public async Task SetChapterViewBag()
            {
                var model = await this.chapterRepository.GetAll();
                ViewBag.chapters = model;
            }
    
    
            <form id="theForm" action="@Url.Action("FindByChapter", "Book",new { author = ViewBag.authorName})" method="POST">
                @Html.DropDownList("chapterId",new SelectList(ViewBag.chapters,"Id","Name","SlugUrl"),new { id = "theDropDown" })
            </form>
    
    <script>
        $('#theDropDown').change(function (event) {
            var f = $('#theForm');
            $.post(f.attr('action'), f.serialize(), onSuccess);
        });
    </script>
    
    
    
    

    But when i select iitem on dropdown list, noting in happen, i did not call my action method, Thanks

    Sunday, January 27, 2019 11:48 PM

Answers

  • User1520731567 posted

    Hi hocamahdi99,

    According to your code,I suggest that you pay attention to the following points:

    <form id="theForm" action="@Url.Action("FindByChapter", "Book",new { author = ViewBag.authorName})" method="POST">
                @Html.DropDownList("chapterId",new SelectList(ViewBag.chapters,"Id","Name","SlugUrl"),new { id = "theDropDown" })
            </form>

    1.I saw you use <form> surround the ddl,it need type='submit' button to jump to action.So, I suggest you could remove <form>.

    [Route("FindByChapter/{author}/{chapterId}")]
            public async Task<ActionResult> FindByChapter(int? number,string author,string chapterId,int? page,string currentFilter)
            {

    2. I saw you use attribute route on action,so you need to pay attention to the url in ajax,it should match [Route]

    For example:

    @*<form id="theForm" action="@Url.Action("FindByChapter", "Home",new { author = ViewBag.authorName})" method="POST">*@
        @Html.DropDownList("chapterId", new SelectList(ViewBag.chapters, "Id", "Name", "SlugUrl"), new { id = "theDropDown" })
    @*</form>*@
    
    @section scripts{
    <script>
        $('#theDropDown').change(function (event) {
    
             $.ajax({
                       url: '/FindByChapter/1/1', //this url match [Route]
                      // url: '@Url.Action("FindByChapter", "Home")',//if you would like controllerName/actionName/xx,you could remove [Route] 
    dataType: "json", data: JSON.stringify({ author: "111" }), //pass parameter,such as:author ="111" type: "Post", contentType: "application/json; charset=utf-8", success: function (result) { alert("111"); }, error: function (xhr) { alert("error"); } }); }); </script> }

    I can pass parameter author ="111" by ddl successfully,like the picture:

    More details about Route,you could refer to:

    https://blogs.msdn.microsoft.com/webdev/2013/10/17/attribute-routing-in-asp-net-mvc-5/

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 28, 2019 7:57 AM