如何根据文本框输入和dropdownList输入过滤mvc4中的webgrid

时间:2013-11-15 12:33:21

标签: asp.net-mvc-4

我还在学习mvc4的曲线。我知道如何在mvc4中绑定webgrid。但我怀疑的是,任何人都可以分享我如何根据文本框输入和dropdownList输入中的过滤条件绑定webgrid的想法。例如:如果文本框的日期为“11/15/2013”​​,而dropdownList的医生名称为“查尔斯”,那么我需要在gridview中显示与“查尔斯”医生预约的患者名单“11/15/2013 “。

代码

 <div id="gridContent">
 @grid.GetHtml(
 fillEmptyRows: true,
 tableStyle: "webGrid",
 alternatingRowStyle: "alternate-row",
 headerStyle: "grid-header",
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All,
     firstText: "<< First",
    previousText: "< Prev",
     nextText: "Next >",
    lastText: "Last >>",
    columns: new[] {        
    grid.Column("PatientID"),
    grid.Column("PatientName"),
    grid.Column("Age"),
    grid.Column("DOB"),
    grid.Column("Sex"),
    grid.Column("Phone"),
    grid.Column("Mobile"),
    grid.Column("City"),
    grid.Column("PinCode"),

   // grid.Column("Dr_Remarks",header:"Remarks",style:"left"),


    //grid.Column("Dr_Add1", 
    //            header: "Bed Count",style:"right"
    //),

    grid.Column("", 
                header: "Actions",
                format: @<text> 
    @Html.ActionLink("Edit", "EditPatient", new { id = item.PatientID }, htmlAttributes: new { @class = "link" })
    |
    @Html.ActionLink("Delete", "PatientList", new { id = item.PatientID },
             htmlAttributes: new { @class = "link", onclick = "return confirm('Are you sure you wish to delete this record?');" })
     </text>
    )
  })
  </div>


    **controller**

        public ActionResult PatientList(int page = 1, string sort = "Dr_Id", string sortDir = "ASC", int id = 0)
    {
        if (id != 0)
        {
            bool isDelete = false;
            isDelete = rdm_Patient.DeletePatient(id);


            return View(GetPatient(page, sort, sortDir));
        }
        else
        {
            return View(GetPatient(page, sort, sortDir));
        }
    } 

     private PatientPageViewModel GetPatient(int page = 1, string sort = "Dr_Id", string sortDir = "ASC")
    {
        const int patientPerPage = 5;
        var numPatient = rdm_Patient.CountPatient();
        sortDir = sortDir.Equals("desc", StringComparison.CurrentCultureIgnoreCase) ? sortDir : "asc";
        var validColumns = new[] { "PatientID", "PatientName" };
        if (!validColumns.Any(c => c.Equals(sort, StringComparison.CurrentCultureIgnoreCase)))
            sort = "PatientID";
        var doctors = rdm_Patient.getpatientpage(page, patientPerPage, "it." + sort + " " + sortDir);
        var data = new PatientPageViewModel()
        {

            numberOfPatient = numPatient,
            patientPerPage = patientPerPage,
            Patient = doctors,
        };
        return data;
    }

3 个答案:

答案 0 :(得分:1)

根据我对您的问题的理解,您需要在WebGrid中进行过滤,而不包含任何类型的工具来执行它。所以,你必须手动完成。

您应该考虑以下几点:

  • 首先,在视图中包含一个表单,其中收集查询条件,以便将其发送给控制器。
  • 其次,准备控制器,使其能够接收此标准并使其到达模型。
  • 第三,在模型中,只需在计算行总数时,以及在获取要在网格页面中显示的数据时应用此条件。

Jose M. Aguilar在他的帖子中描述了可以帮助您设计视图和控制器的所有步骤。

答案 1 :(得分:1)

Index.cshtml:
@model MvcApplication1.Models.Employee
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<table>
    <tr>
        <td>
            @Html.DropDownList("lstdepartment", Model.Department_List)
        </td>
    </tr>
    <tr>
        <td>
            <div id="EmployeeViewGrid">
               @Html.Partial("EmployeeView",Model.Employee_Grid)
            </div>  
        </td>
    </tr>
</table>

<script type="text/javascript">
    $('#lstdepartment').change(function (e) {
        e.preventDefault();
        var url = '@Url.Action("Filter")';
        $.get(url, { department: $(this).val() }, function (result) {
            debugger;
            $('#EmployeeViewGrid').html(result);
        });
    });
</script>

Partial view:

@model List< MvcApplication1.Models.Employee>
@{
    ViewBag.Title = "EmployeeView";
}

<h2>EmployeeView</h2>
<div id="gridposition" style="overflow: scroll; height: 300px; overflow-x: hidden;">
    @{
        var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");

        @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            rowStyle: "description",
            htmlAttributes: new { id = "positionGrid" },
            fillEmptyRows: false,

            columns: grid1.Columns(

             grid1.Column("EmployeeId", header: "EmployeeId"),
             grid1.Column("EmpName", header: "EmpName"),
             grid1.Column("Age", header: "Age"),
             grid1.Column("Department", header: "Department"),
             grid1.Column("Salary", header: "Salary")))
    }
</div>

Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class EmployeeController : Controller
    {
        private EmployeeDatabaseEntities1 db = new EmployeeDatabaseEntities1();

        //
        // GET: /Employee/

        public ActionResult Index()
        {
            Employee _model = new Employee();
            //_model.Employee_Grid = db.tbl_Employee.ToList();
            var departmentlist = db.tbl_department.ToList();

            _model.Department_List = (from d in departmentlist
                                      select new SelectListItem
                    {

                        Value = d.department_id.ToString(),
                        Text = d.department_name
                    }).ToList();

            var qq = (from e in db.tbl_Employee
                      join d in db.tbl_department on e.Department_id equals d.department_id
                      select new Employee
                      {
                          Department_id=e.Department_id,
                          EmployeeId=e.EmployeeId,
                          EmpName=e.EmpName,
                          Age=e.Age,
                          Department=d.department_name
                      }).ToList();
            _model.Employee_Grid = qq;
            return View("Index", _model);
        }


        public ActionResult Filter(string department)
        {
            int? department_id = Convert.ToInt32(department);
       var qq = (from e in db.tbl_Employee
                      join d in db.tbl_department on e.Department_id equals d.department_id
                 where e.Department_id == department_id
                      select new Employee
                      {
                          Department_id = e.Department_id,
                          EmployeeId = e.EmployeeId,enter code here
                          EmpName = e.EmpName,
                          Age = e.Age,
                          Department = d.department_name
                      }).ToList();
               return PartialView("EmployeeView",qq);
        }
}
}

答案 2 :(得分:0)