jquery - In Asp.net MVC , Ajax Auto Postback failed to work properly,while using Ajax.beginform in Partial View -

to display some-text in display-box,when user changes values in dropdownlist.for purpose used partialview, ajax.beginform , jquery.change function.

issue : in main-view* using **@html.beginform() , @ajax.beginform used in partial view, while changes value in dropdownlist, jquery form submit calling @html.beginform() in main-view other @ajax.beginform

expected behavior:jquery form submit should call @ajax.beginform in partial view

//following scripts included in view, partial-view <script src="~/scripts/jquery-1.10.2.min.js"></script> <script src="~/scripts/jquery.validate.min.js"></script> <script src="~/scripts/jquery.validate.unobtrusive.min.js"></script> 

in main view

    @model shopping.models.mob //issue:this "html.beginform" called during submitting partial view      @using (html.beginform("mobilesell", "mobilesell", formmethod.post))     {     <table>       <tr><td>**@html.partial("_selectedmobilelist", model)**</td>       </tr>        <tr><td><div id="nextfields">**@html.partial("_selectedmobiledetails", model)**</div></td>       </tr>      </table>     } 

in _selectedmobilelist partial-view

@using (ajax.beginform("fillmobiledetails", "mobilesell", new ajaxoptions { httpmethod ="post",                                                                updatetargetid ="nextfields",                                                               insertionmode = insertionmode.replace})) { <td>@html.dropdownlistfor(x => x.mobilename, model.mobilelist, "select one", new { id="drop1"})</td> }  <script>     $(document).ready(fun1)      function fun1()     {   alert("test1");   $("#drop1").change(fun2);   }      function fun2()     {alert("test2");         //jquery function calling submit-form     //expected invoke "ajax.beginform" invoking "html.beginform"      $(this).parents('form').submit();      }  </script> 

in _selectedmobiledetails partial-view,which need display test

@model shopping.models.mob @html.displayfor(x=>x.mobileemi) 

in controller

//issue: invoking action-method. public actionresult mobilesell() { objectresult<sp_fetch_mobile_details_result> objresult = objcontext.sp_fetch_mobile_details(); selectlist objselectlist = new selectlist(objresult.tolist(), "mobilename", "mobilename"); objmobile.mobilelist = objselectlist; return view(objmobile); }  [httppost] //excepted: invoke action method  public partialviewresult fillmobiledetails(mob model) { response.write("test3"); model=new mob(); model.mobileemi="somemi"; return partialview("_selectedmobiledetails",model); } 

do :

function fun2() {      var mobile= $('#mobilename option:selected').text();             var data = {mobilename: mobile  };             $.ajax({                 url: '@url.action("fillmobiledetails","mobilesell")',                 data: json.stringify(data),                 type: "post",                 contenttype: 'application/json',                 datatype: 'json'              }).done(showdetailssucc).fail(showdetailsfail);         }         function showdetailssucc(data) {             //fetch fields via jquery            //$("#detailfield1").html(data.emi);            //............         }         function showdetailsfail() {             alert("error");         } 

and controller action:

[httppost] public partialviewresult fillmobiledetails(string mobilename) { response.write("test3"); model=new mob(); model.mobileemi="somemi"; //get emi , else if need return json(new {emi=model.mobileemi,detail1="something"}); }