把DropDownList的值赋给@Ajax.ActionLink

Question

我有一个Partial View,DropDownList。我有Main View，menu，我可以在这里打电话给Partial View。我正在尝试使用Partial View中的filtering以及来自它的参数。为此，我需要将ddl的选定value到@Ajax.ActionLink。我正在尝试使用js来执行此操作，但该页面只是在不调用我的Partial View的情况下重新加载。从主视图

的ActionLink：

@Ajax.ActionLink(
"Parts", 
"PartsPartial", 
new 
{ 
    categorie = "add" 
}, 
new AjaxOptions 
{ 
    HttpMethod = "GET", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "content" 
}, new { @class = "button" } 
) 

形式方法管窥得使过滤：

<form method="get"> 
    <div> 
     <label>Category: </label> 
     @Html.DropDownList("categorie", Model.Categories as SelectList, 
     htmlAttributes: new { @class="form-control"}) 

     <label>Brand: </label> 
     @Html.DropDownList("brand", Model.Brands as SelectList, 
     htmlAttributes: new { @class="form-control" }) 
     <input type="submit" name="add" value="Filter" /> 

    </div> 
</form> 

而且我的控制器：

public ActionResult PartsPartial(string categorie, int? brand) 
    { 
     string str = "add"; 
     List<bs_categories> categoriesList = _db.bs_categories.ToList(); 
     List<bs_brands> brandsList = _db.bs_brands.ToList(); 

     if (categorie == str) 
     { 
      IQueryable<bs_parts> prts = _db.bs_parts; 

      PartsViewModel pViewModel = new PartsViewModel 
      { 
       Parts = prts.ToList(), 
       Categories = new SelectList(categoriesList, "categories_id", "categories_name"), 
       Brands = new SelectList(brandsList, "brands_id", "brands_name") 
      }; 
      return PartialView(pViewModel); 
     } 

     decimal categoryId = Convert.ToDecimal(categorie); 

     var parts = _db.bs_parts.Where(x => x.parts_category_id == categoryId).OrderBy(x => x.parts_id); 

     PartsViewModel pvm = new PartsViewModel 
     { 
      Parts = parts.ToList(), 
      Categories = new SelectList(categoriesList, "categories_id", "categories_name"), 
      Brands = new SelectList(brandsList, "brands_id", "brands_name") 
     }; 
     return PartialView(pvm); 
    } 

这里是JS做替换：

<script> 
    $(function() { 
     $('#add').click(function() { 
      var type = $('#categorie').val(); 

      $.ajax({ 
       url: this.href, 
       type: 'GET', 
       data: { type: type }, 
       cache: false, 
       success: function (result) { 
        $('#content').prepend(result); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

可能是我错过了什么？

Answer 1

需要输入的类型更改为button：

<form method="get"> 
    <div> 
     <label>Category: </label> 
     @Html.DropDownList("categorie", Model.Categories as SelectList, 
     htmlAttributes: new { @class="form-control"}) 

     <label>Brand: </label> 
     @Html.DropDownList("brand", Model.Brands as SelectList, 
     htmlAttributes: new { @class="form-control" }) 
     <input type="button" id="add" name="add" value="Filter" /> 

    </div> 
</form> 

时，你的类型submit你的Ajax代码将永远不会被调用