Dropdownlist onchange event in ASP.NET MVC not using AJAX

Question

I'm trying to make use of the onChange event for my dropdownlist in my ASP.NET MVC project, althought it is not working.

The view, containing the form, looks like this:

@using (Ajax.BeginForm("Action", "Controller",
 new AjaxOptions
 {
     HttpMethod = "POST",
     UpdateTargetId = "pages",
     InsertionMode = InsertionMode.Replace
 }))
        {
            @Html.DropDownListFor(m => m.SelectedFrom, Model.ChangeFrom, new { onChange = "this.form.submit();" })                
        }

       <div id="pages"></div>

With the code above, onChange fires when selecting an item in the dropdownlist as expected. Although it's not making use of ajax, it is simply redirecting me to a new page, instead of just updating/filling the "pages-Div".

Although...

If I delete the onChange event for the dropdownlist and add a simple submit button, like this:

 @using (Ajax.BeginForm("SelectedUser", "ReplaceName",
 new AjaxOptions
 {
     HttpMethod = "POST",
     UpdateTargetId = "pages",
     InsertionMode = InsertionMode.Replace
 }))
        {
            @Html.DropDownListFor(m => m.SelectedFrom, Model.ChangeFrom)
            <input type="submit" value="GO" />
        }

it uses Ajax and only reloads the "pages-Div".

Am I missing something?

Regards, Chris

Community · Accepted Answer · 2017-05-23 12:16:07Z

2

I got it working by using jQuery instead:

onchange = "$(this.form).submit();"

Is there a better jQuery solution to this.form.submit();?

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered May 20, 2016 at 5:44

ChrisRun

1,0131 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SamGhatak · Accepted Answer · 2016-05-18 13:56:25Z

0

The first scenario redirecting you to a new page because you are performing a form.submit(), but are returning false so the action is running to completion. if you change new

{ onChange = "this.form.submit();" }

to

{ onChange = "this.form.submit(); return false;" }

you might have to write a tiny javascript function to make both calls.

But I don't think you want that because you aren't going to get the div replacement that the Ajax form will do for you. You'd have to wire that up yourself.

The second one stays on the page because that's how Ajax.BeginForm works. It knows that that input is tied to a Ajax form you are submitting and intercepts the call using the values in AjaxOptions.

edited May 18, 2016 at 13:56

SamGhatak

1,4931 gold badge16 silver badges28 bronze badges

answered May 18, 2016 at 13:39

Fran

6,5801 gold badge26 silver badges37 bronze badges

4 Comments

ChrisRun Over a year ago

Not entirely sure I understand what you mean. I thought the this.form.submit() function was the same that is triggered behind the <input type="submit">. Since I want the dropdownlist to trigger a method in a controller if changed, how do I do this for ajax?

Fran Over a year ago

are you looking to submit the form or just call some random action on the controller?

ChrisRun Over a year ago

Well I want to submit the form since I want the value in the dropdown to be passed to the controller method. But I want the result of the method to return as a partialview, using ajax and only updated relevant div element.

Fran Over a year ago

Since you are changing anything on the server side. I would actually go with a GET here and use $(#pages-div).load(). So something like $('#SelectedFrom').change(function() { $(#pages-div).load('<your controller call>') });

Collectives™ on Stack Overflow

Dropdownlist onchange event in ASP.NET MVC not using AJAX

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related