为什么从 MVC 中的 ajax.post 调用时我的视图不呈现

Question

所以，我用 ViewResult 构建了一个视图，该视图有一个用于输入搜索字符串的文本框和一个用于提交的按钮。它工作得很好，它返回我搜索的项目并显示在屏幕上。现在，我的要求是将该文本框移动到主布局（如下）并从那里提交。但是，当我按下提交并调用 ajax 帖子时，调试会显示搜索 viewResult 的搜索字符串，它甚至会到达关联的视图，但视图不会呈现。有任何想法吗？

这里是搜索框

<div style="float:right;">
                <input type="text" id="searchString" name="searchString" />
                <a href="#" id="search" ><img src="~/Images/Custom/searchIcon.jpg" style="width:25px; height:25px;"/></a>
            </div>

这是带有 ajax 帖子的 javascript

<script>
    $(document).ready(function () {

        $("#search").click(function () {
            var searchString = $("#searchString").val();
            var datastring = { "searchString": searchString };

            $.ajax({

                url: "/Home/Search/",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(datastring),
                datatype: 'json',
                success: function () {
                    console.log('success!!');
                }

            });
        });
    });
</script>

这是我的视图结果：

   public ViewResult Search(string searchString, int? pageNumber)
    {
      //  var searchString = fc["searchString"];
        var results = new ArrayList();
        var mylist = new List<SearchResult>();
        var model = new SearchViewModel();
        var host = "/CommunityWildlifeHabitat";
        if (System.Web.HttpContext.Current.Request.IsLocal)
            host = "";


            // Search Communities
            var search = from s in db.Communities
                         where s.ComunityName.Contains(searchString) || s.Description.Contains(searchString)
                         select s;

            // Search Resource Center
            var docs = from d in db.ResourceCenters
                       where d.Title.Contains(searchString) || d.Description.Contains(searchString)
                       select d;

        // Set up Arraylist with type Community
        foreach(var c in search)
        {
            var community = new SearchResult();
            community.type = "community";
            community.CommunityId = c.CommunityId;
            community.CommunityName = c.ComunityName;
            community.Description = c.Description;
            community.CommunityType = c.CommunityType1.TypeName;
            community.CommunityCity = c.CommunityCity;
            community.CommunityState = c.CommunityState;
            community.CommunityZip = c.CommunityZip;
            community.Population = c.Population;
            mylist.Add(community);
        }

        // Set up ArrayList with type ResourceCenter
        foreach (var d in docs)
        {
            var document = new SearchResult();
            document.type = "document";
            document.Title = d.Title;
            document.Document_Description = d.Description;
            document.FilePath = d.FilePath;
            document.Date = Convert.ToDateTime(d.Date);
            document.UpLoadedBy = d.UpLoadedBy;
            mylist.Add(document);
        }

        model.results = mylist;
        ViewBag.results = model.results;
        ViewBag.searchString = searchString;
        ViewBag.Host = host;

        return View(mylist.ToPagedList(pageNumber ?? 1, 10));
    }

最后，这是我的观点：

<h2>Search</h2>

@using (Html.BeginForm("Search", "Home", FormMethod.Get, new { @class = "form-horizontal", role = "form" }))
{
    @Html.TextBox("searchString", ViewBag.searchString as string, new { @class = "form-control", required = "required"})
    <input type="submit" class="btn btn-default" value="Search" />
    <hr />



    if (@Model.Count != 0)
    {
        <h3>The following results were found for @ViewBag.searchString</h3>


        foreach (var search in @Model)
        {

            if (@search.type == "community")
            {
                <div class="resource-element">
                    <a href="@ViewBag.Host/Communities/CommunityPage/@search.CommunityId">
                        <span class="resource-type pull-right">Community</span>
                    </a>
                    <a href="@ViewBag.Host/Communities/CommunityPage/@search.CommunityId"><h3>@search.CommunityName</h3></a>
                    <p>@search.Description</p>
                    <span class="">Type : @search.CommunityType</span><br />
                    <span class="">@search.CommunityCity, @search.CommunityState @search.CommunityZip</span><br />
                    <span class="">Population: @search.Population</span>
                    <br>
                </div>
            }
            else
            {


                <div class="resource-element">
                    <a href="@ViewBag.Host@search.FilePath">
                        <span class="resource-type pull-right">Document</span>
                    </a>
                    <a href="@ViewBag.Host@search.FilePath"><h3>@search.Title</h3></a>
                    <p>@search.Document_Description</p>
                    <span class="">@search.Date</span>
                    <br>
                    <span class="">@search.UpLoadedBy</span>
                    <br>
                </div>
            }

        }

        @Html.PagedListPager(Model, pageNumber => Url.Action("Search", "Home", new { searchString = @ViewBag.searchString, pageNumber }),
            new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation = true })

    }
    else
    {
        if (@ViewBag.searchString != null)
        {
            <div class="resource-element">
                <a href="#">
                    <span class="resource-type pull-right"></span>
                </a>
                <h3>No Results Found</h3>
            </div>
        }

    }


}

Answer 1

如果您只是使用以下内容更改表单助手

@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{

并删除您的 jquery，它应该将您的表单正确发布到服务器，并自动重新加载页面。

在您的页面内运行异步调用没有特殊需要。