How to load data employee on view GetAllEmpDetails.cshtml based on drop down selected index changed?

huangapple go评论93阅读模式
英文:

How to load data employee on view GetAllEmpDetails.cshtml based on drop down selected index changed?

问题

  1. 我在使用C#和ADO.NET开发MVC Web应用程序,遇到一个问题,即无法根据下拉列表的选择索引更改来显示员工数据。
  2. 如果用户从下拉列表中选择“Pending Request”,则应选择员工状态为1的员工。
  3. 如果用户从下拉列表中选择“Done Request”,则应选择员工状态为2的员工。
  4. 我的代码如下:
  5. 表结构
  6. CREATE TABLE [dbo].[Employee](
  7. [EmployeeId] [int] NOT NULL,
  8. [EmployeeName] [nvarchar](100) NULL,
  9. [EmployeeStatus] [int] NULL,
  10. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
  11. (
  12. [EmployeeId] ASC
  13. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  14. ) ON [PRIMARY]
  15. GO
  16. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1211, N'ahmed', 1)
  17. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1222, N'eslam', 1)
  18. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1223, N'adel', 2)
  19. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1224, N'mohamed', 2)
  20. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1225, N'mosh', 2)
  21. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1227, N'ali', 1)
  22. 存储过程有逻辑
  23. create Procedure [dbo].[LoadDropDownEmployee]
  24. @EmployeeStatus int
  25. as
  26. begin
  27. select * from Employee where EmployeeStatus=@EmployeeStatus
  28. End
  29. create Procedure [dbo].[GetEmployees]
  30. as
  31. begin
  32. select *from Employee
  33. End
  34. 员工模型
  35. public class EmpModel
  36. {
  37. public int EmployeeId { get; set; }
  38. public string EmployeeName { get; set; }
  39. public int EmployeeStatus { get; set; }
  40. }
  41. 员工仓库有用于控制器的函数
  42. public List<EmpModel> GetAllEmployees()
  43. {
  44. connection();
  45. List<EmpModel> EmpList = new List<EmpModel>();
  46. SqlCommand com = new SqlCommand("GetEmployees", con);
  47. com.CommandType = CommandType.StoredProcedure;
  48. SqlDataAdapter da = new SqlDataAdapter(com);
  49. DataTable dt = new DataTable();
  50. con.Open();
  51. da.Fill(dt);
  52. con.Close();
  53. foreach (DataRow dr in dt.Rows)
  54. {
  55. EmpList.Add(
  56. new EmpModel
  57. {
  58. EmployeeId = Convert.ToInt32(dr["EmployeeId"]),
  59. EmployeeName = Convert.ToString(dr["EmployeeName"]),
  60. EmployeeStatus = Convert.ToInt32(dr["EmployeeStatus"])
  61. }
  62. );
  63. }
  64. return EmpList;
  65. }
  66. public List<EmpModel> LoadDropDownLists(int EmployeeStatus)
  67. {
  68. connection();
  69. List<EmpModel> EmpList = new List<EmpModel>();
  70. SqlCommand com = new SqlCommand("LoadDropDownEmployee", con);
  71. com.CommandType = CommandType.StoredProcedure;
  72. com.Parameters.Add("@EmployeeStatus", SqlDbType.VarChar, 50);
  73. com.Parameters["@EmployeeStatus"].Value = EmployeeStatus;
  74. SqlDataAdapter da = new SqlDataAdapter(com);
  75. DataTable dt = new DataTable();
  76. con.Open();
  77. da.Fill(dt);
  78. con.Close();
  79. foreach (DataRow dr in dt.Rows)
  80. {
  81. EmpList.Add(
  82. new EmpModel
  83. {
  84. EmployeeId = Convert.ToInt32(dr["EmployeeId"]),
  85. EmployeeName = Convert.ToString(dr["EmployeeName"])
  86. }
  87. );
  88. }
  89. return EmpList;
  90. }
  91. 控制器Employee
  92. public class EmployeeController : Controller
  93. {
  94. public ActionResult LoadDropDownList(int EmployeeStatus)
  95. {
  96. EmpRepository EmpRepo = new EmpRepository();
  97. return View();
  98. }
  99. public ActionResult GetAllEmpDetails()
  100. {
  101. EmpRepository EmpRepo = new EmpRepository();
  102. ModelState.Clear();
  103. return View(EmpRepo.GetAllEmployees());
  104. }
  105. }
  106. 视图GetAllEmpDetails.cshtml
  107. @model IEnumerable<Ado.netMvc.Models.EmpModel>
  108. @{
  109. ViewBag.Title = "GetAllEmpDetails";
  110. }
  111. <h2>GetAllEmpDetails</h2>
  112. <th>
  113. <select class="form-control" id="statusselect" name="statusselectName">
  114. <option>Select Status</option>
  115. <option>Pending Request</option>
  116. <option>All requests </option>
  117. </select>
  118. </th>
  119. <table class="table">
  120. <tr>
  121. <th>
  122. @Html.DisplayNameFor(model => model.EmployeeId)
  123. </th>
  124. <th>
  125. @Html.DisplayNameFor(model => model.EmployeeName)
  126. </th>
  127. <th>
  128. @Html.DisplayNameFor(model => model.EmployeeStatus)
  129. </th>
  130. <th></th>
  131. </tr>
  132. @foreach (var item in Model)
  133. {
  134. <tr>
  135. <td>
  136. @Html.DisplayFor(modelItem => item.EmployeeId)
  137. </td>
  138. <td>
  139. @Html.DisplayFor(modelItem => item.EmployeeName)
  140. </td>
  141. <td>
  142. @Html.DisplayFor(modelItem => item.EmployeeStatus)
  143. </td>
  144. </tr>
  145. }
  146. </table>
  147. **所以,在下拉列表`statusselect`的选择索引更改时,如何在视图`GetAllEmpDetails`上获取数据?**
英文:

I work on MVC web application using c# by ado.net I face issue I can't display employee data based on drop down selected index changed .

so

if user select Pending Request from drop down list it will select employee that have select employee status 1 .

if user select Done Request from drop down list it will select employee that have select employee status 2 .

my code as below :

Table structure

  1. CREATE TABLE [dbo].[Employee](
  2. [EmployeeId] [int] NOT NULL,
  3. [EmployeeName] [nvarchar](100) NULL,
  4. [EmployeeStatus] [int] NULL,
  5. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
  6. (
  7. [EmployeeId] ASC
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  9. ) ON [PRIMARY]
  10. GO
  11. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1211, N&#39;ahmed&#39;, 1)
  12. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1222, N&#39;eslam&#39;, 1)
  13. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1223, N&#39;adel&#39;, 2)
  14. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1224, N&#39;mohamed&#39;, 2)
  15. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1225, N&#39;mosh&#39;, 2)
  16. INSERT [dbo].[Employee] ([EmployeeId], [EmployeeName], [EmployeeStatus]) VALUES (1227, N&#39;ali&#39;, 1)

stored procedures have logic

  1. create Procedure [dbo].[LoadDropDownEmployee]
  2. @EmployeeStatus int
  3. as
  4. begin
  5. select * from Employee where EmployeeStatus=@EmployeeStatus
  6. End
  7. create Procedure [dbo].[GetEmployees]
  8. as
  9. begin
  10. select *from Employee
  11. End

Employee Model

  1. public class EmpModel
  2. {
  3. public int EmployeeId { get; set; }
  4. public string EmployeeName { get; set; }
  5. public int EmployeeStatus { get; set; }
  6. }

Employee Repository have functions for controller

  1. public List&lt;EmpModel&gt; GetAllEmployees()
  2. {
  3. connection();
  4. List&lt;EmpModel&gt; EmpList = new List&lt;EmpModel&gt;();
  5. SqlCommand com = new SqlCommand(&quot;GetEmployees&quot;, con);
  6. com.CommandType = CommandType.StoredProcedure;
  7. SqlDataAdapter da = new SqlDataAdapter(com);
  8. DataTable dt = new DataTable();
  9. con.Open();
  10. da.Fill(dt);
  11. con.Close();
  12. foreach (DataRow dr in dt.Rows)
  13. {
  14. EmpList.Add(
  15. new EmpModel
  16. {
  17. EmployeeId = Convert.ToInt32(dr[&quot;EmployeeId&quot;]),
  18. EmployeeName = Convert.ToString(dr[&quot;EmployeeName&quot;]),
  19. EmployeeStatus = Convert.ToInt32(dr[&quot;EmployeeStatus&quot;])
  20. }
  21. );
  22. }
  23. return EmpList;
  24. }
  25. public List&lt;EmpModel&gt; LoadDropDownLists(int EmployeeStatus)
  26. {
  27. connection();
  28. List&lt;EmpModel&gt; EmpList = new List&lt;EmpModel&gt;();
  29. SqlCommand com = new SqlCommand(&quot;LoadDropDownEmployee&quot;, con);
  30. com.CommandType = CommandType.StoredProcedure;
  31. com.Parameters.Add(&quot;@EmployeeStatus&quot;, SqlDbType.VarChar, 50);
  32. com.Parameters[&quot;@EmployeeStatus&quot;].Value = EmployeeStatus;
  33. SqlDataAdapter da = new SqlDataAdapter(com);
  34. DataTable dt = new DataTable();
  35. con.Open();
  36. da.Fill(dt);
  37. con.Close();
  38. foreach (DataRow dr in dt.Rows)
  39. {
  40. EmpList.Add(
  41. new EmpModel
  42. {
  43. EmployeeId = Convert.ToInt32(dr[&quot;EmployeeId&quot;]),
  44. EmployeeName = Convert.ToString(dr[&quot;EmployeeName&quot;])
  45. }
  46. );
  47. }
  48. return EmpList;
  49. }

controller Employee

  1. public class EmployeeController : Controller
  2. {
  3. public ActionResult LoadDropDownList(int EmployeeStatus)
  4. {
  5. EmpRepository EmpRepo = new EmpRepository();
  6. return View();
  7. }
  8. public ActionResult GetAllEmpDetails()
  9. {
  10. EmpRepository EmpRepo = new EmpRepository();
  11. ModelState.Clear();
  12. return View(EmpRepo.GetAllEmployees());
  13. }
  14. }

view GetAllEmpDetails.cshtml

  1. @model IEnumerable&lt;Ado.netMvc.Models.EmpModel&gt;
  2. @{
  3. ViewBag.Title = &quot;GetAllEmpDetails&quot;;
  4. }
  5. &lt;h2&gt;GetAllEmpDetails&lt;/h2&gt;
  6. &lt;th&gt;
  7. &lt;select class=&quot;form-control&quot; id=&quot;statusselect&quot; name=&quot;statusselectName&quot;&gt;
  8. &lt;option&gt;Select Status&lt;/option&gt;
  9. &lt;option&gt;Pending Request&lt;/option&gt;
  10. &lt;option&gt;All requests &lt;/option&gt;
  11. &lt;/select&gt;
  12. &lt;/th&gt;
  13. &lt;table class=&quot;table&quot;&gt;
  14. &lt;tr&gt;
  15. &lt;th&gt;
  16. @Html.DisplayNameFor(model =&gt; model.EmployeeId)
  17. &lt;/th&gt;
  18. &lt;th&gt;
  19. @Html.DisplayNameFor(model =&gt; model.EmployeeName)
  20. &lt;/th&gt;
  21. &lt;th&gt;
  22. @Html.DisplayNameFor(model =&gt; model.EmployeeStatus)
  23. &lt;/th&gt;
  24. &lt;th&gt;&lt;/th&gt;
  25. &lt;/tr&gt;
  26. @foreach (var item in Model)
  27. {
  28. &lt;tr&gt;
  29. &lt;td&gt;
  30. @Html.DisplayFor(modelItem =&gt; item.EmployeeId)
  31. &lt;/td&gt;
  32. &lt;td&gt;
  33. @Html.DisplayFor(modelItem =&gt; item.EmployeeName)
  34. &lt;/td&gt;
  35. &lt;td&gt;
  36. @Html.DisplayFor(modelItem =&gt; item.EmployeeStatus)
  37. &lt;/td&gt;
  38. &lt;/tr&gt;
  39. }
  40. &lt;/table&gt;

so How to get data on view GetAllEmpDetails when drop down statusselect selected index changed ?

答案1

得分: 1

请将员工列表移到一个局部视图中。这样,GetAllEmpDetails.cshtml视图将如下所示。在主视图上的ajax调用从Employee Controller的GetAllEmpDetailsByStatus ActionResult方法中渲染局部视图。此外,我在选择输入的选项中添加了值,因为我们需要将此值传递给GetAllEmpDetailsByStatus方法并筛选员工数据。

  1. @model IEnumerable<Ado.netMvc.Models.EmpModel>
  2. @{
  3. ViewBag.Title = "GetAllEmpDetails";
  4. }
  5. <script type="text/javascript">
  6. $(document).ready(function () {
  7. $("#statusselect").change(function () {
  8. var postData = {
  9. empStatus: $(this).val()
  10. };
  11. $.ajax({
  12. cache: false,
  13. type: 'POST',
  14. url: '../Employee/GetAllEmpDetailsByStatus',
  15. data: postData,
  16. dataType: 'json',
  17. success: function (data) {
  18. $("#employeeContainer").html(data.html);
  19. },
  20. failure: function () {
  21. }
  22. });
  23. });
  24. });
  25. </script>
  26. <h2>GetAllEmpDetails</h2>
  27. <th>
  28. <select class="form-control" id="statusselect" name="statusselectName">
  29. <option value="1">选择状态</option>
  30. <option value="2">待处理请求</option>
  31. <option value="0">所有请求</option>
  32. </select>
  33. </th>
  34. <div id="employeeContainer">
  35. @Html.Partial("_AllEmployee", Model)
  36. </div>

以下是局部视图:

  1. @model IEnumerable<Ado.netMvc.Models.EmpModel>
  2. <table class="table">
  3. <tr>
  4. <th>
  5. 员工ID
  6. </th>
  7. <th>
  8. 员工姓名
  9. </th>
  10. <th>
  11. 员工状态
  12. </th>
  13. </tr>
  14. @foreach (var item in Model)
  15. {
  16. <tr>
  17. <td>
  18. @Html.DisplayFor(modelItem => item.EmployeeId)
  19. </td>
  20. <td>
  21. @Html.DisplayFor(modelItem => item.EmployeeName)
  22. </td>
  23. <td>
  24. @Html.DisplayFor(modelItem => item.EmployeeStatus)
  25. </td>
  26. </tr>
  27. }
  28. </table>

EmployeeController的GetAllEmpDetailsByStatus() ActionResult方法如下:

  1. public class EmployeeController : Controller
  2. {
  3. [HttpPost]
  4. public ActionResult GetAllEmpDetailsByStatus(int empStatus)
  5. {
  6. EmpRepository EmpRepo = new EmpRepository();
  7. ModelState.Clear();
  8. var theData = EmpRepo.LoadDropDownLists(empStatus);
  9. return Json(new
  10. {
  11. html = RenderPartialViewToString("_AllEmployee", theData)
  12. });
  13. }
  14. public virtual string RenderPartialViewToString(string viewName, object model)
  15. {
  16. if (string.IsNullOrEmpty(viewName))
  17. viewName = this.ControllerContext.RouteData.GetRequiredString("action");
  18. this.ViewData.Model = model;
  19. using (var sw = new StringWriter())
  20. {
  21. ViewEngineResult viewResult = System.Web.Mvc.ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
  22. var viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
  23. viewResult.View.Render(viewContext, sw);
  24. return sw.GetStringBuilder().ToString();
  25. }
  26. }
  27. }
英文:

Please move the employee list to a partial view. So the GetAllEmpDetails.cshtml view will be like the below. The ajax call on the main view to render the partial view from the ActionResult method GetAllEmpDetailsByStatus of Employee Controller. Also I add value to the option of the select input. Because we need to pass this value to the GetAllEmpDetailsByStatus method and filter the employee data.

  1. @model IEnumerable&lt;Ado.netMvc.Models.EmpModel&gt;
  2. @{
  3. ViewBag.Title = &quot;GetAllEmpDetails&quot;;
  4. }
  5. &lt;script type=&quot;text/javascript&quot;&gt;
  6. $(document).ready(function () {
  7. $(&quot;#statusselect&quot;).change(function () {
  8. var postData = {
  9. empStatus: $(this).val()
  10. };
  11. //addAntiForgeryToken(postData);
  12. $.ajax({
  13. cache: false,
  14. type: &#39;POST&#39;,
  15. url: &#39;../Employee/GetAllEmpDetailsByStatus&#39;,
  16. data: postData,
  17. dataType: &#39;json&#39;,
  18. success: function (data) {
  19. $(&quot;#employeeContainer&quot;).html(data.html);
  20. },
  21. failure: function () {
  22. }
  23. });
  24. });
  25. });
  26. &lt;/script&gt;
  27. &lt;h2&gt;GetAllEmpDetails&lt;/h2&gt;
  28. &lt;th&gt;
  29. &lt;select class=&quot;form-control&quot; id=&quot;statusselect&quot; name=&quot;statusselectName&quot;&gt;
  30. &lt;option value=&quot;1&quot;&gt;Select Status&lt;/option&gt;
  31. &lt;option value=&quot;2&quot;&gt;Pending Request&lt;/option&gt;
  32. &lt;option value=&quot;0&quot;&gt;All requests &lt;/option&gt;
  33. &lt;/select&gt;
  34. &lt;/th&gt;
  35. &lt;div id=&quot;employeeContainer&quot;&gt;
  36. @Html.Partial(&quot;_AllEmployee&quot;, Model)
  37. &lt;/div&gt;

The Partial View below

  1. @model IEnumerable&lt;Ado.netMvc.Models.EmpModel&gt;
  2. &lt;table class=&quot;table&quot;&gt;
  3. &lt;tr&gt;
  4. &lt;th&gt;
  5. Employee Id
  6. &lt;/th&gt;
  7. &lt;th&gt;
  8. Employee Name
  9. &lt;/th&gt;
  10. &lt;th&gt;
  11. Employee Status
  12. &lt;/th&gt;
  13. &lt;/tr&gt;
  14. @foreach (var item in Model)
  15. {
  16. &lt;tr&gt;
  17. &lt;td&gt;
  18. @Html.DisplayFor(modelItem =&gt; item.EmployeeId)
  19. &lt;/td&gt;
  20. &lt;td&gt;
  21. @Html.DisplayFor(modelItem =&gt; item.EmployeeName)
  22. &lt;/td&gt;
  23. &lt;td&gt;
  24. @Html.DisplayFor(modelItem =&gt; item.EmployeeStatus)
  25. &lt;/td&gt;
  26. &lt;/tr&gt;
  27. }
  28. &lt;/table&gt;
  29. The GetAllEmpDetailsByStatus() ActionResult method of EmployeeController is like the below.
  30. public class EmployeeController : Controller
  31. {
  32. [HttpPost]
  33. public ActionResult GetAllEmpDetailsByStatus(int empStatus)
  34. {
  35. EmpRepository EmpRepo = new EmpRepository();
  36. ModelState.Clear();
  37. var theData= EmpRepo.LoadDropDownLists(empStatus);
  38. return Json(new
  39. {
  40. html = RenderPartialViewToString(&quot;_AllEmployee&quot;, theData)
  41. });
  42. }
  43. // Better to move the base class, like BaseController.
  44. public virtual string RenderPartialViewToString(string viewName, object model)
  45. {
  46. if (string.IsNullOrEmpty(viewName))
  47. viewName = this.ControllerContext.RouteData.GetRequiredString(&quot;action&quot;);
  48. this.ViewData.Model = model;
  49. using (var sw = new StringWriter())
  50. {
  51. ViewEngineResult viewResult = System.Web.Mvc.ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
  52. var viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
  53. viewResult.View.Render(viewContext, sw);
  54. return sw.GetStringBuilder().ToString();
  55. }
  56. }
  57. }

huangapple
  • 本文由 发表于 2023年2月6日 09:08:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75356578.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定