时间戳

首页 > 解决方案 > 排序表行重定向我的 MVC 应用程序中的整个页面

jquery - 排序表行重定向我的 MVC 应用程序中的整个页面

问题描述

我想通过单击它对表格行进行排序，th但它在我的应用程序中不起作用。当我单击th它时，它会重定向整个页面并重新加载它。

我想在不渲染整个页面的情况下对表格行进行排序。请指导我。

我已经添加了所有代码。任何人都请帮我解决这个问题。先感谢您！

模型

  public class clsEmployee
    {
        public int? Country { get; set; }
        public IEnumerable<SelectListItem> CountriesList { get; set; }

        public int Department { get; set; }
        public IEnumerable<SelectListItem> Departments { get; set; }

    }
    public class clsEmployeeClass
    {
       public int EmpId { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public int Salary { get; set; }

    }

控制器

      [HttpGet]
        public ActionResult Employee()
        {
            clsEmployee emp = new clsEmployee();
            emp = DropdownList();
            emp.Country = 1;
            emp.Department = 2;
            return View(emp);
        }
        [HttpPost]
        public ActionResult Employee(clsEmployee model, string sortOrder, string currentFilter)
        {
            model = DropdownList();
            ViewBag.CurrentSort = sortOrder;
            ViewBag.EmpIdSortParam = string.IsNullOrEmpty(sortOrder) ? "empid_desc" : "";
            ViewBag.NameSortParam = sortOrder == "Name" ? "name_desc" : "Name";
            ViewBag.AddressSortParam = sortOrder == "Address" ? "address_desc" : "Address";
            ViewBag.SalarySortParam = sortOrder == "Salary" ? "salary_desc" : "Salary";
            return View(model);

        }

        public clsEmployee DropdownList()
        {
            var model = new clsEmployee
            {            
                CountriesList = new List<SelectListItem>
            {
             new SelectListItem { Value = "1", Text = "India" },
             new SelectListItem { Value = "2", Text = "Sri Lanka" },
             new SelectListItem { Value = "3", Text = "Pakistan" },
             new SelectListItem {Value = "4", Text = "USA" },
            },
                Departments = new List<SelectListItem>
            {
             new SelectListItem {Value = "1", Text="Finance", Selected=true },
             new SelectListItem {Value = "2", Text = "IT" },
             new SelectListItem {Value = "3", Text = "Sales" },
            }


            };
            return model;

        }

        public void EmployeeSearchonFilter(clsEmployee model)
        {
            clsUtilities clsUtilities = new clsUtilities();
            DataSet ds;
            List<clsEmployeeClass> leadingSiresClass = new List<clsEmployeeClass>();
            string SqlStatement;
            SqlParameter[] paramneters = new SqlParameter[2];
            SqlStatement = "exec GetEmployeeDetails @Country,@Department";
            paramneters[0] = new SqlParameter("@Country", SqlDbType.Int);
            paramneters[0].Value = model.Country;
            paramneters[1] = new SqlParameter("@Department", SqlDbType.Int);
            paramneters[1].Value = model.Department;
            ds = clsUtilities.CommandParams(SqlStatement, paramneters);
            DataTable dataTable = ds.Tables[0];
            ViewData["Employee"] = ds.Tables[0];
        }
        public ActionResult EmployeeFilter(clsEmployee model)
        {
            EmployeeSearchonFilter(model);
            return PartialView("~/Views/Employee/_EmployeePartial.cshtml", ViewData["Employee"]);
        }

员工视图

 <div class="col-md-2">
        @using (Html.BeginForm("Employee", "Employee", FormMethod.Post, new { @id = "EmployeeReport" }))
        {
            <div class="panel panel-default">

                <div class="panel-body">
                    <div>
                        <b>@Html.DisplayName("Country")</b>
                        @Html.DropDownListFor(m => m.Country, Model.CountriesList)
                    </div>
                    <div>
                        @Html.DisplayName("Department")
                        @Html.DropDownListFor(m => m.Department, Model.Departments)
                    </div>

                    <div>
                        <button type="button" id="Search">Search</button>
                    </div>
                </div>
            </div>
        }

    </div>

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="EmployeePartial">
            </div>
        </div>
    </div>
</div>

_EmployeePartial 局部视图

<table>
    <thead>
        <tr>
            <th>
                @Html.ActionLink("EmpId", "Employee", new { sortOrder = ViewBag.EmpIdSortParam, currentFilter = ViewBag.CurrentFilter})
                <i class="glyphicon @(ViewBag.CurrentSort== "empid_desc" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></i>
            </th>

            <th>
                @Html.ActionLink("Name", "Employee", new { sortOrder = ViewBag.NameSortParam, currentFilter = ViewBag.CurrentFilter })
                <i class="glyphicon @(ViewBag.CurrentSort== "name_desc" ? "glyphicon-sort-by-alphabet-alt" : "glyphicon-sort-by-alphabet")"></i>
            </th>

            <th>
                @Html.ActionLink("Address", "Employee", new { sortOrder = ViewBag.AddressSortParam, currentFilter = ViewBag.CurrentFilter })
                <i class="glyphicon @(ViewBag.CurrentSort== "address_desc" ? "glyphicon-sort-by-alphabet-alt" : "glyphicon-sort-by-alphabet")"></i>
            </th>

            <th>
                @Html.ActionLink("Salary", "Employee", new { sortOrder = ViewBag.SalarySortParam, currentFilter = ViewBag.CurrentFilter })
                <i class="glyphicon @(ViewBag.CurrentSort== "salary_desc" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></i>
            </th>           
        </tr>
    </thead>
    @if (ViewData["Employee"] != null)
    {
        var dt = ViewData["Employee"] as System.Data.DataTable;
        foreach (System.Data.DataRow dr in dt.Rows)
        {
            <tbody>
                <tr>
                    <td>
                        @dr["EmpId"]
                    </td>
                    <td>
                        @dr["Name"]
                    </td>
                    <td>
                        @dr["Address"]
                    </td>
                    <td>
                        @dr["Salary"]
                    </td>

                </tr>
            </tbody>
        }
    }

</table>

员工视图中的脚本

   $(document).ready(function () {
         PartialViewUpdate();
    });

    function PartialViewUpdate() {
        var partial = $('#EmployeePartial');
        var form = $('#EmployeeReport');
        $.ajax({
            url: '@Url.Action("EmployeeFilter", "Employee")',
                type: 'Post',
                data: form.serialize(),
                success: function (data) {
                    console.log('success');
                    partial.html(data);
                }

            });
    };

    $('#Search').click(function () {
        debugger;
        var partial = $('#EmployeePartial');
        var form = $('#EmployeeReport');
          $.ajax({
            url: '@Url.Action("Employee", "Employee")',
                type: 'Post',
                data: form.serialize(),
                success: function (data) {
                    PartialViewUpdate();
                }
            });
    });

标签： jqueryasp.net-mvc

解决方案

好的，正如所讨论的那样，我已经采用了您到目前为止所获得的内容并使其工作，但有一些变化！

代码

 public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult EmployeeSearch()
        {
            var model = ReturnViewModel();
            return View(model);
        }

        public EmployeeViewModel ReturnViewModel()
        {
            var model = new EmployeeViewModel()
            {
                CountriesList = new List<SelectListItem>
                {
                    new SelectListItem { Value = "1", Text = "India" },
                    new SelectListItem { Value = "2", Text = "Sri Lanka" },
                    new SelectListItem { Value = "3", Text = "Pakistan" },
                    new SelectListItem {Value = "4", Text = "USA" }
                },
                Departments = new List<SelectListItem>
                {
                    new SelectListItem {Value = "1", Text="Finance", Selected=true },
                    new SelectListItem {Value = "2", Text = "IT" },
                    new SelectListItem {Value = "3", Text = "Sales" },
                }
            };

            model.CurrentSearchOrder = "ASC";
            model.EmployeesFound= new List<Employee>();

            return model;
        }


        public PartialViewResult TestEmployeeSearchService(EmployeeViewModel model)
        {
            //Simulated service - I presume you have list of employees somewhere.
            var list = new List<Employee>()
            {
                new Employee() {EmpId =1, Name = "John Smith", Address="1 MyStreet MyTown", CountryID = 4, DepartmentID = 2,Salary= 30000},   // - I.T.
                new Employee() {EmpId= 2, Name = "Chander Deepak", Address="9 MyRoad MyVillage", CountryID = 1, DepartmentID = 1, Salary = 30000} ,   //India - Finance
                new Employee() {EmpId = 3, Name = "Pritesh Shah", Address="20 MyRoad MyVillage", CountryID = 1, DepartmentID = 1, Salary = 35000}    //India - Finance
            };

            //Employees matching countryid
            var employeesInCountry = list.Where(e => e.CountryID == model.CountryID).ToList();

            //Department ID
            model.EmployeesFound = model.DepartmentID != 0 ? employeesInCountry.Where(e => e.DepartmentID == model.DepartmentID).ToList() : employeesInCountry;

            return PartialView("_EmployeePartial", model);
        }

        public PartialViewResult SortEmployeeData(EmployeeViewModel model, string columnToSort, string sortOrder)
        {
            ModelState.Clear();

            model.EmployeesFound = ReturnSortedEmployees(model.EmployeesFound, columnToSort, sortOrder);
            model.CurrentSearchOrder = sortOrder == "ASC" ? "DESC" : "ASC";

            return PartialView("_EmployeePartial", model);
        }

        public List<Employee> ReturnSortedEmployees(List<Employee> countryList, string columnToSort, string order)
        {
            List<Employee> sortedData;

            switch (columnToSort)
            {
                case "EmpID":
                    sortedData = order == "ASC" ? countryList.OrderBy(s => s.EmpId).ToList() : countryList.OrderByDescending(s => s.EmpId).ToList();
                    break;

                case "Name":
                    sortedData = order == "ASC" ? countryList.OrderBy(s => s.Name).ToList() : countryList.OrderByDescending(s => s.Name).ToList();
                    break;

                case "Address":
                    sortedData = order == "ASC" ? countryList.OrderBy(s => s.Address).ToList() : countryList.OrderByDescending(s => s.Address).ToList();
                    break;

                case "Salary":
                    sortedData = order == "ASC" ? countryList.OrderBy(s => s.Salary).ToList() : countryList.OrderByDescending(s => s.Salary).ToList();
                    break;


                default:
                    sortedData = countryList.OrderBy(s => s.Name).ToList();
                    break;
            }

            return sortedData;
        }
    }

    public class EmployeeViewModel
    {
        public IEnumerable<SelectListItem> CountriesList { get; set; }
        public IEnumerable<SelectListItem> Departments { get; set; }

        public List<Employee> EmployeesFound { get; set; }

        public int DepartmentID { get; set; }
        public int CountryID { get; set; }

        public string CurrentSearchOrder { get; set; }
    }

    public class Employee
    {
        public int EmpId { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public int Salary { get; set; }
        public int? CountryID { get; set; }
        public int DepartmentID { get; set; }
    }

}

