我有部分页面加载多次。当我放置console.log
时,它会显示页面首次加载时多次点击。
当用户获得empid
值时,它会点击此方法多次点击。
我认为这会降低网站的效果。Screenshot of partial
有谁能告诉我为什么会这样?
控制器
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>
}
}
_PartialLink
<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 });
});