我正在比较一个webgrid和一个dropdownbox。我想CoursePartialDemo
通过Ajax触发一个局部视图,并且必须将主键传递给负责Partialview的动作。在一个dropdownbox中,我已经通过遵循Jquery成功地做到了。在webgrid中,如何触发部分视图并传递webgrid的主键“ id”。以下代码负责dropdownbox
<select id="ddlEmployeeCourse">
@*Iterating Employee ViewModel *@
@foreach (var emp in Model)
{
<option value="@emp.EmpCode">@emp.EmpName</option>
}
</select>
<h4>Courses Of Selected Employeee</h4>
<div id="CoursesForEmp">
</div>
<script>
function getCourseTable(selectedEmpCode) {
$.ajax({
// Get Course PartialView
url: "/Home/CoursePartialDemo",
type: 'GET',
data: { EmpCode: selectedEmpCode },
success: function (data) {
jQuery("#CoursesForEmp").html(data);
},
error: function (error) {
alert("Error: Please try again.");
}
});
}
</script>
<script>
jQuery(document).ready(function () {
jQuery("#ddlEmployeeCourse").change(function (index) {
var selectedEmpCode = $(this).val();
getCourseTable(selectedEmpCode);
});
</script>
这是我的网络网格代码
<div id="">
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
//grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),
grid.Column("id", "id"), //primary key
grid.Column("countryname", format: (item) => item.GetSelectLink(item.countryname)),
grid.Column("continent", "Description", style: "continent"),
grid.Column("language", "language")
))
</div>
更新我对webgrid代码做了一些更改,如下所示
@if (grid.HasSelection)
{
product = (firstmvc4.Models.Country)grid.Rows[grid.SelectedIndex].Value;
var val = @product.id;
<script>
getCourseTable(val)
</script>
}
但是javascript函数完全可以触发
改变
<script>
getCourseTable(val)
</script>
到
Html.RenderAction("CoursePartialDemo", new { EmpCode = val });
并放置在CoursesForEmp
元素内。
例如:
<div id="CoursesForEmp">
@if (grid.HasSelection)
{
product = (firstmvc4.Models.Country)grid.Rows[grid.SelectedIndex].Value;
var val = product.id;
Html.RenderAction("CoursePartialDemo", new { EmpCode = val });
}
</div>
我不确定您是否要显示任何产品详细信息或员工。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句