回发后如何保持下拉列表选择的值？

Question

我是 mvc 开发的新手，我有 4 个下拉框，每个下拉框都会触发下一个 dpdown 对象来绑定值。

在选择所有下拉列表后我绑定 gridview(codeplex mvc.grid) 并单击我的按钮。

我的问题是：

回发后如何保存下拉列表选择的值？

感谢您的帮助

查看：

@using (Html.BeginForm("Checklist", "Home"))
{`
<div>Dp1</div>
@Html.DropDownList("dpCompany", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })

<div>Dp2</div>
@Html.DropDownList("dpBank", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })

<div>Dp3</div>
@Html.DropDownList("dpStartCheckList", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })

<div>>Dp4</div>
@Html.DropDownList("dpEndCheckList", ViewBag.CompanyList as List<SelectListItem>, new { @class = "btn btn-default dropdown-toggle" })`

  <input type="submit" name="CheckList" value="DO" class="btn btn-default" />

}

  @Html.Grid(Model).Columns(columns =>
  {
     columns.Add(c => c.customer_reference).Titled("Çek No").SetWidth(30);
     columns.Add(c => c.unvan).Titled("Ünvan").SetWidth(30);
     columns.Add(c => c.vergi_no).Titled("Vergi No").SetWidth(30);
     columns.Add(c => c.islem_tarihi).Titled("İşlem Tarihi").SetWidth(30).Format("{0:dd/MM/yyyy}");
     columns.Add(c => c.currency).Titled("Para Birimi").SetWidth(30);
     columns.Add(c => c.full_curr_amount).Titled("Tutar").SetWidth(30).Format("{0:C}").Css("align-right");
  }).WithPaging(10)

脚本

$(function () {


                // Company
                $('#dpCompany').on('change', function () {
                    var stateDropdown = $('#dpBank');
                    //disable state drop down
                    stateDropdown.prop('disabled', 'disabled');
                    //clear drop down of old states
                    stateDropdown.empty();

                    //retrieve selected country
                    var company = $(this).val();
                    if (company.length > 0) {
                        // retrieve data using a Url.Action() to construct url
                        $.getJSON('@Url.Action("GetBankList")', {
                        company: company
                    })
.done(function (data) {
    //re-enable state drop down
    stateDropdown.removeAttr('disabled');
    //for each returned state
    $.each(data, function (i, state) {
        var values = state.split('|');
        //Create new option
        var option = $('<option value="' + values[0] + '" />').html(values[1]);
        //append state states drop down
        stateDropdown.append(option);
    });

    //if count 1 bind
    if ($("#dpBank option").length == 1) {
        $("#dpBank").trigger("change");
    }
})
.fail(function (jqxhr, textStatus, error) {
    var err = textStatus + ", " + error;
    console.log("Request Failed: " + err);
});} });
                //
                $('#dpBank').on('change', function () {
                    var stateDropdown = $('#dpCheckStart');
                    //disable state drop down
                    stateDropdown.prop('disabled', 'disabled');
                    //clear drop down of old states
                    stateDropdown.empty();

                    //retrieve selected country
                    var bank = $(this).val();

                    var company = $("#dpCompany").val();
                    if (company.length > 0) {
                        // retrieve data using a Url.Action() to construct url
                        $.getJSON('@Url.Action("GetCheckList")', {
                        companyCode: company,
                        bankCode: bank
                    })
.done(function (data) {
    //re-enable state drop down
    stateDropdown.removeAttr('disabled');
    //for each returned state
    $.each(data, function (i, state) {
        var values = state.split('|');
        //Create new option
        var option = $('<option value="' + values[0] + '" />').html(values[1]);
        //append state states drop down
        stateDropdown.append(option);
    });

    //if count 1 bind
    if ($("#dpBank option").length == 1) {
        $("#dpCheckStart").trigger("change");
    }


})
.fail(function (jqxhr, textStatus, error) {
    var err = textStatus + ", " + error;
    console.log("Request Failed: " + err);
}) } });


                $('#dpCheckStart').on('change', function () {
                    var stateDropdown = $('#dpCheckEnd');
                    //disable state drop down
                    stateDropdown.prop('disabled', 'disabled');
                    //clear drop down of old states
                    stateDropdown.empty();

                    //retrieve selected country
                    var startOver = $(this).val();
                    if (startOver.length > 0) {
                        // retrieve data using a Url.Action() to construct url
                        $.getJSON('@Url.Action("GetListOver")', {
                        startOver: startOver
                    })
.done(function (data) {
    //re-enable state drop down
    stateDropdown.removeAttr('disabled');
    //for each returned state
    $.each(data, function (i, state) {
        var values = state.split('|');
        //Create new option
        var option = $('<option value="' + values[0] + '" />').html(values[1]);
        //append state states drop down
        stateDropdown.append(option);
    })

})
.fail(function (jqxhr, textStatus, error) {
    var err = textStatus + ", " + error;
    console.log("Request Failed: " + err);
})}});

控制器

public ActionResult Index()
{

    ViewBag.Message = "";

    LoadDefaults();

    ViewBag.Loaded = false;
    return View();

}

private void LoadDefaults()
{
    ViewBag.BaseList = new List<SelectListItem>();
    ViewBag.CompanyList = new List<SelectListItem>();
    ViewBag.BankList = new List<SelectListItem>();
    ViewBag.AmountTotalTable = new Dictionary<string, string>();
}

[Authorize]
public ActionResult CheckList(FormCollection form)
{
    ViewBag.Message = "";

    ViewBag.StartSelectedItem = StartCheckNo = form["dpStartCheckList"];
    ViewBag.EndSelectedItem = EndCheckNo = form["dpEndCheckList"];


    F8BaseDB.DbSchema.F8BaseSchema.CheckList chk = new F8BaseDB.DbSchema.F8BaseSchema.CheckList();

    LoadDefaults();


    return View("Index", chk.GetAll(ViewBag.StartSelectedItem, ViewBag.EndSelectedItem));
}

Answer 1

你需要使用 Html.DropdwonlistFor

@Html.DropDownListFor(m => m.ClientID, new SelectList(Model.Clients, "ID", "ClientName"), new { @class = "form-control" })

其中 m.ClientID 是选定的值

Answer 2

好的，实现这一点的方法很少。如果可能，我强烈建议您强烈键入您的视图。这将使您能够轻松访问已发布的表单数据，而不是通过FormCollection。这也将使您能够将Model 返回到视图，该视图将自动选择公司下拉列表（我假设默认情况下会填充所有公司，并且不会通过 ajax 来获取它们）。

所以，回答你的问题。就像您获得 dpStartCheckList 和 dpEndCheckList 的值一样，将其他两个下拉列表的值也存储在 ViewBag 中。现在在您看来，请执行以下操作。将 viewbags 中的值保存到 js 变量中

var selectedCompany = '@ViewBag.SelectedCompany'
var selectedBank = '@ViewBag.SelectedBank'
var startSelectedItem = '@ViewBag.StartSelectedItem'

等等。

现在，在每个相应的 ajax done 回调中，使用 $.each 将项目添加到下拉列表后，您将相应的值设置为下拉列表。例如，如果您选择银行下拉菜单。在$.each之后

$("#dpBank").val(selectedBank);

更新 观看这个 youtube 视频，它讨论了强类型视图 https://www.youtube.com/watch?v=xRinkoUpEEM

更新 2 如果你使用这种方法，请记住设置后将js变量设置为''或undefined。

$("#dpBank").val(selectedBank);
selectedBank = '';

否则，如果选项中存在该值，它将在以后的 ajax 调用中从下拉列表中选择相同的值