Question

所以我已经做了一些研究和谷歌搜索如何做到这一点，但我遇到了障碍并需要帮助，我遇到填充GridView（WebGrid MVC）与DropDownList值的选定值的问题。

我已经设法将控制器数据传递给视图，我只是在选择下拉列表时填充网格。当我在视图中包含网格时，它会在页面呈现时填充它，并且我希望它仅在选择下拉列表值时填充。请协助，我对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');
 });

}）;

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

1 个答案: