通过ajax调用使用webgrid控件渲染局部视图

时间:2015-06-22 12:11:15

标签: ajax asp.net-mvc

我在我的ajax调用中遇到问题,渲染包含web网格控件的局部视图。我不能渲染部分视图。我在这里做错了什么

我的观点我需要使用ajax调用替换响应文本

<div id="searchArea">@{if (Model.SearchResultSupplierViewModels.Count() > 0){ Html.RenderPartial("_SearchResult", Model.SearchResultSupplierViewModels);}}</div>

调用我的局部视图的Ajax调用

 $.ajax({
            url: '@Url.Action("GetSearchResultBasedOnFilters", "SearchResult")',
            contentType: 'text/html; charset=utf-8',
            type: 'GET',
            dataType: 'html',
            data: {
                supp_fullCheckList: supp_fullCheckList, practice_fullCheckList: practice_fullCheckList, county_fullCheckList: county_fullCheckList,
                state_fullCheckList: state_fullCheckList, ratebase_sliderValue: ratebase_sliderValue, clientRating_sliderValue: clientRating_sliderValue, panelRating_sliderValue: panelRating_sliderValue
            },
            success: function (response) {
                    $('#searchArea').html(response);
                    alert(response);
                },
        error: function (xhr, status, error) {
            alert(status + " : " + error);
        }});

使用网格控件的部分视图

 @model List<Panelpartnership.Domain.SearchResultSupplierViewModel>

@{ 
if (Model != null && Model.Count() > 0)
{
    var grid = new WebGrid(source: Model, rowsPerPage: 10, ajaxUpdateContainerId: "searchArea", defaultSort: "SupplierId");

    grid.GetHtml(
        tableStyle: "webgrid",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("SupplierId", header: "Supplier Id"),
            grid.Column("SupplierName", header: "Supplier Name"),
            grid.Column("SupplierLocation", header: "Supplier Location")
        )
    );   
}
else
{
    @:There are no suppliers. Please use different filtering conditions for more searching!
}

}

最后我的控制器

 [HttpGet]
    public ActionResult GetSearchResultBasedOnFilters(string supp_fullCheckList, string practice_fullCheckList, string county_fullCheckList, 
        string state_fullCheckList,string ratebase_sliderValue, string clientRating_sliderValue, string panelRating_sliderValue)
    {
        try
        {
            List<SearchResultSupplierViewModel> tSearchResultViewModel = new List<SearchResultSupplierViewModel>();
            tSearchResultViewModel = searchresultmanager.GetSearchResultBasedOnFilterConditions(supp_fullCheckList, practice_fullCheckList, county_fullCheckList,
                state_fullCheckList, ratebase_sliderValue, clientRating_sliderValue, panelRating_sliderValue);

          return PartialView("_SearchResult", tSearchResultViewModel);
        }
        catch (Exception ex)
        {
            return Json(new { ok = false, message = ex.Message });
        }
    }

1 个答案:

答案 0 :(得分:0)

我想出了这个问题。问题在于我的webgrid控件。当我改变我的webgrid控件时,问题就消失了。这是更新的代码

@model List<Panelpartnership.Domain.SearchResultSupplierViewModel>

@{
if(Model != null && Model.Count()>0)
{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
    selectionFieldName: "selectedRow", ajaxUpdateContainerId: "searchArea");
        grid.Pager(WebGridPagerModes.NextPrevious);

         @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("SupplierId", "Supplier Id"),
            grid.Column("SupplierName", "Supplier Name"),
            grid.Column("SupplierLocation", "Supplier Location")
     )) 
}
else{
    <label>No suppliers to display!</label>
}
}