使用jQuery和MVC進行客戶端服務器搜索

我有一個視圖，其中有兩個下拉列表用於搜索描述。現在，結果列表將顯示在另一個視圖中。我希望在相同的搜索視圖中生成結果。我假設一些AJAX或Jquery可以用來解決這個問題，但不知道如何。那麼，在這種情況下，搜索結果如何顯示在同一個視圖頁面中呢？使用jQuery和MVC進行客戶端服務器搜索

此外，我有一些疑問Search controller。我想至少選擇一個下拉列表（兩個下拉列表不應該被允許爲空）。我如何驗證該部分？

查看

@using (Html.BeginForm("Search","Work",FormMethod.Get)) 
{ 

    <fieldset> 
     <legend>Search</legend> 
    <div class="editor-label"> 
      @Html.LabelFor(model => model.JobTypeID, "Job Type") 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("JobTypeID", "Select Job Type") 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.JobPriorityID, "Job Priority") 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("JobPriorityID", "Select Job Priority") 
     </div> 
     <p> 
      <input type="submit" value="Search" /> 
     </p> 
     </fieldset> 
}

控制器：

[HttpGet] 
     public ActionResult Search(int? jobtypeid, int? jobpriorityid) 
     { 
      var vJobDescriptions = new List<JobDescription>(); 

      if (jobtypeid != null && jobpriorityid != null) 
      { 
       vJobDescriptions = (from description in db.JobDescriptions 
             where (description.JobTypeID == jobtypeid && description.JobPriorityID == jobpriorityid) 
             select description).ToList(); 
      } 
      else if (jobtypeid == null && jobpriorityid != null) 
      { 
       vJobDescriptions = (from description in db.JobDescriptions 
             where (description.JobPriorityID == jobpriorityid) 
             select description).ToList(); 

      } 
      else if (jobtypeid != null && jobpriorityid == null) 
      { 
       vJobDescriptions = (from description in db.JobDescriptions 
            where (description.JobTypeID == jobtypeid) 
            select description).ToList(); 
      } 
      else 
      { 
       vJobDescriptions = (from description in db.JobDescriptions 
            select description).ToList(); 
      } 


      return View(vJobDescriptions); 
     }

來源

2012-07-12 nebula

一種可能性是使用Ajax.BeginForm，而不是一個正常的形式（不要忘了包括jquery.js和jquery.unobtrusive-ajax.js腳本您頁）：

@using (Ajax.BeginForm("Search", "Work", new AjaxOptions { UpdateTargetId = "results" }))

，那麼你可能對我們在UpdateTargetId指定的結果的佔位符：

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

現在，所有剩下的就是讓你的搜索控制器動作返回PartialView，並通過它包含的結果模型的搜索：

public ActionResult Search(int? jobtypeid, int? jobpriorityid) 
{ 
    var model = ... 
    return PartialView("_Result", model); 
}

當然和相應的局部_Result.cshtml：

@model IEnumerable<MyViewModel> 
...

此外，我有一些懷疑在搜索控制器。我想至少選擇一個下拉列表（兩個下拉列表不應該是允許爲空）。我如何驗證該部分？

我建議你FluentValidation.NET，但如果你不希望使用第三方庫，你可以寫，將執行此驗證，然後裝飾綁定到2視圖模型屬性中的一個自定義驗證屬性您下拉列表與它。

不幸的是，如果您決定使用AJAX路線，您將必須能夠顯示來自服務器的驗證錯誤，以防出現問題。所以這是整個形式必須放在部分內部。

您可以使用的另一種方法是使用不帶AJAX的標準表單重新加載整個頁面。結果將作爲初始視圖模型的一部分，作爲一個集合屬性，它最初將爲null，在執行搜索之後，將用結果填充它。那麼該視圖裏面，你會測試，如果屬性不爲null，如果它不包括部分，將採取渲染結果的護理：

@using (Html.BeginForm("Search", "Work", FormMethod.Get)) 
{ 
    ... 
} 

<div id="results"> 
    @if (Model.Results != null) 
    { 
     @Html.Partial("_Results", Model.Results) 
    } 
</div>

來源

2012-07-12 16:49:18

這種基本的方法是放置了標記將搜索結果轉換爲局部視圖，然後從您的ActionMethod中返回該搜索結果。這將需要將您的搜索方法的最後一行改爲

return Partial(vJobDescriptions)

在您的客戶端腳本，你會沿着這行做一些事情：

var data = $("form").serialize(); 
$.get("/Search", data) 
.complete(function(results) { 
    $("form").replace(results) };

至於您正在尋找的驗證方面，我會考慮將您的讀取模型從搜索命令參數中分離出來。

public ActionResult Search(SearchModel search) 
{ 
    if (!ModelState.IsValid) // return view w/ invalid model 
}

您的搜索PARAMS模式將是沿着這些路線：

[CustomValidation(typeof(SearchModel), 
        "OneNotNullValidator", 
        "One option must be selected"] 
public class SearchModel 
{ 

    public int? JobTypeID { get; set;} 
    public int? JobPriorityID { get; set;} 

    public bool OneNotNullValidator() 
    { 
      return JobTypeID.HasValue || JobPriorityID.HasValue; 
    } 
}

的CustomValidation屬性我已經應用於類可能不會對特定的語法和名稱正確率100％（S），但我希望它的主旨能夠貫穿始終。

來源

2012-07-12 16:56:07

使用jQuery和MVC進行客戶端服務器搜索

回答

相關問題