使用 Jquery 在 DropDown select 事件上填充 MVC WebGrid

Question

所以我做了一些研究和谷歌搜索如何做到这一点，但我遇到了障碍并需要帮助，我在使用 DropDownList 值的选定值填充 GridView(WebGrid MVC) 时遇到问题。

我已经设法将控制器数据传递给视图，我只是在努力填充选择下拉列表的网格。当我在视图中包含网格时，它会在页面呈现时填充它，并且我希望它仅在选择下拉列表值时填充。请协助，我是 MVC 的新手

public class HomeController : Controller
{

    public ActionResult Index()
    {

        ProductPortalService.Service1Client client = new ProductPortalService.Service1Client();

        List<Top_100_Result> productType = client.GetTopProductsByTypeName();

        ViewBag.ProductType = new SelectList(productType.Select(x => x.Product_Type_Name).Distinct().OrderBy(x => x));

        return View(productType);
    }


    public JsonResult ProductDescription(string ProductType)
    {
        ProductPortalService.Service1Client client = new ProductPortalService.Service1Client();

        List<Top_100_Result> productDesctriptionList = client.GetTopProductsByCategory(ProductType).Where(x => x.Product_Type_Name == ProductType).ToList();//new List<Top_100_Result>();

        var grid = new WebGrid(productDesctriptionList);
        var htmlString = grid.GetHtml(tableStyle: "paramTable", htmlAttributes: new { id = "grid" }, columns: grid.Columns(
                                    grid.Column("Rank", "Rank"),
                                    grid.Column("Product_Number", "Product Number"),
                                    grid.Column("Product_Description", "Product Description"),
                                    grid.Column("Product Type_Name", "Product Type Name")));


        return Json(productDesctriptionList.Select(x => x.Product_Description)
                        , JsonRequestBehavior.AllowGet);
    }

}

Answer 1

将您的网格放在局部视图中，并通过下拉菜单调用该局部视图 ajax。 像这样使用 jquery：

$('#myDropDown').change( function() {

 /* Get the selected value of dropdownlist */
 var selectedID = $(this).val();

 /* Request the partial view with .get request. */
 $.get('/Controller/MyAction/' + selectedID , function(data) {

     /* data is the pure html returned from action method, load it to your page */
     $('#partialPlaceHolder').html(data);
     /* little fade in effect */
     $('#partialPlaceHolder').fadeIn('fast');
 });

});