主要员工视图

@model EmployeeViewModel
@{
    ViewBag.Title = "EmployeeSearch";
}

@{ Layout = null; }

<script src="~/Content/Scripts/jquery-3.2.1.js"></script>
<script src="~/Content/Scripts/bootstrap.min.js"></script>
<script src="~/Content/Scripts/jquery-ui-1.11.4.js"></script>

<h2>Employee Search</h2>

<div class="col-md-2">
    @using (Html.BeginForm("", "", FormMethod.Post, new { @id = "EmployeeReport" }))
    {
        <div class="panel panel-default">

            <div class="panel-body">
                <div>
                    <b>@Html.DisplayName("Country")</b>
                    @Html.DropDownListFor(m => m.CountryID, Model.CountriesList)
                </div>
                <div>
                    @Html.DisplayName("Department")
                    @Html.DropDownListFor(m => m.DepartmentID, Model.Departments)
                </div>

                <div>
                    <button type="button" id="Search">Search</button>
                </div>
            </div>
        </div>

        <div id="divEmployees">
            @Html.Partial("_EmployeePartial", Model)
        </div>


      }


    </div>

<style>
    .sortable-link {
        cursor: pointer;
    }
</style>

<script>

    $(document).on('click', '.sortable-link', function () {
        var formData = $("#EmployeeReport").serialize();
        var sortUrl = $(this).data('sorturl');

        $.ajax({
            type: "POST",
            url: sortUrl,
            data: formData,
            success: function (data) {
                $("#divEmployees").html(data); 
            }
        });
    });

    $('#Search').click(function () {
        var form = $('#EmployeeReport');

        $.ajax({
            url: '@Url.Action("TestEmployeeSearchService", "Employee")',
            type: 'Post',
            data: form.serialize(),
            success: function (data) {
                $("#divEmployees").html(data);
            }
        });
    });

