如何在Asp.net MVC中使用jQuery从Webgrid行选择中触发PartialView

Question

我正在比较一个webgrid和一个dropdownbox。我想通过Ajax触发CoursePartialDemo部分局部视图，并且必须将主键传递给负责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函数完全可以触发

Answer 1

更改

<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>

我不确定您是否要显示任何产品详细信息或员工。