我是MVC3和Razor的新手,一旦从AJAX发布返回数据,就需要绑定/加载WebGrid的帮助。任何帮助将不胜感激(项目截止日期很快临近);)
我的情况是这样的:我有两个级联的下拉列表。第一个列表包含数据库中的区域。选择区域后,它将在第二个下拉列表中填充一系列设施。选择设施后,我需要使用建筑物列表填充WebGrid。我的级联下拉菜单正常工作
Index.cshtml:
@using ThisController = MyProject.Controllers.BuildingModelsController
@model IEnumerable<MyProject.Models.BuildingModel>
<div id="tabs-2">
<!-- Current Buildings -->
@{
if (Model != null && Model.Count() > 0)
{
var grid = new WebGrid(source: Model, rowsPerPage: ThisController.PageSize, ajaxUpdateContainerId: "tabs-2", defaultSort: "BuildingNumber");
grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
grid.GetHtml(
tableStyle: "display",
alternatingRowStyle: "alt",
columns: grid.Columns(
//grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.EmployeeID, ContactID = item.ContactID })),
grid.Column("BuildingNumber", header: "Building Number"),
grid.Column("ConstructionDate", header: "Construction Date"),
grid.Column("ExtSquareFeet", header: "Exterior Sq. Ft."),
grid.Column("IntSquareFeet", header: "Interior Sq. Ft."),
grid.Column("IU_Avail", header: "IU Available"),
grid.Column("SpaceAvail", header: "Space Available"),
grid.Column("FixedAssetValue", header: "Fixed Asset Value"),
grid.Column("FixedEquipValue", header: "Fixed Equipment Value")
));
}
else
{
@:There are no buildings at this facility.
}
}
</div>
这是我的AJAX电话
var regId = $("#ddlRegion").val();
var facId = $("#ddlFacility").val();
$.ajax({
type: "POST",
url: '@Url.Action("GetFacilityDetails")',
data: { regionId: regId, facilityId: facId },
success: function (returndata) {
if (returndata.ok) {
var itemData = returndata.data;
var address = itemData.Address + " " + itemData.City + " " + itemData.State + " " + itemData.Zip;
$("#lblFacilityType").html(itemData.FacilityType);
$("#lblFacilityPurpose").html(itemData.FacilityPurpose);
$("#lblFacilityStatus").html(itemData.FacilityStatus);
$("#lblFacilityAddress").html(address);
$("#tabs").tabs({ disabled: [] });
//need to populate webgrid here
}
else {
window.alert(' error : ' + returndata.message);
}
}
}
);
我的控制器:
[HttpPost]
public ActionResult GetFacilityDetails(int regionId, string facilityId)
{
try
{
//ViewBag.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId);
var facility = buildingsVM.GetFacilityDetails(regionId, facilityId);
facility.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId) as List<BuildingModel>;
return Json(new { ok = true, data = facility, message = "ok" });
}
catch (Exception ex)
{
return Json(new { ok = false, message = ex.Message });
}
}
@Darin我已建议您进行更改,但屏幕上未显示任何内容。我也没有任何错误。我逐步检查了代码,并确认视图中的Model对象具有12个自定义的“建筑模型”对象。
这是我的PartialView:
@model IEnumerable<COPSPlanningWeb.Models.BuildingModel>
@{
if (Model != null && Model.Count() > 0)
{
var grid = new WebGrid(rowsPerPage: 50, defaultSort: "BuildingNumber", ajaxUpdateContainerId: "tabs-2");
grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
grid.GetHtml(
tableStyle: "display",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("BuildingNumber"),
grid.Column("ConstructionDate"),
grid.Column("ExtSquareFeet"),
grid.Column("IntSquareFeet"),
grid.Column("IU_Avail"),
grid.Column("SpaceAvail"),
grid.Column("FixedAssetValue"),
grid.Column("FixedEquipValue")
));
}
else
{
@:There are no buildings at this facility.
}
}
有趣的是,当我在浏览器中执行视图源时,我看到“此设施没有建筑物。”,但是它没有显示在屏幕上,并且当我在调试器中逐步执行代码时,模型确实具有我的自定义对象。
。
您可以将WebGrid分为部分:
@using ThisController = MyProject.Controllers.BuildingModelsController
@model IEnumerable<MyProject.Models.BuildingModel>
<div id="tabs-2">
@Html.Partial("_Buildings")
</div>
里面_Buildings.cshtml
:
<!-- Current Buildings -->
@{
if (Model != null && Model.Count() > 0)
{
var grid = new WebGrid(source: Model, rowsPerPage: ThisController.PageSize, ajaxUpdateContainerId: "tabs-2", defaultSort: "BuildingNumber");
grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
grid.GetHtml(
tableStyle: "display",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("BuildingNumber", header: "Building Number"),
grid.Column("ConstructionDate", header: "Construction Date"),
grid.Column("ExtSquareFeet", header: "Exterior Sq. Ft."),
grid.Column("IntSquareFeet", header: "Interior Sq. Ft."),
grid.Column("IU_Avail", header: "IU Available"),
grid.Column("SpaceAvail", header: "Space Available"),
grid.Column("FixedAssetValue", header: "Fixed Asset Value"),
grid.Column("FixedEquipValue", header: "Fixed Equipment Value")
)
);
}
else
{
@:There are no buildings at this facility.
}
}
现在,在成功的情况下,在控制器操作中返回以下部分:
[HttpPost]
public ActionResult GetFacilityDetails(int regionId, string facilityId)
{
try
{
var facility = buildingsVM.GetFacilityDetails(regionId, facilityId);
facility.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId) as List<BuildingModel>;
return PartialView("_Buildings", facility.Buildings);
}
catch (Exception ex)
{
return Json(new { ok = false, message = ex.Message });
}
}
在您的AJAX调用中只需刷新:
var regId = $("#ddlRegion").val();
var facId = $("#ddlFacility").val();
$.ajax({
type: "POST",
url: '@Url.Action("GetFacilityDetails")',
data: { regionId: regId, facilityId: facId },
success: function (returndata) {
if (!returndata.ok) {
window.alert(' error : ' + returndata.message);
} else {
$('#tabs').tabs({ disabled: [] });
$('#tabs-2').html(returndata);
}
}
});
表单项: input, textarea, select 等. 使用v-model来绑定 输入项 <input v-model="my_value" style='width: 400px'/> 就可以在代码中获取到 this.my_value的值. 表单项的完整例子 <template> <div> input: <input type='text' v-model="input
基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。 `v-model` 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。 文本 <input v-model="message" pl
我试图使用标签库绑定 POJO。绑定引用类 bean 变量后,我收到“错误请求错误 - http 状态 400”。 如果我删除引用类的绑定,则我的表单将成功提交,并且值也会填充在类中。 和 JSP: 我从几篇文章中获得了引用,但是当我在提交JSP之前添加行时,他们正在获取请求加载引用bean列表。
我有一个web表单,可以更新appliaction.properties,这样用户就不必转到文件并编辑它。我想从application.properties文件中加载值并显示在web表单TextField中。在用户编辑一些更改后,用户可以更新application.properties文件。 问题-如何将web表单绑定到application.properties文件,而不是在Spring中使用@
MVVM就是在前端页面上,应用了扩展的MVC模式,我们关心Model的变化,MVVM框架自动把Model的变化映射到DOM结构上,这样,用户看到的页面内容就会随着Model的变化而更新。 例如,我们定义好一个JavaScript对象作为Model,并且把这个Model的两个属性绑定到DOM节点上: 经过MVVM框架的自动转换,浏览器就可以直接显示Model的数据了: 现在问题来了:MVVM框架哪家
因此,我在这里询问绑定表的概念。通常,只需对所有行/列使用ngFor即可。 然而,我想做的是,对于每个单元格,它应该绑定到一个具有两个属性的对象: <李>细胞内容李< / ><李>坳的头 在我的表中,我应该能够根据需要添加行或列。这很简单,但所有共享column_header的单元格都是棘手的部分。 现在这个表代表一个表单,所以我可以在用户单击submit后进行处理并解决问题。 我只是寻找其他聪明