获取所选值并将其保留在下拉列表中作为选项
本文关键字:下拉列表 选项 保留 获取 | 更新日期: 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
是包含 Standard
和 Simple
的字符串的静态列表。正如您可能已经猜到的那样,我正在做一个局部视图,我在布局中渲染如下:
<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);
});
});