首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >排序后webgrid为空

排序后webgrid为空
EN

Stack Overflow用户
提问于 2012-11-15 03:31:32
回答 2查看 1.4K关注 0票数 2

我在局部视图中定义了一个webgrid。(这是一个MVC4项目。)webgrid并不是局部视图中的唯一内容,因此webgrid被绑定到局部视图模型中的一个列表。

当单击列标题时,网格会按其应有的方式进行填充和排序,但是当我通过调用操作方法(通过使用Ajax.BeginForm设置的表单post )重新填充网格,然后单击列标题时,网格内容会消失。(操作方法使用用户在表单上提供的搜索条件查询数据库。)

这可能是什么原因造成的?如何解决呢?

局部视图以以下内容开头:

代码语言:javascript
复制
@model DonationImport.Models.GiftWithSplits

局部视图的内容位于由以下内容指定的表单中:

代码语言:javascript
复制
@using (Ajax.BeginForm("SearchConstit", "Batch", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "constitSearchArea" }))

WebGrid的定义如下:

代码语言:javascript
复制
@{
    var constitGrid = new WebGrid(source: Model.SearchResults, rowsPerPage: 100, ajaxUpdateContainerId: "constitGrid");                       
    <div style="overflow-x: scroll; width: 100%;">
        <div style="width: 1910px;">
            @constitGrid.GetHtml(htmlAttributes: new { id = "constitGrid" },
                columns: constitGrid.Columns(
                    constitGrid.Column(format: @<text><button onclick="selectConstituent('@item.Constituent_ID')" >select</button></text>, style: "searchResultsColumnWidth"), 
                    constitGrid.Column("Constituent_ID", header: "ConstitID", style: "searchResultsColumnWidth", format: @<text>@Html.ActionLink((string)item.Constituent_ID, "PriorGifts", new { constitID = item.Constituent_ID }, new { target = "Prior Payments" })</text>),
                        constitGrid.Column("IsActive", header: "Active", style: "searchResultsColumnWidth"),
                        constitGrid.Column("LastName", header: "Last", style: "searchResultsColumnWidth"),
                        constitGrid.Column("FirstName", header: "First", style: "searchResultsColumnWidth"),
                        constitGrid.Column("MiddleInitial", header: "M.I.", style: "searchResultsNarrowColumnWidth"),
                        constitGrid.Column("Spouse", header: "Spouse", style: "searchResultsColumnWidth"),
                        constitGrid.Column("EmailAddress", header: "E-mail", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("AddressLine1", header: "Address Line 1", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("City", header: "City", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("State", header: "State", style: "searchResultsColumnWidth"),
                        constitGrid.Column("Zip", header: "Zip", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("SearchResultsText", header: "Search Results", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("IsActivePledge", header: "Pledge", style: "searchResultsNarrowColumnWidth"),
                        constitGrid.Column("ReceiptWarning", header: "Receipt Warning", style: "searchResultsWideColumnWidth"),
                        constitGrid.Column("IsMember", header: "Mbr", style: "searchResultsNarrowColumnWidth")),
                        alternatingRowStyle: "altrow")
        </div>
    </div>
}

当用户点击时:

代码语言:javascript
复制
<input type="submit" value="Search" /> 

在表单中,调用的操作方法如下所示:

代码语言:javascript
复制
[HttpPost]
public PartialViewResult SearchConstit(DonationImport.Models.GiftWithSplits g)
{           
    GiftWithSplits giftWithSplits = new GiftWithSplits(); // model (object) to be returned to the partial view

    // send back gift data which we are currently using
    giftWithSplits.GiftToVerify = g.GiftToVerify;

    // search using provided data
    string middleInitial = empty2null(g.GiftToVerify.SourceMiddleName);
    if (!string.IsNullOrWhiteSpace(middleInitial))
        middleInitial = middleInitial.Substring(0, 1); // just supply the initial, not the entire name

    string zip = empty2null(g.GiftToVerify.SourceZip);
    if (!String.IsNullOrWhiteSpace(zip))
        zip = zip.Substring(0, 5); // we want only the first 5 digits of the zip

    giftWithSplits.SearchResults = db.SearchDonor(null, g.GiftToVerify.DonationSourceCode, empty2null(g.SourceAcctMemo), null, empty2null(g.GiftToVerify.SourceLastName), 
        empty2null(g.GiftToVerify.SourceFirstName), middleInitial, empty2null(g.GiftToVerify.SourceAddress1),
        empty2null(g.GiftToVerify.SourceCity), empty2null(g.GiftToVerify.SourceState), zip, empty2null(g.GiftToVerify.SourceCountry),
        empty2null(g.GiftToVerify.SourceEmailAddress), empty2null(g.GiftToVerify.SourcePhone)).ToList();
    if (giftWithSplits.SearchResults.Count == 0)
    {
        SearchDonor_Result emptyResult = new SearchDonor_Result();
        emptyResult.Constituent_ID = "[None Found]";
        giftWithSplits.SearchResults.Add(emptyResult);
    }

    return PartialView("_ConstitSearch", giftWithSplits);
}

如您所知,我是MVC方法的初学者。

其他想法(稍后添加)...

问题的根源似乎在于,WebGrid HTML help为列标题生成的链接是基于与生成网格的操作方法相关的URL的。当第一次显示网格时,链接是: /Batch/ Verify /34?sort=FirstName&sortdir=ASC,因为网格是作为整个验证视图的一部分构建的(来自验证操作方法)。但是,当搜索手动输入的搜索条件时,网格是从只填充部分视图的URL方法构建的,因此列标题链接中的SearchConstit现在是: /Batch/SearchConstit?sort=FirstName&sortdir=ASC.

此外," search“按钮与POST关联,因为它需要传递来自表单域的数据以用作搜索条件;而WebGrid列标题使用GET,显然没有办法强制它们POST。因此,问题似乎归结为如何在不发布表单的情况下传递表单域中的搜索条件。

我可以想出一个使用会话变量的可能的解决方案,但我不太愿意这样做。

另一种选择可能是放弃使用WebGrid。

有什么想法吗?

EN

回答 2

Stack Overflow用户

发布于 2016-07-29 14:41:21

当我为同样的问题寻找解决方案时,我找到了你的问题。我也面临着同样的问题。我已经使用web grid来显示数据。我使用了过滤器/分页。我也使用文本框在网格中进行搜索。我在给搜索打电话。当我点击“筛选和分页”按钮时,Webgrid正在消失。我在谷歌上搜索了很多,但没有找到任何解决方案。最后,我找到了解决方案,所以我想张贴。您需要使用get ajax调用而不是post调用来解决您的问题。不要使用beginform帖子进行搜索。

代码语言:javascript
复制
Index.cshtml is my main view. Here i m rendering partial view (_GridPartialView.cshtml). Index view has one webgrid and search text box.
I am using ajax call to search in webgrid. Ajax code is mention below.

**Index.cshtml:**

@model List<Login>
@{
    ViewBag.Title = "User";
}


<h2 style="background-color: grey">User</h2>

<table>

    <tr>
        <td>
           <input type="text" id="txtSearch" placeholder="  Search..." onkeyup="Search()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            @Html.ActionLink("Create New User", "CreateUser")</td>
    </tr>
    <tr>
        <td>

                <div id="divPartialView">
                    @Html.Partial("~/Views/Shared/_GridPartialView.cshtml", Model)
                </div>

        </td>
    </tr>
</table>


<script type="text/javascript">


    function Search() {
        var searchVal = $("#txtSearch").val();

        $.ajax({

            type: "GET",
            url: '/User/Search',
            data: { searchString: searchVal },
            dataType: 'html',
            success: function (data) {
                $('#divPartialView').html(data);

            }

        });

    }
</script>

_GridUserPArtialView.cshtml: This is partial view used in index view.

@model List<Login>
  <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#FCFCFC;}
        .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
        .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
        .alt { background-color: #E4E9F5; color: #000; }
        .gridHead a:hover {text-decoration:underline;}
        .description { width:auto}
        .select{background-color: #389DF5}
    </style>

         @{
             var grid = new WebGrid(null, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "grid");
        grid.Pager(WebGridPagerModes.NextPrevious);
        grid.Bind(Model, autoSortAndPage: true, rowCount: Model.Count);}
       <div id="grid">
        @grid.GetHtml(

        tableStyle: "webGrid", mode: WebGridPagerModes.All,

                firstText: "<< First",
                previousText: "< Prev",
                nextText: "Next >",
                lastText: "Last >>",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                columns: grid.Columns(

                grid.Column("UserName", "User Name", style: "description"),
                grid.Column("FirstName", "First Name"),
                grid.Column("LastName", "Last Name"),
                grid.Column("Action", format: @<text>

         @if (@item.LoginUserName != "administrator"){
                  @Html.ActionLink("Edit", "Edit", new { id=item.LoginUserName}) 
                  @Html.ActionLink("Delete","Delete", new { id = item.LoginUserId},new { onclick = "return confirm('Are you sure you wish to delete this user?');" }) 

                 }
                            </text>,  style: "color:Gray;" , canSort: false)
         )) 

</div>

**UserController.cs**: This is Search action method inside. usercontroller. It is HTTPGET.

[HttpGet]
        public PartialViewResult Search(string searchString)
        {
            List<Login> userListCollection = new List<Login_User>();

            userListCollection = Login_User_Data.GetAllUsers();

            if (Request.IsAjaxRequest())
            {

                if (!string.IsNullOrEmpty(searchString))
                {
                    Log.Info("UserController: Index() Started");
                    var searchedlist = (from list in userListCollection
                                        where list.FirstName.IndexOf(searchString,StringComparison.OrdinalIgnoreCase) >=0
                                        || list.LoginUserName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0
                                        || list.LastName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0
                                        select list
                                            ).ToList();

                    return PartialView("~/Views/Shared/_GridPartialView.cshtml", searchedlist);

                }
                else
                {
                    Log.Info("UserController: Search(Login_User user) Ended");
                    return PartialView("_GridPartialView", userListCollection);
                }
            }
            else
            {
                return PartialView("_GridPartialView", userListCollection);
            }

            Log.Info("UserController: Search() Ended");
        }



Hope this will help you. Let me know if you have any concern.
From: www.Dotnetmagics.com
票数 0
EN

Stack Overflow用户

发布于 2017-02-02 04:12:45

解决方案很简单,你需要做一个GET,当你对网格进行排序或分页时,它会尝试获取数据并点击一个HttpGet操作,它的工作原理如下:

代码语言:javascript
复制
    [HttpGet]
    public ActionResult YourActionMethod()
    {
        return PartialView("YourView",YourModel);
    }

最好的部分是,在排序时,请求也会发送一个名为"sortBy“的参数,你可以在这里使用它,并决定你想要对网格绑定的模型做什么。您可以使用浏览器中的“开发人员工具”检查排序标题将命中的URL。

注意:默认情况下,它将命中的操作方法将与控制器名称相同。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13385954

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档