问题描述
在我的视图上，我使用的是Viewmodel，并且我的表单中只有一个接受日期的文本框(不是viewmodel的一部分)和3个表.默认情况下，页面加载时..表中填充了基于今天日期的数据(您可以在下面的控制器代码中看到)，但是如果用户选择一个日期并单击搜索"按钮，那么我希望更改表中的数据不会根据选择的日期刷新页面.
On my view, I am using a Viewmodel, and I have a form that has only one textbox that accepts dates (not a part of the viewmodel) and 3 tables. By default on page load.. the tables are populated with data based on today's date (you can see that in the controller code below), but if a user selects a date and clicks the search button then I want the tables data to be changed without a page refresh based on the date they selected.
@using (Html.BeginForm())
{
<div class="form-group mb-3 mt-3" style="margin-right: -1.3%;">
<div class="input-group col-md-3 offset-md-9">
@Html.TextBox("detailsDate", null, new { id = "Details-Date", @class = "form-control datetimepicker" })
<div class="input-group-append">
<button id="Details-Date-Btn" type="submit" class="btn btn-outline-primary"><span class="fa fa-search"></span></button>
</div>
</div>
</div>
}
我想做的是，如果用户选择日期并按下搜索按钮..我希望页面不刷新，并且表格数据已基于日期进行了更改.截至目前，我得到:
What I am trying to do is if a user selects and date and hits the search button.. I would like the page to not refresh and the tables data have been changed based on the date. As of right now I am getting:
视图模型
public class PersonnelDetailsVm
{
private static ConnectionString db = new ConnectionString();
public PersonnelDetailsVm()
{
CurrentWeekDates = new List<DateTime>();
WeighAssociations = new List<tbl_WeighAssc>();
ArrestAssociations = new List<tbl_TEUArrestAssc>();
InspectionAssociations = new List<tblTEUInspectionAssc>();
}
public string IBM { get; set; }
[Display(Name = "Name")]
public string UserName { get; set; }
public bool Active { get; set; }
public List<DateTime> CurrentWeekDates { get; set; }
public List<tbl_WeighAssc> WeighAssociations { get; set; }
public List<tbl_TEUArrestAssc> ArrestAssociations { get; set; }
public List<tblTEUInspectionAssc> InspectionAssociations { get; set; }
public List<code_WeighLocation> WeighLocations => db.code_WeighLocation.ToList();
public List<code_ArrestType> ArrestTypes => db.code_ArrestType.ToList();
public List<code_InspectionLevel> InspectionLevels => db.code_InspectionLevel.ToList();
}
Ajax:
// Submission
//var redirectUrl = '@Url.Action("Index", "Personnels")';
var settings = {};
settings.baseUri = '@Request.ApplicationPath';
var infoGetUrl = "";
if (settings.baseUri === "/AppName") {
infoGetUrl = settings.baseUri + "/Personnels/Details/";
} else {
infoGetUrl = settings.baseUri + "Personnels/Details/";
}
$("#Details-Date-Btn").click(function() {
$.ajax({
url: infoGetUrl,
method: "POST",
data: $("form").serialize(),
success: function(response) {
console.log("success");
$("body").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
}
});
});
控制器:
public ActionResult Details(string id, string detailsDate)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
tblPersonnel tblPersonnel = db.tblPersonnels.Find(id);
if (tblPersonnel == null)
{
return HttpNotFound();
}
Mapper.Initialize(config => config.CreateMap<tblPersonnel, PersonnelDetailsVm>());
PersonnelDetailsVm person = Mapper.Map<tblPersonnel, PersonnelDetailsVm>(tblPersonnel);
var employeeData = EmployeeData.GetEmployee(person.IBM);
person.UserName =
$"{ConvertRankAbbr.Conversion(employeeData.Rank_Position)} {employeeData.FirstName} {employeeData.LastName}";
if (string.IsNullOrWhiteSpace(detailsDate))
{
var startOfWeek = DateTime.Today.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
(int)DateTime.Today.DayOfWeek);
person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
var teuFormIds = db.tbl_TEUForm
.Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();
person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.InspectionAssociations =
db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
return View(person);
}
else
{
var paramDate = DateTime.ParseExact(detailsDate, "MM/dd/yyyy", CultureInfo.CurrentCulture);
var startOfWeek = paramDate.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
(int)paramDate.DayOfWeek);
person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
var teuFormIds = db.tbl_TEUForm
.Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();
person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.InspectionAssociations =
db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
return Json(person, JsonRequestBehavior.AllowGet);
}
}
因此，如果actionresult的参数detailsDate不为null，则它将进入else语句，该语句返回JSON对象.在调试过程中，当返回视图时，我收到上面发布的错误.
So, if the actionresult's paramets detailsDate is not null, then it goes into the else statement which returns a JSON object. When debugging this goes through and when the view is returned I am receiving the error I posted above.
是否有一种方法可以用我从ajax调用返回的内容替换视图中的模型，以便表可以基于正确的日期而无需页面刷新?
Is there a way to replace the model in the view with what I'm returning from the ajax call so the tables can be based on the right date without a page refresh?
非常感谢您的帮助.
更新
基于下面的答案，我已经在控制器方法中将else语句编辑为:
Based on answer's below I have edited the else statement in my controller method to:
控制器
else
{
var paramDate = DateTime.ParseExact(detailsDate, "MM/dd/yyyy", CultureInfo.CurrentCulture);
var startOfWeek = paramDate.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
(int)paramDate.DayOfWeek);
person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
var teuFormIds = db.tbl_TEUForm
.Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();
person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.InspectionAssociations =
db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
JsonConvert.DefaultSettings = () => new JsonSerializerSettings()
{
PreserveReferencesHandling = PreserveReferencesHandling.All,
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
};
var jsonStr = JsonConvert.SerializeObject(person);
return Json(jsonStr, "text/plain");
}
我的jQuery/Ajax仍然相同:
My jQuery/Ajax is still the same:
$("#Details-Date-Btn").click(function() {
$.ajax({
url: infoGetUrl,
data: $("form").serialize(),
success: function(response) {
console.log("success");
console.log(response);
$("body").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
}
});
});
但是现在，选择日期后，我将返回到一个页面，该页面将Json像纯文本文件一样显示，而将HTML和CSS像普通视图一样丢失.
But now, when the date is selected I am being returned to a page that shows the Json like a plain text file and losing the HTML and CSS like a normal view.
下面是当选择了日期我正在被返回什么和按钮被点击.
Here is what I am being returned when a date is selected and the button is clicked.
此外，当我在选择日期时检查控制台并单击要将该日期发送到控制器的按钮时，会看到以下消息:
Also, when I check the console when I select a date and click the button for that date to be sent to the controller I am seeing this:
更新2
这是我的一张桌子..其他的都是相同的设置:
Here is one of my tables.. the other ones are the same setup:
<table class="table table-bordered">
<thead>
<tr>
<th></th>
@foreach (var date in Model.CurrentWeekDates)
{
<th class="text-center">@date.ToString("ddd") <br /> @date.ToShortDateString()</th>
}
<th class="text-center table-success">Total For Week</th>
</tr>
</thead>
<tbody>
@foreach (var weighLocation in Model.WeighLocations)
{
<tr class="text-center">
<td class="table-dark">@weighLocation.Weigh_Location</td>
@foreach (var date in Model.CurrentWeekDates)
{
if (Model.WeighAssociations.Any(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID))
{
<td>@Model.WeighAssociations.Single(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID).OccurenceCount</td>
}
else
{
<td>0</td>
}
}
<td class="table-success font-weight-bold">@Model.WeighAssociations.Where(x => x.WeighLocationId == weighLocation.ID).Sum(x => x.OccurenceCount)</td>
</tr>
}
</tbody>
</table>
推荐答案
据我所知，要解决此问题，您可以执行以下步骤:
As far as I can see from your problem, to fix it you can do following steps:
1-查看
添加部分视图(_Detail.cshtml)
您需要一个像_Detail这样的partial view，其中包括这样的table:
You need a partial view like _Detail that includes your table like this:
@model PersonnelDetailsVm
<table class="table table-bordered">
<thead>
<tr>
<th></th>
@foreach (var date in Model.CurrentWeekDates)
{
<th class="text-center">@date.ToString("ddd") <br /> @date.ToShortDateString()</th>
}
<th class="text-center table-success">Total For Week</th>
</tr>
</thead>
<tbody>
@foreach (var weighLocation in Model.WeighLocations)
{
<tr class="text-center">
<td class="table-dark">@weighLocation.Weigh_Location</td>
@foreach (var date in Model.CurrentWeekDates)
{
if (Model.WeighAssociations.Any(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID))
{
<td>@Model.WeighAssociations.Single(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID).OccurenceCount</td>
}
else
{
<td>0</td>
}
}
<td class="table-success font-weight-bold">@Model.WeighAssociations.Where(x => x.WeighLocationId == weighLocation.ID).Sum(x => x.OccurenceCount)</td>
</tr>
}
</tbody>
</table>
2-控制器
返回部分视图
您应该在控制器中填充模型并将其传递到局部视图.
You should fill the model in your controller and pass it to the partial view.
public ActionResult Details(string id, string detailsDate)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
tblPersonnel tblPersonnel = db.tblPersonnels.Find(id);
if (tblPersonnel == null)
{
return HttpNotFound();
}
Mapper.Initialize(config => config.CreateMap<tblPersonnel, PersonnelDetailsVm>());
PersonnelDetailsVm person = Mapper.Map<tblPersonnel, PersonnelDetailsVm>(tblPersonnel);
var employeeData = EmployeeData.GetEmployee(person.IBM);
person.UserName =
$"{ConvertRankAbbr.Conversion(employeeData.Rank_Position)} {employeeData.FirstName} {employeeData.LastName}";
if (string.IsNullOrWhiteSpace(detailsDate))
{
var startOfWeek = DateTime.Today.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
(int)DateTime.Today.DayOfWeek);
person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
var teuFormIds = db.tbl_TEUForm
.Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();
person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.InspectionAssociations =
db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
// return View(person);
}
else
{
var paramDate = DateTime.ParseExact(detailsDate, "MM/dd/yyyy", CultureInfo.CurrentCulture);
var startOfWeek = paramDate.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
(int)paramDate.DayOfWeek);
person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
var teuFormIds = db.tbl_TEUForm
.Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();
person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
person.InspectionAssociations =
db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
// return Json(person, JsonRequestBehavior.AllowGet);
}
// return PartialView with the person model
return PartialView("_Detail", person);
}
如上面的代码所示，您应该在代码中注释两行:
As you can see in the above code, you should comment the two lines in your code:
// return View(person);
// return Json(person, JsonRequestBehavior.AllowGet);
3- Ajax通话
获取局部视图并填写表单
您在ajax调用中没有任何更改，您可以这样做:
You don't any changes in ajax call and you can do it like this:
$("#Details-Date-Btn").click(function() {
$.ajax({
url: infoGetUrl,
method: "POST",
data: $("form").serialize(),
success: function(response) {
console.log("success");
$("body").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
}
});
});
response以这种方式是来自局部视图的html，并且包含您设计时的所有类.
response in this way is a html that comes from partial view and it has all classes as you designed it.
这篇关于执行ajax调用时序列化类型的对象时检测到循环引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！