2

部分ビュー内で定義された webgrid があります。(これは MVC 4 プロジェクトです。) Web グリッドは部分ビューの唯一のものではないため、Web グリッドは部分ビューのモデル内のリストにバインドされます。

列ヘッダーがクリックされると、グリッドは必要に応じて入力およびソートされますが、(Ajax.BeginForm を使用して設定されたフォーム ポストを介して) アクション メソッドを呼び出してグリッドを再入力し、列ヘッダーをクリックすると、グリッド中身が消える。(アクション メソッドは、ユーザーがフォームに指定した検索基準を使用してデータベースにクエリを実行します。)

何が原因でしょうか? どうすれば解決できますか？

部分ビューは次で始まります。

@model DonationImport.Models.GiftWithSplits

部分ビューの内容は、次のように指定されたフォーム内にあります。

@using (Ajax.BeginForm("SearchConstit", "Batch", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "constitSearchArea" }))

WebGrid は次のように定義されます。

@{
    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>
}

クリックすると：

<input type="submit" value="Search" />

フォーム内で呼び出されるアクション メソッドは次のとおりです。

[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 ヘルプによって生成されたリンクが、グリッドを生成したアクション メソッドに関連する URL に基づいていることです。グリッドが最初に表示されるとき、リンクは /Batch/Verify/34?sort=FirstName&sortdir=ASC です。これは、グリッドが検証ビュー全体の一部として構築されているためです (検証アクション メソッドから出てくる)。ただし、手動で入力した検索基準を検索する場合、グリッドは、部分ビューのみを設定する SearchConstit アクション メソッドから構築されるため、列ヘッダー リンクの URL は /Batch/SearchConstit?sort=FirstName&sortdir=ASC になります。

また、「検索」ボタンは、検索条件として使用するフォーム フィールドからデータを渡す必要があるため、POST に関連付けられています。一方、WebGrid 列ヘッダーは GET を使用しており、それらを強制的に POST する方法は明らかにありません。したがって、問題は、フォームを投稿せずにフォーム フィールドから検索条件を渡す方法に要約されるようです。

セッション変数を使用して可能な解決策を考えることができますが、そのようにすることをためらっています。

もう 1 つのオプションは、WebGrid の使用を放棄することです。

何か案は？

4

2 に答える 2

0

同じ問題の解決策を探していたときに、あなたの質問を見つけました。私も同じ問題に直面しました。Web グリッドを使用してデータを表示しました。フィルター/ページネーションを使用しました。グリッド内の検索にもテキスト ボックスを使用しました。私は検索のためにポストコールをしています。フィルターとページング ボタンをクリックすると Webgrid が消えていました。私はよくグーグルで検索しましたが、解決策が見つかりませんでした。最後に解決策を見つけたので、投稿することを考えました。問題を解決する post 呼び出しの代わりに get ajax 呼び出しを使用する必要があります。検索に beginform 投稿を使用しないでください。

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
于 2016-07-29T06:41:21.033 に答える
0

ソリューションは非常に単純です。GET を実行する必要があります。Web グリッドをソートまたはページングするたびに、データを取得して HttpGet アクションを実行しようとします。これは次のように機能します。

    [HttpGet]
    public ActionResult YourActionMethod()
    {
        return PartialView("YourView",YourModel);
    }

最良の部分は、並べ替え時に、リクエストが「sortBy」という名前のパラメーターも送信することです。ここでこれを使用して、バインドされたモデルをグリッドで何をしたいかを決定できます。ブラウザの「開発者ツール」を使用して、Sort ヘッダーがヒットする URL を調べることができます。

注：デフォルトでは、ヒットするアクションメソッドはコントローラー名と同じになります。

于 2017-02-01T20:12:44.720 に答える