使用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进行客户端服务器搜索

回答

相关问题