Question

该网页包含两个asp.net mvc 4 dropdownlistfor controls。它们的目的是级联下拉，使用jquery mobile css选择一个下拉列表来过滤第二个下拉列表的值。

当页面加载时，每个下拉列表的样式都是正确的，使用jquery移动主题。

我从第一个下拉列表中选择一个选项，onchange事件触发提交ajax请求/表单的jquery。我可以在mvc动作中点击一个断点，该动作正在收集/过滤数据以绑定到第二个下拉列表。并且，第二个下拉列表可以无误地绑定。

然而，它不再具有jquery移动主题/ css样式。它看起来像一个普通的HTML选择列表。为什么呢？

//asp.net mvc 4 razor syntax
@using ( Ajax.BeginForm( "EmployeeExpense", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "selectEmployeeExpense" } ) )
{
  @Html.DropDownListFor( m => m.EmployeeExpenseCategoryId, Model.EmployeeCategoriesDistinct, "Select Expense Category", new { id = "ddlEmployeeExpenseCategories", data_mini = "true", data_native_menu = "false" } )
}
@Html.Partial( "_EmployeeExpense" )

//jquery
$( "#ddlEmployeeExpenseCategories" ).change( function () {
$( "#ddlEmployeeExpenseCategories" ).closest( 'form' ).submit();

//c#
[HttpGet]
public ActionResult EmployeeExpense()
{
  //get data for second drop down
  return PartialView( "_EmployeeExpense", model);
}

//_EmployeeExpense partial asp.net mvc view
@model Expense
@Html.DropDownListFor( m => m.EmployeeExpenseId, Model.EmployeeExpensesFiltered, "Select Expense", new { id = "ddlEmployeeExpenses", data_mini = "true", data_native_menu = "false" } )

Answer 1

@Omar是对的。将jquery ui .selectmenu()放在我的外部javascript文件的函数中，并使用onSuccess ajax属性调用该函数。这是我改变的。谢谢奥马尔。

//asp.net mvc razor syntax
@using ( Ajax.BeginForm( "EmployeeExpense", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "selectEmployeeExpense", OnSuccess = "CreateSelectMenu" } ) )
  {
      @Html.DropDownListFor( m => m.EmployeeExpenseCategoryId, Model.EmployeeCategoriesDistinct, "Select a Category", new { id = "ddlEmployeeExpenseCategories", data_mini = "true", data_native_menu = "false" } )
  }

//added js function with selectmenu jquery ui method to external js file
function CreateSelectMenu() {
  $( "#ddlEmployeeExpenses" ).selectmenu();
}

为什么第二个asp.net mvc dropdownlist会在成功绑定数据后丢失它的jquery移动样式？

1 个答案: