2017-04-11 37 views
1

時,我的視圖沒有渲染,因此,我使用ViewResult構建了一個視圖,View中有一個文本框用於輸入搜索字符串和提交按鈕。它效果很好,它返回我搜索到的項目並顯示在屏幕上。現在,我的要求是將該文本框移動到家庭佈局(下圖)並從那裏提交。但是,當我按提交併調用ajax文章時,調試顯示搜索字符串搜索viewResult,它甚至到達視圖關聯,但視圖不呈現。有任何想法嗎?爲什麼當我從MVC中的ajax.post調用MVC

這裏是搜索框

<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> 

這裏與阿賈克斯後的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> 

這裏是我的ViewResult:

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="@[email protected]"> 
         <span class="resource-type pull-right">Document</span> 
        </a> 
        <a href="@[email protected]"><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> 
     } 

    } 


} 
+0

我想你必須手動觸發渲染。所以嘗試更換'成功:功能(){console.log('成功!!'); }'用可以渲染視圖的js函數。如果IDE中不存在此類函數,則必須手動將其插入到DOM中。 – Shilly

+0

是的,我已經考慮過了。謝謝 –

+0

如果您將此標記爲C#mvc或ASP mvc(我猜這是c#,但不是100%確定),您也可以從中獲得答案。 – Shilly

回答

1

如果你只是用下面的

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

改變你的形式助手和刪除您的jQuery,應該正確地發佈表單到服務器,並自動重新加載頁面。

在頁面內部運行異步調用沒有特別需要。

+0

這個作品很棒!非常感謝 –

相關問題