Question

我正在尝试创建一个 Bootstrap下拉按钮 。列表应该有链接，按下时，设置会话状态变量。我想要发生的唯一页面更新是再次呈现 下拉列表 ，因此所选项目显示为标题。

通过调用 ， 下拉列表 本身将呈现为 部分视图 儿童行动

public PartialViewResult SessionStateVariableSelector()
{
    string stateVariable = Session["theStateVariable"] as string;

    StateVariableCollectionViewModel model = GetThisFromSomewhere();

    model.SelectedStateVariable = stateVariable ?? string.Empty;

    return PartialView("_sessionStateVariableSelector", model);
}

我最初有两个想法如何做到这一点。

A）Ajax.Beginform围绕 下拉列表 发布到同一操作。这样我就可以UpdateTargetId使用新的选定变量更新 下拉列表 。

我根本不知道如何使用 Bootstrap 主题来AutoPostBack。我希望获得与在 下拉列表 列表中使用<a>时相同的行为。

我可以从AJAX调用中截取<a> href 作为回发吗？< / p>

@using (Ajax.BeginForm("SetFund", new AjaxOptions { UpdateTargetId = "theSelector", HttpMethod = "Post" }))
{
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group pull-right" id="theSelector">
                <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                    @if(string.IsNullOrEmpty( Model.SelectedStateVariable))
                    {
                        Please select....
                    }
                    else
                    {
                        <img src="@Url.Action("Image", "Resource", new { id = Model.SelectedStateVariable })" alt="image" class="img-responsive" />
                        <span class="caret"></span>
                    }
                </button>
                <ul class="dropdown-menu" role="menu">
                    @foreach (var item in Model)
                    {
                        <li>
                            @Html.HiddenFor(modelItem => item.Id)
                            <img src="@Url.Action("Image", "Resource", new { id = item.Id })" alt="@item.Name" class="img-responsive" />
                        </li>
                        }
                </ul>
            </div>
        </div>
    </div>
}

B）将每个列表元素设置为带有 href 的<a>到某个操作设置状态，并以某种方式刷新部分作为结果的一部分。我不知道这是否可能。

<div class="row">
    <div class="col-md-12">
        <div class="btn-group pull-right" id="theSelector">
            <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                @if(string.IsNullOrEmpty( Model.SelectedStateVariable))
                {
                    Please select....
                }
                else
                {
                    <img src="@Url.Action("Image", "Resource", new { id = Model.SelectedStateVariable })" alt="image" class="img-responsive" />
                    <span class="caret"></span>
                }
            </button>
            <ul class="dropdown-menu" role="menu">
                @foreach (var item in Model)
                {
                    <li>
                        <a href="@Url.Action("SetStateVariable", new { Id = item.Id })">
                            <img src="@Url.Action("Image", "Resource", new { id = item.Id })" alt="@item.Name" class="img-responsive" />
                        </a>
                    </li>
                    }
            </ul>
        </div>
    </div>
</div>

我是 ASP.NET MVC 和Web编程的新手。

修改

我认为下面的所有这些答案在某种程度上都是正确的，并且每一个都为可行的解决方案增添了一些东西。我选择了一个给我AngularJS方式的那个，因为这就是我最终的目的。

Answer 1

我不完全确定你想做什么，但也许这样的事情可以帮助你：

var replaceDDL = function (ddlValue) {
    $.ajax({
        url: '@Url.Action("SessionStateVariableSelector", "YourController")',
        type: "GET",
        data: {
            "ddlValue": ddlValue
        },
        success: function (response) {
            $('#yourDDLId').replaceWith(response);
            $('#yourDDLId li a').click(function() { replaceDDL($(this).text()); });
        }
    });
};

$('#yourDDLId li a').click(function() { replaceDDL($(this).text()); });


public PartialViewResult SessionStateVariableSelector(string ddlValue)
{
    ....
    return PartialView("_sessionStateVariableSelector", model);
}

当您从ddl中选择一个选项时，我创建了一个方法来调用您的控制器并使用您的ddl获取partialView。

Answer 2

JQuery方式：

我喜欢将jquery .load()方法用于 Ajax Partial View 刷新操作。

让我们说你的部分被封装在一个div中（它也可以是一个跨度）：

<div id="divSessionStateVariableSelector">
     @Html.RenderAction("SessionStateVariableSelector","DropDownController");
</div>

当您的页面首次呈现时，您将获得“默认”行为。假设您呈现的下拉按钮的ID为"ddbSessionStateVariableSelector"。这个名称很重要，因为我们将针对名称绑定jquery事件操作。可以轻松地完成课程......

接下来，创建一个事件侦听器，在 单击事件 上重新加载部分，将选择文本作为参数传递给局部视图的子操作：

<script>
$(".yourUlClassName li a").click(function() {
    $('#divSessionStateVariableSelector')
              .load('/DropDownController/SessionStateVariableSelector/' 
                     + $(this).text());

});
</script>

重要提示：更改您的部分子操作签名，以id作为字符串。我正在假设您使用“默认”路线并且不想创建新路线。

public PartialViewResult 
           SessionStateVariableSelector(string id="{Default Value}")

AngularJS方式

更容易（但在你的问题范围之外）使用像Angularjs这样的绑定框架来简单地使用输入在你的部分中创建一个绑定。

这意味着学习一些额外的（可能很多），但在部分标记中它将是一个非常简单的实现

<div ng-controller="SessionStateVariableSelectorController">

{{ SessionStateVariableSelector ||

<select ng-model="SessionStateVariableSelector" ... >

</div>

和一些包含javascript代码：

<script>
function SessionStateVariableSelectorController($scope) {
$scope.SessionStateVariableSelector="Default Value";
  };
</script>

Answer 3

首次使用默认加载时，您的下拉列表将具有值。但是当发生任何更新时，您需要再次重新加载局部视图。所以你的HTML会

<form><div class="row">
<div class="col-md-12">
    <div class="btn-group pull-right" id="theSelector">
        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
            @if(string.IsNullOrEmpty( Model.SelectedStateVariable))
            {
                Please select....
            }
            else
            {
                <img src="@Url.Action("Image", "Resource", new { id = Model.SelectedStateVariable })" alt="image" class="img-responsive" />
                <span class="caret"></span>
            }
        </button>
        <ul class="dropdown-menu" role="menu">
            @foreach (var item in Model)
            {
                <li>
                    <a href="javascript:setState(@item.Id);">
                        <img src="@Url.Action("Image", "Resource", new { id = item.Id })" alt="@item.Name" class="img-responsive" />
                    </a>
                </li>
                }
        </ul>
    </div>
</div>

现在你需要定义javascript方法setState（Id）

         <script type="text/javascript">
   function setSate(Id)
    {
    $.ajax({
    url:'@Url.Action("SetStateVariable")'+'?Id='+Id,
    type:'get'
    }).done(function(data){
    $("form").load('@Url.Action("SessionStateVariableSelector")');

    });
    }
</script>

希望它可以解决您的问题：）

使用ajax调用设置会话变量并刷新部分

3 个答案: