asp.net-mvc - MVC4 で DropDownList を使用して WebGrid をフィルタリングする

Question

配信に関する情報を含むオブジェクトのリストにバインドする WebGrid を使用しています。Customers を含む DropDownList を使用して、前述の WebGrid をフィルタリングできるようにしたいと考えています。DropDownList で Customer を選択すると、change-method は、WebGrid の新しい項目を取得することになっている Ajax 呼び出しを送信します。

呼び出しは成功しますが、何も起こりません。WebGrid はまったく変更されません。リストをソートするときに送信されたものと同じ Ajax 呼び出しを送信しようとさえしました。しかし、何も起こりません。

ここで何が間違っていますか？

ビューモデル:

public class DeliveriesViewModel : PageViewModel<DeliveriesPage>
{
    public DeliveriesViewModel(DeliveriesPage currentPage) : base(currentPage)
    {
        DeliveryItems = new List<DeliveryItem>();
    }

    public List<DeliveryItem> DeliveryItems { get; set; }
    public List<SelectListItem> Customers { get; set; } 
}

コントローラ：

    public ActionResult Index(DeliveriesPage currentPage, string customer)
    {

        var model = new DeliveriesViewModel(currentPage);
        model.Customers = _deliveryService.GetCustomers();
        model.DeliveryItems = customer == null ? _deliveryService.GetDeliveryItems() : _deliveryService.GetDeliveryItems(customer);

        return View(model);
    }

意見：

@model DeliveriesViewModel
<h1>@Model.CurrentPage.PageName</h1>

@Html.DropDownList("customerDropDown", Model.Customers)
@Html.Partial("_grid", Model)
<script type="text/javascript">
    $("#customerDropDown").change(function () {
        $.get("?Customer="+$("#customerDropDown").val());
    });
</script>

_grid 部分ビュー:

@model DeliveriesViewModel
@{
    var grid = new WebGrid(Model.DeliveryItems, canPage:true, canSort: true, ajaxUpdateContainerId:"container-grid");
}

<div id="container-grid">
@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("DeliveryId"),
        grid.Column("CustomerName"),
        grid.Column("ShipNumber"),
        grid.Column("ShipName"),
        grid.Column("Product"),
        grid.Column("PlannedWeight"),
        grid.Column("TotalWeight"),
        grid.Column("ShipStatus"),
        grid.Column("TransportTo"),
        grid.Column("TransportFrom"),
        grid.Column("RevDate"),
        grid.Column("ShipStemDept"),
        grid.Column("ShipRealDept"),
        grid.Column("ShipStemArr"),
        grid.Column("ShipRealArr"),
        grid.Column("TranspMonth"),
        grid.Column("TranspYear")
        ))
</div>

score 2 · Accepted Answer

$.get("?Customer="+$("#customerDropDown").val());AJAX 呼び出しをサーバーに送信するだけです。DOM を更新するために、成功のコールバックをサブスクライブしていません。したがって、何も起こらないことは驚くべきことではありません。

だから、このようにしてみてください：

<script type="text/javascript">
    $('#customerDropDown').change(function () {
        var url = '@Url.Action("index")';
        $.get(url, { customer: $(this).val() }, function(result) {
            $('#container-grid').html(result);
        });
    });
</script>

UrlHelper を使用してコントローラーアクションへの正しい URL を計算する方法に注意してください。次に、ドロップダウンで選択した値を 2 番目のパラメーターとして$.getメソッドに渡し、最後に ajax リクエストの成功コールバックをサブスクライブしました。#container-gridコントローラアクションによって返された結果で div を更新しました。

また、このアクションを AJAX で呼び出しているため、View 全体ではなく、PartialView のみを返す必要があります。この部分ビューには、グリッドが含まれている必要があります。そうしないと、div に重複したレイアウトが挿入されてしまいます。

score 1 · Accepted Answer

Model


 public class EmployerTestResultsModel
    {


        [Display(Name = "Employer List")]
        public IEnumerable&lt;SelectListItem> EmployerList { get; set; }

        [Required]
        public string SelectedEmployerId { get; set; }



        public List<EmployerTestResultsModel> EmployerGrid { get; set; }

        public Int64 FileId { get; set; }

        [Display(Name = "File Name")]
        public string FileName { get; set; }


        [DataType(DataType.Date)]
        public DateTime Date { get; set; }


        [Display(Name = "Scheme Id")]
        public string SchemeId { get; set; }


        public string Status { get; set; }

        [Display(Name = "Validation Error Report")]
        public string ValidationErrorReport { get; set; }

}




controller



[HttpGet]
        public ActionResult EmployerTestResults()
        {
            EmployerTestResultsModel model = new EmployerTestResultsModel();

            ViewBag.HideSection = true;

            model.EmployerList = (from d in _context.Employers
                                  select new System.Web.Mvc.SelectListItem
                                  {
                                      Text = d.EmployerName,
                                      Value = d.EmployerId
                                  });


            model.EmployerGrid = (from efd in _context.EmployerFileDatas
            //                      join efhd in _context.EmployerFileHeaderDetails on efd.FileDataIdentityKey equals efhd.FileDataIdentityKey
                                  orderby efd.EmployerId , efd.Timestamp
                                  select new EmployerTestResultsModel
                                  { 
                                      FileId = efd.FileDataIdentityKey,
                                      FileName = efd.FileName,
                                      Date = efd.Timestamp,
                                      //SchemeId = efhd.SchemeId,
                                      Status = efd.ValidationStatus,
                                      ValidationErrorReport = "View"

                                  }).ToList();

            return View("EmployerTestResults", model);
        }



View:


@model EFITestHarness.Models.EmployerTestResultsModel
@using System.Web.Helpers;
@{
    ViewBag.Title = "EmployerTestResults";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

&lt;script src="~/Scripts/jquery-1.7.1.js">&lt;/script>
&lt;script src="~/Scripts/jquery.unobtrusive-ajax.js">&lt;/script>


@using (Html.BeginForm("EmployerTestResults", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
{

    <div class="text-danger" style="font-size:large;">
        @Html.ValidationSummary(true)

    </div>



    <div class="form-group ">
        @Html.LabelFor(s => s.EmployerList, null, new { @class = "col-md-2 control-label" })
        <div class="col-md-3">
            @Html.DropDownListFor(s => s.SelectedEmployerId, Model.EmployerList, "----All----", new { style = "width:250px", id = "ddl", @class = "dropdown1" })

            @Html.ValidationMessageFor(s => s.EmployerList, null, new { @class = "text-danger" })
        </div>
    </div>


    <div id="EmployeeViewGrid">

        @Html.Partial("~/Views/EmployerView.cshtml", Model.EmployerGrid)
    </div>

}

&lt;script type="text/javascript">


              $('#ddl').change(function (e) {

            var employer = $('#ddl').val();           
            $.get('@Url.Action("Filter")', { id: employer }, function (result) {
                $('#EmployeeViewGrid').html(result);

            });
            e.preventDefault();
        });

&lt;/script>




Controller:


[HttpGet]
        public ActionResult Filter(string id)
        {
            EmployerTestResultsModel model = new EmployerTestResultsModel();


            List<EmployerTestResultsModel> objEmployerDetails = new List<EmployerTestResultsModel>();

            objEmployerDetails = _repository.getEmployerDetails(id);

            model.EmployerGrid = objEmployerDetails;           

            return PartialView("~/Views/EmployerView.cshtml", model.EmployerGrid);

        }  





partial View:


@model IEnumerable<EFITestHarness.Models.EmployerTestResultsModel>
@using System.Web.Helpers;
@{
    ViewBag.Title = "EmployerTestResultsModel";
    //Layout = "~/Views/Shared/_Layout.cshtml";


}
&lt;script src="~/Scripts/jquery-1.7.1.js">&lt;/script>    
    <div id="gridposition" style="overflow: scroll; height: 300px; overflow-x: hidden;">
        @{

            var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridposition"); grid.Pager(WebGridPagerModes.NextPrevious);

    @grid.GetHtml(tableStyle: "webGrid",
                footerStyle: "foot",
                headerStyle: "webGridHeader",
                alternatingRowStyle: "webGridAlt",
                htmlAttributes: new { id = "positionGrid" },
                selectedRowStyle: "select",
                fillEmptyRows: true,
                columns: grid.Columns(
                grid.Column("FileName"), //the model fields to display
                grid.Column("Date"),
                grid.Column("SchemeId"),
                grid.Column("Status"),
                grid.Column("ValidationErrorReport", format: (item => Html.ActionLink((string)(@item.ValidationErrorReport).ToString(), "EmployerValidationResults", new { FileId = @item.FileId, @style = "color:blue;" })))



                ))
        }



    </div>

asp.net-mvc - MVC4 で DropDownList を使用して WebGrid をフィルタリングする

2 に答える 2

Related

Reference