Javascript 使用jQuery和MVC进行客户机-服务器搜索

我有一个带有两个下拉列表的视图，用于搜索描述。结果列表现在显示在另一个视图中。我希望在相同的搜索视图中生成结果。我假设可以使用一些

AJAX

或

Jquery

来解决这个问题，但不知道如何解决。那么，在这种情况下，如何在同一视图页面中显示搜索结果

此外，我对

搜索控制器

有些怀疑。我希望至少选择一个下拉列表（两个下拉列表都不允许为空）。如何验证该部分

查看

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

@使用（Html.BeginForm（“搜索”、“工作”、FormMethod.Get））
{
搜寻
@LabelFor（model=>model.JobTypeID，“作业类型”）
@Html.DropDownList（“作业类型ID”，“选择作业类型”）
@LabelFor（model=>model.JobPriorityID，“作业优先级”）
@Html.DropDownList（“JobPriorityID”，“选择作业优先级”）


}

控制器：

 [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);
        }

[HttpGet]
公共操作结果搜索（int？jobtypeid，int？jobpriorityid）
{
var vjobscriptions=新列表（）；
if（jobtypeid！=null&&jobpriorityid！=null）
{
vJobDescriptions=（来自db.JobDescriptions中的描述
其中（description.JobTypeID==JobTypeID&&description.JobPriorityID==JobPriorityID）
选择description）.ToList（）；
}
else if（jobtypeid==null&&jobpriorityid！=null）
{
vJobDescriptions=（来自db.JobDescriptions中的描述
其中（description.JobPriorityID==JobPriorityID）
选择description）.ToList（）；
}
else if（jobtypeid！=null&&jobpriorityid==null）
{
vJobDescriptions=（来自db.JobDescriptions中的描述
其中（description.JobTypeID==JobTypeID）
选择description）.ToList（）；
}
其他的
{
vJobDescriptions=（来自db.JobDescriptions中的描述
选择description）.ToList（）；
}
返回视图（vJobDescriptions）；
}

一种可能是使用

Ajax.BeginForm

而不是普通表单（不要忘记在页面中包含

jquery.js

和

jquery.js

脚本）：

然后，您可以为我们在

UpdateTargetId

中指定的结果设置一个占位符：

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

当然，相应的

\u Result.cshtml

部分：

@model IEnumerable<MyViewModel>
...

@model IEnumerable
...

此外，我对搜索控制器有些怀疑。我至少要一个 要选择的下拉列表（不应同时选择两个下拉列表 允许为空）。如何验证该部分

我建议您，但如果您不想使用第三方库，可以编写一个自定义验证属性来执行此验证，然后装饰绑定到下拉列表的两个视图模型属性之一

不幸的是，如果您决定采用AJAX方式，您必须能够显示来自服务器的验证错误，以防出现错误。因此，必须将整个形式放在部分形式中

您可以使用的另一种方法是使用不带AJAX的标准表单重新加载整个页面。结果将作为集合属性作为初始视图模型的一部分，该集合属性最初为null，执行搜索后，您将使用结果填充它。然后，在视图中，您将测试属性是否不为null，以及是否不包括将负责呈现结果的分部：

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

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

@使用（Html.BeginForm（“搜索”、“工作”、FormMethod.Get））
{
...
}
@如果（Model.Results！=null）
{
@Html.Partial（“_Results”，Model.Results）
}
一种基本方法是将搜索结果的标记放在局部视图中，然后从
搜索
操作方法返回该标记。这需要您将搜索方法的最后一行更改为

返回部分（vjobscriptions）

在客户端脚本中，您可以按照以下方式执行操作：

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
}

您的搜索参数模型将遵循以下原则：

[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%正确，但我希望它的要点能被理解

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

[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;
     }
}