Asp.net mvc 4 如何基于文本框输入和下拉列表输入过滤mvc4中的webgrid_Asp.net Mvc 4

Asp.net mvc 4 如何基于文本框输入和下拉列表输入过滤mvc4中的webgrid

asp.net-mvc-4

Asp.net mvc 4 如何基于文本框输入和下拉列表输入过滤mvc4中的webgrid,asp.net-mvc-4,Asp.net Mvc 4,我仍处于mvc4的学习曲线中。我知道如何在mvc4中绑定webgrid。但我的疑问是，有人能告诉我如何根据文本框输入和下拉列表输入的过滤条件绑定webgrid吗。例如：如果文本框的日期为“11/15/2013”，dropdownList的医生名为“Charles”，那么我需要在gridview中显示与医生“Charles”于“11/15/2013”预约的患者列表代码 @grid.GetHtml( 是的，表样式：“webGrid”，交替行样式：“交替行”，标题样式：“网格标题”，页脚样

我仍处于mvc4的学习曲线中。我知道如何在mvc4中绑定webgrid。但我的疑问是，有人能告诉我如何根据文本框输入和下拉列表输入的过滤条件绑定webgrid吗。例如：如果文本框的日期为“11/15/2013”，dropdownList的医生名为“Charles”，那么我需要在gridview中显示与医生“Charles”于“11/15/2013”预约的患者列表

代码


@grid.GetHtml(
是的，
表样式：“webGrid”，
交替行样式：“交替行”，
标题样式：“网格标题”，
页脚样式：“网格页脚”，
模式：WebGridPagerModes.All，
第一个文本：“，
lastText:“Last>>”，
列：新[]{
网格栏（“PatientID”），
网格列（“PatientName”），
网格栏（“年龄”），
网格柱（“DOB”），
网格栏（“性别”），
网格栏（“电话”），
网格柱（“移动”），
网格栏（“城市”），
网格柱（“PinCode”），
//网格栏（“Dr_备注”，标题：“备注”，样式：“左”），
//grid.Column（“Dr_Add1”，
//标题：“床位数”，样式：“右”
//),
网格.列（“”，
标题：“行动”，
格式：@
@ActionLink（“Edit”，“EditPatient”，new{id=item.PatientID}，htmlAttributes:new{@class=“link”}）
|
@ActionLink（“删除”，“耐心列表”，新的{id=item.PatientID}，
htmlAttributes:new{@class=“link”，onclick=“return confirm（'您确定要删除此记录吗？'）；“}）
)
})
**控制器**
公共操作结果患者列表（int page=1，string sort=“Dr\u Id”，string sortDir=“ASC”，int Id=0）
{
如果（id！=0）
{
bool-isDelete=false；
isDelete=rdm_患者。删除患者（id）；
返回视图（GetPatient（页面、排序、排序））；
}
其他的
{
返回视图（GetPatient（页面、排序、排序））；
}
} 
private PatientPageViewModel GetPatient（int page=1，字符串sort=“Dr_Id”，字符串sortDir=“ASC”）
{
const int patientPerPage=5；
var numPatient=rdm_Patient.CountPatient（）；
sortDir=sortDir.Equals（“desc”，StringComparison.CurrentCultureInogoreCase）？sortDir：“asc”；
var validColumns=new[]{“PatientID”，“PatientName”}；
if（！validColumns.Any（c=>c.Equals（sort，StringComparison.CurrentCultureIgnoreCase）））
sort=“PatientID”；
var doctors=rdm_Patient.getpatientpage（第页，PatientPage，“it.+sort+”+sortDir）；
var数据=新的PatientPageViewModel（）
{
numberOfPatient=numPatient，
patientPerPage=patientPerPage，
病人=医生，
};
返回数据；
}

据我所知，您需要在您的WebGrid中进行过滤，而WebGrid不包含任何类型的工具来执行过滤。因此，您必须手动执行此操作

您应该考虑以下几点：

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

在他的文章中描述了所有可以帮助您设计视图和控制器的步骤

Index.cshtml:
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);
        }
}
}

@模型MVCAPApplication1.Models.Employee
@{
ViewBag.Title=“Index”；
}
指数
@Html.DropDownList（“lstdepartment”，Model.Department_列表）
@Html.Partial（“EmployeeView”，Model.Employee\u网格）
$（“#部门”）。更改（职能（e）{
e、 预防默认值（）；
var url='@url.Action（“过滤器”）；
$.get（url，{department:$（this）.val（）}，函数（result）{
调试器；
$（'#EmployeeViewGrid'）.html（结果）；
});
});
局部视图：
@型号列表
@{
ViewBag.Title=“EmployeeView”；
}
雇员观点
@{
var grid1=new WebGrid（来源：Model，canPage:true，rowsPerPage:5，ajaxUpdateContainerId:“gridContent”）；
@GetHtml（模式：WebGridPagerModes.All，表样式：“webGrid”，
headerStyle:“header”，
alternatingRowStyle:“alt”，
selectedRowStyle：“选择”，
行样式：“描述”，
htmlAttributes:new{id=“positionGrid”}，
fillEmptyRows:false，
列：grid1.columns(
grid1.列（“EmployeeId”，标题：“EmployeeId”），
grid1.列（“EmpName”，标题：“EmpName”），
grid1.列（“年龄”，标题：“年龄”），
grid1.列（“部门”，标题：“部门”），
grid1.列（“薪资”，标题：“薪资”））
}
控制器：
使用制度；
使用System.Collections.Generic；
使用系统数据；
使用System.Data.Entity；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用mvcapapplication1.模型；
命名空间MVCAPApplication1.Controllers
{
公共类EmployeeController:控制器
{
私有EmployeeDatabaseEntities1 db=新EmployeeDatabaseEntities1（）；
//
//获取：/Employee/
公共行动结果索引（）
{
员工_model=新员工（）；
//_model.Employee_Grid=db.tbl_Employee.ToList（）；
var departmentlist=db.tbl_department.ToList（）；
_model.Department_List=（从departmentlist中的d开始）
选择新的SelectListItem
{
Value=d.department\u id.ToString（），
Text=d.部门名称
}).ToList（）；
var qq=（来自EI）
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);
        }
}
}