</script>

局部视图

@model EmployeeViewModel

<table>
<thead>
<tr>
    <th>
        <a class="sortable-link" data-sorturl="/Employee/SortEmployeeData?columnToSort=EmpID&sortOrder=@Model.CurrentSearchOrder">ID</a>
        <span class="glyphicon @(Model.CurrentSearchOrder == "DESC" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></span>
    </th>

    <th>
        <a class="sortable-link" data-sorturl="/Employee/SortEmployeeData?columnToSort=Name&sortOrder=@Model.CurrentSearchOrder">Name</a>
        <span class="glyphicon @(Model.CurrentSearchOrder == "DESC" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></span>
    </th>

    <th>
        <a class="sortable-link" data-sorturl="/Employee/SortEmployeeData?columnToSort=Address&sortOrder=@Model.CurrentSearchOrder">Address</a>
        <span class="glyphicon @(Model.CurrentSearchOrder == "DESC" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></span>
    </th>

    <th>
        <a class="sortable-link" data-sorturl="/Employee/SortEmployeeData?columnToSort=Salary&sortOrder=@Model.CurrentSearchOrder">Salary</a>
        <span class="glyphicon @(Model.CurrentSearchOrder == "DESC" ? "glyphicon-sort-by-order-alt" : "glyphicon-sort-by-order")"></span>
    </th>
</tr>
</thead>

    @for (int counter = 0; counter <= Model.EmployeesFound.Count -1; counter++) 
    {
        <tr>
            <td>
                @Html.TextBoxFor(m => m.EmployeesFound[counter].EmpId, null, new { @class = "form-control" })
            </td>
            <td>
                @Html.TextBoxFor(m => m.EmployeesFound[counter].Name, null, new { @class = "form-control" })
            </td>
            <td>
                @Html.TextBoxFor(m=> m.EmployeesFound[counter].Address, null, new{@class="form-control"})
            </td>
            <td>
                @Html.TextBoxFor(m=> m.EmployeesFound[counter].Salary, null, new{@class="form-control"})
            </td>
        </tr>
    }
 </table>      
@Html.HiddenFor(x=> x.CurrentSearchOrder)

请查看主视图与部分视图的分离以及如何通过 JQuery 构造和选择排序方法的链接。停止使用 ViewBag 并为您的视图使用模型。它的MVC！其中 M = 模型.. 不是 viewbag！

一切顺利

推荐阅读