获取所选值并将其保留在下拉列表中作为选项

本文关键字:下拉列表 选项 保留 获取 | 更新日期: 2023-09-27 18:36:56

我正在尝试在我的应用程序中显示一个下拉列表,该下拉列表将用作"选项"列表。用户可以选择一个适用于其他地方的选项。只要用户停留在页面上,此数据就会持久存在。

这是下拉列表:

public class ResultsOptions
{
    public string mStartOption { get; set; }
    public List<SelectListItem> mListOptions { get; set; }
    public ResultsOptions()
    {
        mListOptions = new List<SelectListItem>();
    }
}

然后,按以下方式使用此对象:

[HttpGet]
public ActionResult SetResults(string _submitButton, string _option)
{
    mOptions.mListOptions = new List<SelectListItem>();
    foreach (var option in mListOptions)
    {
        if (!String.IsNullOrWhiteSpace(mResultOption))
        {
            if (option == mResultOption)
            {
                SelectListItem item = new SelectListItem
                {
                    Selected = true,
                    Text = option,
                    Value = option
                };
                mOptions.mStartOption = option;
                mOptions.mListOptions.Add(item);
            }
            else
            {
                SelectListItem item = new SelectListItem
                {
                    Text = option,
                    Value = option
                };
                mOptions.mListOptions.Add(item);
            }
        }
        else
        {
            mOptions.mStartOption = "";
            SelectListItem item = new SelectListItem
            {
                Text = option,
                Value = option
            };
            mOptions.mListOptions.Add(item);
        }
    }
    return PartialView(mOptions);
}
[HttpPost]
public JsonResult SetResults(ResultsOptions _options)
{
    if (!String.IsNullOrWhiteSpace(_options.mStartOption))
    {
        mResultOption = _options.mStartOption;
        mOptions.mStartOption = _options.mStartOption;
        var selected = mOptions.mListOptions.First(_x => _x.Value == _options.mStartOption);
        selected.Selected = true;
    }
    return Json(new { Message = "Option saved" } );
}

mListOptions是包含 StandardSimple 的字符串的静态列表。正如您可能已经猜到的那样,我正在做一个局部视图,我在布局中渲染如下:

<div>
    <div class="float-left">
        @Html.ActionLink("Advanced Search", "AdvancedSearch", "Store")
        @Html.ActionLink("Browse Promo Packs", "PackSearch", "Store")
    </div>
    <div class="float-right">
         @{
             Html.RenderAction("SetResults", "Store");
         }
    </div>
    <div class="clear"></div>
</div>

最后是部分视图:

@model MyApp.ViewModels.ResultsOptions
<script type="text/javascript">
        $.post("/Store/SetResults/", $('#options').serialize(),
                function(data) {
                    $('#divMessage').html(data.Message);
                });
        </script>
@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "options"} ))
{
    @Html.DropDownListFor(_model => _model.mStartOption, Model.mListOptions, new { @class = "nullify" })
    <input type="submit" name="_submitButton" value="Set"/>
    <div id="divMessage">
    </div>
}

因此,基本上,我希望该下拉列表始终显示为可选列表。所选值将在以后使用,并且现在对显示几乎没有影响。

但是我有一个问题,当我单击"设置"按钮时,我的视图呈现部分视图,其余部分被刷新。不是我想做的。谁能帮我?

编辑

我一直在按照建议处理一些 Json 结果,但我有同样的问题:获得的结果消息是之后显示的唯一内容。

获取所选值并将其保留在下拉列表中作为选项

这是因为您在POST方法中返回了一个PartialView。如果你想保留整个视图,只更新一部分html,你需要使用jQuery。

编辑:

您可以从POST操作方法返回一个JsonResult,该方法提供成功消息或其他内容:

return Json(new { Message = "Option saved" });

你必须使用jquery的ajax帖子提交你的表单。首先为提交按钮分配一个 ID

视图

<input type="submit" id="submit-form" name="_submitButton" value="Set"/>

然后通过发布表单来处理脚本中的 Click 事件。

脚本

 $("#submit-form").click(function(ev) {
      ev.preventDefault();
      $.post("/Controller/SetResults/", $("#IdOfYourForm").serialize(),
           function(data) {
           $("#divMessage").html(data.Message);
      });
    });