Geek asks and answers

Set a session variable using ajax call and partial update

I am trying to create a Dropstrap Dropdown Button . The list should contain links that, when clicked, set the session state variable. The only page update I would like to do is display Dropdown again , so the selected item will appear as a title.

The dropdown is displayed as a partial view by calling a Child Action

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

    StateVariableCollectionViewModel model = GetThisFromSomewhere();

    model.SelectedStateVariable = stateVariable ?? string.Empty;

    return PartialView("_sessionStateVariableSelector", model);
}

At first, I had two ideas on how to do this.

A) Ajax.Beginformsurrounding Dropdown that sends the same action. Thus, I would do UpdateTargetIdthat updates Dropdown with a new variable selected.

, AutoPostBack Bootstrap. , <a> .

<a> href postback AJAX?

@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) <a> href - , - . , .

<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 -.

, , - . , AngularJS, .

+3
3

JQuery:

jquery .load() Ajax Partial View.

, div ( span):

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

, " ". , Dropdown "ddbSessionStateVariableSelector". , jquery . ...

, click, :

<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>
+2

, , , , - :

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);
}

partialView ddl, ddl.

+2

. - , . 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>

, :)

+2

More articles:


All Articles