jquery - 为什么在 MVC 应用程序中多次加载部分？

Question

我有多次加载的部分页面。当我输入时console.log，它显示页面首次加载时页面被多次点击。

当用户获得empid价值时，它会在多次点击的地方点击这个方法。

我认为这会降低网站的性能。部分截图

谁能建议我为什么会这样？

控制器

  public ActionResult Employee()
  {
    ClsEmployee model = new ClsEmployee();         
    model = Dropdownlist();          
    return View(model);
  }


public ActionResult EmployeeFilter(ClsEmployee model)
 {
  ListFilter(model);
  return PartialView("~/Views/Employee/_FirstPartialDetails.cshtml", ViewData["Employees"]);
 }

 public PartialViewResult PartialLink(int empid)
  {
    EmployeeDetails employeeDetails = new EmployeeDetails();
    var model = new ClsEmployee();
    model = employeeDetails.DetailsSQL(empid);
    return PartialView("_PartialLink", model);
   }

父视图

<div class="container">

                @using (Html.BeginForm("Employee", "Employee", FormMethod.Post, new { @Id = "EmpForm" }))
                {

                    <div class="panel panel-default">

                       <div class="panel-body">
                            <div>
                                <b>@Html.DisplayName("Country")</b>
                                @Html.DropDownListFor(m => m.Country, Model.CountryOption, new {@onchange = "Update();" })
                            </div>
                        </div>
                    </div>

                }



            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="EmployeeDetailsPartial"></div>
                </div>
            </div>

        <div id="PartialsecondPartial"></div>
    </div>

_FirstPartialDetails

<table class="table" id="tblPartial">
    <thead>
        <tr>
            <th>Name</th>
            <th>Details</th>
        </tr>
    </thead>

    @if (ViewData["Employees"] != null)
    {
        var dt = ViewData["Employees"] as System.Data.DataTable;
        foreach (System.Data.DataRow dr in dt.Rows)
        {

            <tbody>
                <tr id="tablerow" data-empid="@dr["empid"]">
                    <td>
                        @dr["Name"]

                    </td>

                    <td>
                        @dr["details"]

                    </td>
                </tr>
            </tbody>
        }
    }

_部分链接

<div class="panel panel-default">
    <div class="panel-heading">
        @foreach (var item in Model.employeeHeader)
            {
            @Html.DisplayFor(modelItem => item.EmpName)
        }

    </div>

    <div class="panel-body" >
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                @foreach (var item in Model.empmainbody.Take(3))
                {

          <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Details_@(item.EmpId)">
      <div class="panel-heading">
     @Html.Raw(item.EmpNameDetails)

                            </div>
                        </a>

                    <div id="Details_@(item.EmpId)" class="panel-collapse collapse">
                        <div class="panel-body">
                            @Html.Raw(item.Details)
                        </div>
                    </div>
                }
            </div>



            <table class="table-responsive">

                @foreach (var item in Model.empDetails)
            {

                   <tr>

                        <td>
                            @Html.DisplayFor(modelItem => item.EmpDetails)
                        </td>

                    </tr>
                }
            </table>
        </div>
        </div>
    </div>

jQuery

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

          function Update() {
            var partial = $('#EmployeeDetailsPartial');
            var form = $('#EmpForm');
              $.ajax({
                url: '@Url.Action("EmployeeFilter", "Employee")',
                type: 'POST',
                data: form.serialize(),
                success: function (data) {
                partial.html(data);
                partial.find('#tblPartial tbody tr:first').addClass('highlight').click();
                }
                });
                };


  $('#EmployeeDetailsPartial').on('click', '#tablerow', function () {
          var empid = $(this).data("empid");
          var url = '@Url.Action("PartialLink", "Employee")';
        $('#PartialsecondPartial').load(url, { empid: empid });
        });

标签： jqueryasp.net-mvc