Question

我有一个表格，列出系统中的课程，每个课程都有一个选择按钮（连续）。单击“选择”时，将显示该课程的已注册用户。 Course实体具有导航属性public List<CourseRegistration> CourseRegistrations { get; set; }

我有这个ViewModel用于此目的：

public class CourseIndexViewModel
{     
    public int SelectedCourseId { get; set; }

    public List<Course> Courses { get; set; }
}

在注册列表（或注册）的正下方，我有一个文本框（用于关键字）和用于搜索用户注册的按钮。我使用AJAX来执行控制器（UserController）（我传递关键字）的操作，该操作搜索数据库中的用户，并将结果集传递给部分视图，该部分视图返回每行中具有注册按钮的用户表。

到目前为止一切正常。现在，我需要在Partial View中实现Enroll按钮。但是，我需要课程的ID，这在主视图中实际可用（即，SelectedCourseId）。有没有办法从局部视图中访问该值？我是否必须（或应该）为此目的使用隐藏输入？

最大的挑战是在注册新用户后更新主视图中显示的注册列表。我想使用Ajax来防止页面刷新。

是否可行并建议使用Ajax从数据库中再次获取注册，并使用在部分视图中生成的新表替换主视图中的现有注册表？

更新以下是主要观点：

@model EcholuMvc.Models.CourseIndexViewModel

<table class="table">
    <tr>
        <th></th>
        <th>
            CourseTitle
        </th>           
        <th></th>
    </tr>

    @foreach (var item in Model.Courses)
    {
        <tr @(Model.SelectedCourseId == item.CourseId ? "style=background-color:whitesmoke;" : "style=" )>
            <td>
                @Html.ActionLink("Select", "Index", new { courseId = item.CourseId })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CourseTitle)
            </td>                
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.CourseId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.CourseId })
            </td>
        </tr>
        if (Model.SelectedCourseId == item.CourseId)
        {
            <tr>
                <td>
                    <h4>Enrolled users:</h4>
                    <table class="table">
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>                                
                            <th></th>
                        </tr>
                        @if (item.CourseRegistrations.Count > 0)
                        {
                            var registrations = item.CourseRegistrations;
                            foreach (var reg in registrations)
                            {
                                <tr>
                                    <td>
                                        @reg.Member.FirstName
                                    </td>
                                    <td>
                                        @reg.Member.LastName
                                    </td>                                        
                                    <td>
                                        @Html.ActionLink("Delete", "Delete", new { memberid = reg.MemberId, courseid = reg.CourseId })
                                    </td>
                                </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td colspan="4">No enrollment!</td>
                            </tr>
                        }

                    </table>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-9">
                                <input id="txt_SearchUser" placeholder="Enter a name.." class="form-control " type="text" />
                            </div>
                            <input id="btn_SubmitUserSearch" class="btn btn-default btn-sm col-sm-3" type="button" value="Search" />
                        </div>
                        <div class="row">
                            <div id="div_UserSearchResults" class="col-sm-12">

                            </div>
                        </div>
                    </div>
                    <script>
                        $("#btn_SubmitUserSearch").click(function () {
                            $.ajax({
                                url: 'Account/SearchUsers',
                                contentType: 'application/html; charset=utf-8',
                                data: { keyword: $('#txt_SearchUser').val() },
                                type: 'GET',
                                dataType: 'html'
                            })
                            .success(function (result) {
                                $('#div_UserSearchResults').html(result);
                            })
                            .error(function (xhr, status) {
                                alert(status);
                            })
                        });
                    </script>
                </td>
            </tr>
        }
    }

</table>

而且，这是局部视图：

@model IEnumerable<EcholuMvc.Models.ApplicationUser>

<table class="table-striped" >
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            <select id="drp_Role">
                <option value="Student" selected="selected">Student</option>
                <option value="Instructor">Instructor</option>
            </select>
        </td>
        <td>
            <input id="btn_Enroll" data-userid="@item.Id" type="button" />
        </td>
    </tr>
}

</table>

Answer 1

如果您只想在客户端选择courseId（对于新注册的ajax提交或任何其他事项），您可以在主视图中添加隐藏字段，并在需要时从中读取。

@Html.HiddenFor(s=>s.SelectedCourseId)

现在，只要你需要它来获取你的ajax帖子，只需阅读它的值并使用

var selectedCourseId=$("#s.SelectedCourseId").val();

但是如果您出于某种原因希望在搜索功能中使用courseId，则可以将选定的courseId作为参数传递给您的ajax调用。将课程ID作为html 5数据属性保存到搜索输入字段

<input id="txt_SearchUser" placeholder="Enter a name.."
               data-course="@item.CourseId" class="form-control " type="text" />

现在，当您进行ajax调用时，请读取此值并发送它。

$("#btn_SubmitUserSearch").click(function () {
     $.ajax({
             url: 'Account/SearchUsers',
             data: { keyword: $('#txt_SearchUser').val(),
                     courseId:$('#txt_SearchUser').data("course") },
             type: 'GET',
             dataType: 'html'
            })
            .success(function (result) {
                $('#div_UserSearchResults').html(result);
            })
            .error(function (xhr, status) {
               alert(status);
           })
});

确保您的SearchUsers端点接受此新参数并将其传递给它将呈现的结果部分视图。

public ActionResult SearchUsers(string keyword,int courseId)
{
  // to do : Do something with the passed values
  // to do : return something
}

此外，我假设，在您的if条件下，您只在页面中呈现一个搜索表单，因为您不能拥有重复的ID。另请考虑使用Url.Action辅助方法为操作方法生成正确的网址，而不是按this post中的说明对网址进行硬编码。

如何使用Ajax

1 个答案: