MVC 3 使用修改后的查询字符串值重新加载当前页面

Question

背景：

我有一个 MVC 布局（主）视图，它使用 @Html.RenderAction 在左侧导航面板中显示下拉菜单。此下拉菜单将显示在网站的所有页面上。 下拉列表包含在表单元素中，并在下拉列表更改时发布表单。

问题：

现在，一旦表单发布，我需要重新加载当前页面的内容（无论用户当前在哪个页面...），并在查询字符串中附加下拉列表的值。这意味着替换先前选择的查询字符串中可能已经存在的值。

例子：

1. 用户导航到网站的主页：

网址：/Home/?dropdownvalue=blue

此时下拉菜单显示“蓝色”为选中状态。用户将下拉列表中的值更改为“红色”。我需要使用以下网址重新加载页面 -

/Home/?dropdownvalue=red

1. 用户移动到站点中的另一个页面：

网址：/CustomerFavorite/?dropdown=red

将下拉菜单中的值从“红色”更改为“绿色”。

'CustomerFavourite' 页面应在查询字符串中使用'Green' 重新加载。

对于这篇冗长的帖子，我深表歉意。但是，考虑提供一些额外的信息来澄清问题。

谢谢。

Answer 1

感谢 Darin 为查询字符串的 javascript 操作提供链接。但是，我想要一个服务器端解决方案，所以这就是我的实现方式 -

public ActionResult _ColorSelection(ColorModel model)
{
    string selectedColor = model.Color.Value;

    // Modify Querystring params...

    NameValueCollection querystring = 
            HttpUtility.ParseQueryString(Request.UrlReferrer.Query); // Parse QS

    // If Querystring contains the 'color' param, then set it to selected value
    if (!string.IsNullOrEmpty(querystring["color"]))
    {
        querystring["color"] = selectedColor;
    }
    else  // Add color key to querystring
    {
        querystring.Add("color", selectedColor);
    }

    // Create new url
    string url = Request.UrlReferrer.AbsolutePath 
                         + "?" + querystring.ToString();

    return Redirect(url); // redirect

}

Answer 2

您可以尝试使用包含下拉列表的表单的 GET 方法：

@using (Html.BeginForm(null, null, FormMethod.Get))
{
    @Html.Action("SomeActionThatRendersTheDropDown", "SomeController")
}

或者整个表单都包裹在动作中：

@Html.Action("SomeAction", "SomeController")

然后在javascript中订阅下拉的change事件并触发表单的提交：

$(function() {
    $('#DropDownId').change(function() {
        $(this).closest('form').submit();
    });
});

因为您使用了 GET 请求，这将自动重新加载当前页面，发送查询字符串中的下拉列表的值。

Answer 3

如果您使用 jQuery，您可以创建一个函数，将所选值发布到您的列表中。

$(document).ready(function () {
  $("#ListId").change(function () {
    $.ajax({
    url: "CustomerFavorite/Edit",
    type: "POST",
    data: "colour=" + $("#ListId").val(),
    success: function (result) {
        //Code to update your page
        }
    },
    error: function () {

    }
  }