在 Asp.net MVC 中，Ajax Auto Postback 无法正常工作，而在 Partial View 中使用 Ajax.beginform

Question

在显示框中显示一些文本，当用户更改 下拉列表中的值时。为此我使用了 PartialView、Ajax.BeginForm和Jquery.change函数。

问题：在主View*中，我使用**@html.Beginform()和@Ajax.BeginForm在 partial view 中，所以当我更改 Dropdownlist 中的值时，Jquery Form submit 在 main-View other 中调用 @html.Beginform()比 @Ajax.BeginForm

预期行为：Jquery 表单提交 应在部分视图中调用 @Ajax.BeginForm

//following Scripts are 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>

在主视图中

    @model Shopping.Models.Mob
//Issue:This "Html.BeginForm" is called during submitting from 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>
    }

在 _SelectedMobileList 部分视图中

@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 to invoke "Ajax.BeginForm" but invoking "html.BeginForm"
     $(this).parents('form').submit();

    }
 </script>

在_SelectedMobileDetails Partial-View中，需要显示测试

@model Shopping.Models.Mob
@Html.DisplayFor(x=>x.MobileEmi)

在控制器中

//Issue: Invoking this 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: To invoke this Action Method 
public PartialViewResult FillMobileDetails(Mob Model)
{
Response.Write("test3");
Model=new Mob();
Model.MobileEmi="somEmi";
return PartialView("_SelectedMobileDetails",Model);
}

Answer 1

做一些类似的事情：

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");
        }

还有你的控制器动作：

[HttpPost]
public PartialViewResult FillMobileDetails(string mobileName)
{
Response.Write("test3");
Model=new Mob();
Model.MobileEmi="somEmi";
//get emi and else if need
return Json(new {emi=Model.MobileEmi,detail1="something"});
}