帶有部分視圖的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>