8

多くのフィールドを持つプレーンな ASP.NET MVC フォームがあります。最初のフィールドは最も重要で、ドロップダウン リストです。これが company フィールドで、2 つの値 "Coca Cola" と "Pepsi" が含まれているとします。

会社フィールドは次のようになります。

    <div class="editor-label">
       @Html.LabelFor(Function(model) model.Company)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(Function(model) model.Company, TryCast(ViewData("Companies"), SelectList), New With {Key .style = "blah blah;"})
        @Html.ValidationMessageFor(Function(model) model.Company)
    </div>

この選択は積極的に行われ、単に「コカ・コーラ」がアルファベット順で最初にあるという理由だけでそのままにしておくことが重要なので、まずフィールドを空にする必要があります (検証データ注釈は、ユーザーに何かを入力するように強制します)。

これは、次のように Javascript を使用して簡単に実行できます。

        function InitialiseForm() {
            $('#Company').prop('selectedIndex', -1);
        }

        window.onload = InitialiseForm;

ただし、フォームが完全に空白ではなく、代わりに会社フィールドが次のようにコントローラーで初期化される場合がいくつかあります。

    modelObject.Company = "Coca Cola"

そのような場合、もちろん Javascript がこれを実行して消去することは望ましくありません。

そのような場合の通常の解決策は何ですか？

4

5 に答える 5

3

私の推測は正しかった:初期値が null の場合DropDownListFor、属性は生成されない。selected

空の会社では、次の html が生成されます。

<select id="Company" name="Company">
   <option value="1">Coca-Cola</option>
   <option value="2">Pepsi</option>
</select>

選択した会社の HTML コードは異なります。

<select id="Company" name="Company">
   <option selected="selected" value="1">Coca-Cola</option>
   <option value="2">Pepsi</option>
</select>

したがって、次の JavaScript コードを使用すると動作します。

$(function () {
    if ($("#Company").find("option[selected]").length == 0) {
        $("#Company").prop('selectedIndex', -1);
    }
});

また、jquery のバージョンが 1.9.0 より前の場合、option[selected]式が正しく機能しない場合があります。バグは 1.9.0 で修正されましたが、以前のバージョンでは、'filter'、'children'、'is' などの関数は正しく機能しませんでしたが、'find' と 'has' は正しい結果を返しました。

于 2013-10-26T20:11:22.960 に答える
1 
@{
    var listItems = new SelectList(new List<SelectListItem>
                {
                    new SelectListItem { Value = "1", Text = "drink 1" },
                    new SelectListItem { Value = "2", Text = "drink 2" },
                    new SelectListItem { Value = "3", Text = "drink 3" }
                }, "Value", "Text");

    var selectedDrink = "";
}

@Html.DropDownListFor(x => selectedDrink, listItems, "--select drink--")

「--select drink--」 選択した項目が設定されていない場合に表示されます。

(コードは簡潔にするために View でのみ記述されています)

于 2013-10-26T22:10:13.290 に答える
1

数日前に同様の問題に直面し、ある時点で選択されていない限り、ドロップダウンを最初のインデックスにデフォルト設定したいと考えていました。解決策としてセッション変数を使用しました...次のようなものがうまくいくかもしれません：

var CurrentCompanyID = 1;
var gCompanyID = '@(Convert.ToInt32(Session["CompanyID"]))';

if (gCompanyID == null || gCompanyID == '' || gCompanyID == 0) {
    CurrentCompanyID = 1;
}
else {
    CurrentCompanyID = gCompanyID;
    $("#CompanyDropDown").val(CurrentCompanyID);
}

$("#CompanyDropDown").change(function () {
    CurrentCompanyID = $(this).val();

    $.ajax({
        url: "Controller/ChangeCompany",
        cache: false,
        data: { _compID: CurrentCompanyID },
        success: function (result) {
            console.log(result);
            $("#CompanyForm").submit();
        }
    });
});

// Where:

public JsonResult ChangeCompany(int _compID)
{
    Session["CompanyID"] = _compID;
    return Json(Session["CompanyID"], JsonRequestBehavior.AllowGet);
}

...そして、現在のコントローラーの Index() アクションの場合:

var _compID = Convert.ToInt32(Session["CompanyID"]);
var dataContext = new SERVERDataContext();

if (Session["CompanyID"] == null)
{
    //Get Companies

    return View(vm);
}
else
{
    //Get Companies where Company.ID == _compID

    return View(vm);
}

したがって、基本的に、ドロップダウンの現在の値をセッション変数の値に設定しています。ドロップダウン値を変更したい場合は、セッション変数に新しい値を割り当てるだけです! セッション var が null または価値がない場合、ドロップダウンを目的のインデックスに設定します。

お役に立てれば。

于 2013-10-16T13:22:53.030 に答える
1

これを行うための1つのクリーンな方法を次に示します。

オプションのラベルをリストに追加します。モデルの会社の値が空の場合は選択されます。それ以外の場合は、現在の値が事前に選択されて表示されます (javaScript 選択コードは必要ありません)。また、ユーザーが選択できない値を選択しない場合も同様です。検証に合格します:

@Html.DropDownListFor(Function(model) model.Company, TryCast(ViewData("Companies"), SelectList), "Select a company", New With {Key .style = "blah blah;"})
于 2013-10-22T13:23:38.310 に答える
1

オプション1：

コントローラーのアクションメソッドにロジックを入れることができます。

例:コントローラー

public ActionResult LoadForm()
{
    var companies = new List<Company>();
    var isSpecialCase = false;

    if (default)
    {
        companies.Add(new Company {
            CompanyId = 1,
            CompanyName = "Coca Cola"
        });

        companies.Add(new Company
        {
            CompanyId = 2,
            CompanyName = "Pepsi"
        });
    }
    else if (yourSpecialCase)
    {
        isSpecialCase = true;

        companies.Add(new Company {
            CompanyId = 1,
            CompanyName = "Coca Cola"
        });
    }
    else
    {
         //define any other implementations...
    }

    ViewBag.IsSpecialCase = isSpecialCase;
    ViewBag.Companies = companies;

    return View();
}

カンパニークラス

public class Company {
    public int CompanyId { get; set; }
    public string CompanyName { get; set; }
}

フォーム 内 (特殊なケースの場合、オプションのラベルは表示されないことに注意してください)

@if (ViewBag.IsSpecialCase)
{
    @Html.DropDownListFor(model => model.Data, new SelectList(ViewBag.Companies as List<Company>, "CompanyName", "CompanyId"))
}
else
{
    @Html.DropDownListFor(model => model.Data, new SelectList(ViewBag.Companies as List<Company>, "CompanyName", "CompanyId"), "Select a company...")
}

オプション 2:

カスタム ドロップダウン リストを作成する (カスタム HTML ヘルパー)

以下のリンクを参照してください。 リンク 1 リンク 2

于 2013-10-29T06:29:34.030 に答える