Question

MVC 3，ajax，c＃

我的部分视图呈现为新页面，而不是替换搜索结果表。

控制器：

public class SearchController : Controller
{
    //
    // GET: /Search/
    private myEntities db = new myEntities();
    private Repository repo = new Repository();

    [HttpGet]
    public ActionResult Index()
    {
        var model = new List<PersonViewModel>();

        model = repo.GetPeople();

        return View(model);
    }




    public PartialViewResult _SearchResult(string fname, string lname)
    {
        var personResult = repo.GetSearchResult(fname, lname);

        return PartialView("_SearchResult", personResult);
    }

}

观点：

<div class="page">

    <div class="middle-col-comment-mod">
                <h2>Search Existing Trespassers</h2>

        <div id="search">
            @using (Ajax.BeginForm("_SearchResult", "Search", null, new AjaxOptions { HttpMethod = "Post", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "indexSearchResults" }))
            {
                <div class="editor-field">   
                    <label>First Name:</label>
                    @Html.TextBox("FirstName")

                    <label style = "margin-left: 15px;">Last Name:</label>
                    @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })

                    <input type="submit" name="submit" class="skbutton" value="Search" />

                </div>

            }

        </div>

                    <table id="indexSearchResults" class="data-table">
                        <tr>
                            <th>
                                FirstName
                            </th>
                            <th>
                                LastName
                            </th>
                            <th>
                                Gender
                            </th>
                            <th>
                                City
                            </th>
                            <th>
                                DOB
                            </th>
                            <th>
                                IsStudent
                            </th>
                            <th>
                                Actions
                            </th>
                        </tr>

                    @if (Model.Count() == 0)
                    {
                          <tr>
                            <td colspan=7>
                                There are currently no trespassers in the trespass database.
                            </td>
                          </tr>
                    }
                    else
                    {
                    foreach (var item in Model)
                    {
                        <tr>
                                 <td>
                                @Html.DisplayFor(modelItem => item.FirstName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.LastName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Gender)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.DOB)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.School)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.IsStudent)
                            </td>

                            <td>
                                @Html.ActionLink("Edit", "Edit", new { id = item.PersonId }) |
                                @Html.ActionLink("Details", "Details", new { id = item.PersonId }) |
                                @Html.ActionLink("Delete", "Delete", new { id = item.PersonId })
                            </td>
                        </tr>
                    }
                    }
                    </table>

            </div>
    </div>

部分观点：

@model IEnumerable<TrespassTracker.Models.PersonViewModel>

<table>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Gender
        </th>
        <th>
            Date of Birth
        </th>
        <th>
            Is a Student?
        </th>
        <th>
            Actions
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DOB)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IsStudent)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

从我的研究中我发现通常的嫌疑人是部分中jquery脚本的缺失链接，但我有这个。我检查了我的wed dev工具上的网络选项卡，发现它正在被调用。问题还有什么呢？

Answer 1

脚本不会引起任何问题，我唯一看错的就是表格。你正在尝试用其他返回表的表填充表，使用div代替更新ajax表单（搜索结果）：

<div id="indexSearchResults">
   <table>
     ..........
   </table>
</div>

Answer 2

Try this 

    <div class="page">

        <div class="middle-col-comment-mod">
                    <h2>Search Existing Trespassers</h2>

            <div id="search">
                @using (Ajax.BeginForm("_SearchResult", "Search", null, new AjaxOptions { HttpMethod = "Post", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "indexSearchResults" }))
                {
                    <div class="editor-field">   
                        <label>First Name:</label>
                        @Html.TextBox("FirstName")

                        <label style = "margin-left: 15px;">Last Name:</label>
                        @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })

                        <input type="submit" name="submit" class="skbutton" value="Search" />

                    </div>

                }

            </div>


                        @if (Model.Count() == 0)
                        {

                            <label>There are currently no trespassers in the trespass database. </label>

                        }
                        else
                        {
                        foreach (var item in Model)
                        {
                           @Html.Partial("__SearchResult",item) 
                        }
                </div>
        </div>

Answer 3

如何使用jQuery重新加载结果内容，而不是从表单发布？您可以使用ID命名一个div并将其用作参考 jQuery.load（）（考虑到您正在使用传递给Index操作的ViewModel）：

1.View

 @model YourModel

 <!-- ... -->

 <div id="search">
     @using (Ajax.BeginForm("MainPostAction", "ControllerName", FormMethod.Post, new { id = "yourFormID" })
     {
         <div class="editor-field">   
             <label>First Name:</label>
             @Html.TextBoxFor(model => model.FirstName)

             <label style = "margin-left: 15px;">Last Name:</label>
             @Html.TextBoxFor(model => model.LastName, new { style = "margin-right: 15px;" })

             <input type="button" name="submit" id="searchButton" class="skbutton" value="Search" />

         </div>
         <div id="results"></div>
     }
</div>

使用Javascript：

$(document).ready(function() {

    $('#searchButton').click(function(event) {
        $('#results').load('@Url.Action('_SearchResult', 'Search')', $('#yourFormID').serialize());            
    });
}

你的行动保持不变。怎么回事？

部分视图呈现为完整视图

3 个答案: