如何使相当于@ Ajax.DropDownList？

Question

我在我的MVC3/Razor应用程序中调用当前工作得很好的网格时出现了局部视图。当我AJAX化它时，我将所有@ Html.ActionLink调用转换为@ Ajax.ActionLink。现在我想添加一个DropDownList，但@ Html.DropDownList不会导致AJAX部分回传，并且不存在@ Ajax.DropDownList。

我能做些什么来获得这个下拉列表来回复更改？

编辑：优先，我可以写入我自己的@ Ajax.DropDownList助手的东西是最好的。我确信下面的基于jQuery的解决方案可以工作，如果需要的话我会使用它们，但是我确定我会在其他地方想要这个功能，而且我不希望所有这些小脚本都在附近漂浮。

Answer 1

这就是我想出的 - 它最初是受达灵答案的启发，但我把它在一个完全不同的方向上。

public static MvcHtmlString DropDownList(this AjaxHelper html, string action, RouteValueDictionary routeValues, AjaxOptions options, IEnumerable<SelectListItem> selectItems, IDictionary<string, object> listHtmlAttributes) 
    { 
     var url = new UrlHelper(html.ViewContext.RequestContext); 

     // Wrap it in a form 
     var formBuilder = new TagBuilder("form"); 


     // build the <select> tag 
     var listBuilder = new TagBuilder("select"); 
     if (listHtmlAttributes != null && listHtmlAttributes.Count > 0) listBuilder.MergeAttributes(listHtmlAttributes); 
     StringBuilder optionHTML = new StringBuilder(); 
     foreach (SelectListItem item in selectItems) 
     { 
      var optionBuilder = new TagBuilder("option"); 
      optionBuilder.MergeAttribute("value", item.Value); 
      optionBuilder.InnerHtml = item.Text; 
      if (item.Selected) 
      { 
       optionBuilder.MergeAttribute("selected", "selected"); 
      } 

      //optionBuilder.Attributes["onchange"] = "($this.form).attr('action', '" + url.Action(action, routeValues).Replace("___", item.Value) + "');$(this.form).submit();"; 
      optionHTML.Append(optionBuilder.ToString()); 
     } 
     listBuilder.InnerHtml = optionHTML.ToString(); 
     listBuilder.Attributes["onchange"] = "$(this.form).attr('action', '" + url.Action(action, routeValues).Replace("___", "' + $(this).first('option:selected').val() + '") + "');$(this.form).submit();"; 
     formBuilder.InnerHtml = listBuilder.ToString(); 

     foreach (var ajaxOption in options.ToUnobtrusiveHtmlAttributes()) 
      formBuilder.MergeAttribute(ajaxOption.Key, ajaxOption.Value.ToString()); 
     string formHtml = formBuilder.ToString(TagRenderMode.Normal); 

     return MvcHtmlString.Create(formHtml); 
    } 

Answer 2

你可以使用一个正常Html.DropDownListFor将它的一些自定义的CSS类，然后认购.change事件并手动触发AJAX请求：

$(function() { 
    $('.someClassYouHaveAddedToYourDdl').change(function() { 
     var page = $(this).val(); 
     $.ajax({ 
      url: '@Url.Action("SomeActionResponsibleForPagination")', 
      type: 'POST', 
      data: { page: page }, // The page parameter might need adapting 
      success: function(result) { 
       // TODO: here you could refresh the part of the DOM containing 
       // the grid with the new results. Use $('.someSelector').html(result); 
      } 
     }); 
    }); 
}); 

Answer 3

使用jQuery你可以解雇change事件像这样，然后提交表单或执行所需的AJAX发布回你想要的路线。

<script type="text/javascript"> 
    $("#dropDownList").change(function() { 
     // your code here 

    }); 
</script> 

Answer 4

晚上好！我重写某些功能以这样的方式

public static MvcHtmlString DropDownList(this AjaxHelper html, 
    string action, 
    AjaxOptions options, 
    IEnumerable<SelectListItem> selectItems, 
    IDictionary<string, object> listHtmlAttributes) 

，但我不能写与HtmlAttributes工作代码。这里是我的变种：

@Ajax.DropDownList("ApplSort", new AjaxOptions() { 
         HttpMethod = "POST", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "target", 
         LoadingElementId = "AjaxSearch" }, 
    new[] 
    { 
     new SelectListItem { Value = "0", Text = "Заявки от новых к старым" }, 
     new SelectListItem { Value = "1", Text = "Заявки от старых к новым" } 
    }, 
    new IDictionary<string, object> { id = "DropDownListSort", @class = "chosen" } 
) 

或

@Ajax.DropDownList("ApplSort", new AjaxOptions() { 
         HttpMethod = "POST", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "target", 
         LoadingElementId = "AjaxSearch" }, 
    new[] 
    { 
     new SelectListItem { Value = "0", Text = "Заявки от новых к старым" }, 
     new SelectListItem { Value = "1", Text = "Заявки от старых к новым" } 
    }, 
    new { id = "DropDownListSort", @class = "chosen" } 
) 

我怎样才能正确地写呢？

问题解决了。写了两个扩展，和它的工作：

public static MvcHtmlString DropDownList(this AjaxHelper html, string action, RouteValueDictionary routeValues, AjaxOptions options, IEnumerable<SelectListItem> selectItems, object htmlAttributes) 
    { 
     return DropDownList(html, action, routeValues, options, selectItems, new RouteValueDictionary(htmlAttributes)); 
    } 

    public static MvcHtmlString DropDownList(this AjaxHelper html, string action, AjaxOptions options, IEnumerable<SelectListItem> selectItems, object htmlAttributes) 
    { 
     return DropDownList(html, action, options, selectItems, new RouteValueDictionary(htmlAttributes)); 
    }