0

説明を検索するために使用される2つのドロップダウンリストを持つビューがあります。結果のリストは、今のところ別のビューに表示されます。同じ検索ビューで結果を生成したいと考えています。これを整理するためにいくつかAJAXまたはJquery使用できると思いますが、方法がわかりません。では、この場合、検索結果を同じビュー ページに表示するにはどうすればよいでしょうか。

さらに、私はいくつかの疑問を持っていSearch controllerます。少なくとも 1 つのドロップダウン リストを選択する必要があります (両方のドロップダウン リストを null にすることはできません)。その部分を検証するにはどうすればよいですか？

意見

@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);
        }
4

2 に答える 2

0

これに対する基本的なアプローチは、検索結果のマークアップを部分ビューに配置し、それをSearchActionMethod から返すことです。これには、検索方法の最後の行を次のように変更する必要があります。

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
}

検索パラメーター モデルは次の行に沿って配置されます。

[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% 正しいとは限りませんが、その要点が理解できることを願っています。

于 2012-07-12T16:56:07.523 に答える
0

1 つの可能性は、通常の形式の代わりにを使用することです (ページにスクリプトとスクリプトをAjax.BeginForm含めることを忘れないでください)。jquery.jsjquery.unobtrusive-ajax.js

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

次に、で指定した結果のプレースホルダーを作成できますUpdateTargetId。

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

あとは、Search コントローラー アクションで PartialView を返して、検索結果を含むモデルに渡すだけです。

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

そしてもちろん、対応する_Result.cshtmlパーシャル:

@model IEnumerable<MyViewModel>
...

さらに、検索コントローラーに疑問があります。少なくとも 1 つのドロップダウン リストを選択する必要があります (両方のドロップダウン リストを null にすることはできません)。その部分を検証するにはどうすればよいですか？

FluentValidation.NETをお勧めしますが、サード パーティのライブラリを使用したくない場合は、この検証を実行するカスタム検証属性を作成し、ドロップダウン リストにバインドされている 2 つのビュー モデル プロパティの 1 つを装飾することができます。 .

残念ながら、AJAX ルートに進むことにした場合は、何か問題があった場合に備えて、サーバーからの検証エラーを表示できる必要があります。したがって、部分内に配置する必要があるのはフォーム全体です。

もう 1 つの方法として、AJAX を使用せずに標準フォームを使用してページ全体を再読み込みする方法があります。結果は、最初は null であるコレクション プロパティとして初期ビュー モデルの一部になり、検索の実行後に結果が入力されます。次に、ビュー内で、プロパティが null でないかどうか、含まれていない場合は、結果のレンダリングを処理する Partial をテストします。

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

<div id="results">
    @if (Model.Results != null)
    {
        @Html.Partial("_Results", Model.Results)
    }
</div>
于 2012-07-12T16:49:18.257 に答える