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

score 2 · Accepted Answer · edited May 23 '17 at 12:16

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 '17 at 12:16

Community

1
1

answered May 20 '16 at 05:44

ChrisRun

993
1
10
24

score 0 · Answer 2 · edited May 18 '16 at 13:56

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 '16 at 13:56

SamGhatak

1,487
1
16
27

answered May 18 '16 at 13:39

Fran

6,440
1
23
35

Not entirely sure I understand what you mean. I thought the this.form.submit() function was the same that is triggered behind the . Since I want the dropdownlist to trigger a method in a controller if changed, how do I do this for ajax? – ChrisRun May 18 '16 at 14:05
are you looking to submit the form or just call some random action on the controller? – Fran May 18 '16 at 14:34
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. – ChrisRun May 19 '16 at 09:20
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('') }); – Fran May 20 '16 at 13:18

Dropdownlist onchange event in ASP.NET MVC not using AJAX

2 Answers2