AJAX 与局部视图 MVC 4 ASP.net C#

Question

好的，谢谢你们，我现在几乎可以工作了，但我不明白为什么它不会重新加载当前代码的数据：

我的部分观点：

@model IEnumerable<Smoelenboek.Models.Person>

@{
    ViewBag.Title = "Search details"; 
}

<div class="searchresults">
    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                Knowledge
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                Skills to learn
            </th>
            <th>
                Project
            </th>
            <th>
                Years of work experience
            </th>
            <th>
                Hobby projects
            </th>
            <th>
                Summary
            </th>
            <th>
                Extra Information
            </th>
        </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.ActionLink(item.Name.ToString(), "/SearchSkillsDetails", new { id = item.ID })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LearntSkillsAndLevelOfSkills)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SkillsToLearn)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stand)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.YearsOfWorkExperience)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.HobbyProjectICTRelated)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Summary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ExtraInfo)
            </td>
        </tr>
    }

    </table>
</div>

我的看法：

@model IEnumerable<Smoelenboek.Models.Person>

@{
    ViewBag.Title = "Search Skills";
}


<h2>Search People</h2>

@using (Html.BeginForm("SearchSkills", "Person", FormMethod.Get))
{

    <div class="search">
       @Html.TextBox("parameter")

       <select name="choice" class="choicecheckbox">
          <option id="knowsalready">Knows Already</option>
          <option id="wantstolearn">Wants To Learn</option>
          <option id="hobbies">Hobbies</option>
          <option id="name">Name</option>
       </select>

       <input class="inputsearch" type="submit" value="Search" /> 
    </div>
}
<br />
<h2>Search results</h2>
<div class="searchfilters">
    <br />
    <input id="checkboxlocationfilter" type="checkbox" name="locationFilter" class="locationFiltercss" onchange="changeFilter()">
    <label for="checkboxlocationfilter" class="locationFiltercss">Filter on location</label>
    <br />
    <input id="checkboxlevelofknowledgefilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxlevelofknowledgefilter" class="locationFiltercss">Filter on skill level of knowledge</label>    
    <br />
    <input id="checkboxlevelofwantstolearnfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxlevelofwantstolearnfilter" class="locationFiltercss">Filter on skills level of wants to learn</label>
    <br />
    <input id="checkboxpopularityfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxpopularityfilter" class="locationFiltercss">Filter on popularity</label>
    <br />
    <input id="checkboxhobbyprojectsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxhobbyprojectsfilter" class="locationFiltercss">Filter on only hobbyprojects</label>
    <br />
    <input id="checkbox5yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkbox5yearsfilter" class="locationFiltercss">Filter on years of work experience more than 5</label>
    <script type="text/javascript">
        $(checkbox5yearsfilter).click(function () {
            if ($(checkbox5yearsfilter).is(':checked')) {
                $.ajax({
                    type: 'POST',
                    url: '../Person/changeFilter',
                    datatype: 'html',
                    success: function (data) {
                        $('#_SearchSkills').html(data);
                        alert(data);
                    },
                    error: function (data) {
                        alert("failed");
                    }
                });

            }
        });
    </script>
    <br />
    <input id="checkbox10yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkbox10yearsfilter" class="locationFiltercss">Filter on years of work experience more than 10</label>
    <br />
    <input id="checkbox15yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkbox15yearsfilter" class="locationFiltercss">Filter on years of work experience more than 15</label>
    <br />
    <input id="checkboxphonenrfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxphonenrfilter" class="locationFiltercss">Has phone number</label>
    <br />
    <input id="checkboxextrainfoyfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxextrainfoyfilter" class="locationFiltercss">Has extra info</label>
    <br />
    <input id="checkboxextrainfonfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
    <label for="checkboxextrainfonfilter" class="locationFiltercss">doesn't have extra info</label>
</div>
<span>
    @Html.Partial("_SearchSkills", ViewData.Model);
</span>

我的控制器方法：

 public PartialViewResult changeFilter()
        {
            List<Person> list = new List<Person>();
            list = (from p in db.Persons where p.YearsOfWorkExperience > 5 select p).ToList();
            return PartialView("_SearchSkills", list);
        }

现在我在 ajax 调用中返回了 html 代码。我只需要知道如何使用新数据再次渲染表格，因为我真的不明白我该怎么做。我在互联网上发现了一些说使用 $(MyPartialName).html(data) 的东西，但这对我不起作用，所以有没有其他方法可以做到这一点，或者我忘记了什么（我确实添加了 unobtrusive-ajax.js布局）。希望有人可以帮助我，非常感谢您：D

Answer 1

您的 jQuery 选择器无效。在您的脚本标签中更改如下

$('#checkbox5yearsfilter').click(function () {
        if ($('#checkbox5yearsfilter').is(':checked')) {

然后替换这个

<span>
    @Html.Partial("_SearchSkills", ViewData.Model);
</span>

有了这个

<span id="_SearchSkills"></span>