通过 Ajax 更新 C# 变量？

Question

我有一页满是帖子，我在渲染之前对这些帖子进行了排序。

现在我创建了一个下拉列表，以便用户可以按最新或最旧对帖子进行排序。 唯一的问题是我不知道如何通过 Ajax 更新服务器端变量。

    @{
       var SortSelected = "";

       var sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).Reverse().ToList();

        if (SortSelected == "Most recent")
        {
            sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).Reverse().ToList();
        }
        else if (SortSelected == "Oldest")
        {
            sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).ToList();
        }
   }

我已经删除了其他无关的代码以使其更清晰。

这是我的帖子代码，这是 Razor(html)

 <div class="AnimatedLabel">
     <select name="contact" class="tm-md-12">
           <option id="hide-selector-dropdown" value=""></option>
              @foreach (var item in FilterTypes)
              {
                  <option value="@item">@item</option>
              }
       </select>
          <label for="contact">Sort by</label>
          <span class="tm-icon-arrow--right" id="selector-dropdown-arrow"></span>
 </div>

这就是我尝试的方式 -

<script>
 $('select').on('change', function () {
        SortSelected = this.value;
    });
</script>

但它没有更新值，我被告知因为它是服务器端的。 我知道人们可能会因为这个问题而烤我，但我不知道任何其他解决方案，所以任何帮助都会很棒！

我对@9​​87654325@没有太多经验 谢谢！

Answer 1

您无法更改服务器变量值，但您可以使用它来刷新您的表格。

<script>
     $('select').on('change', function () {
            $.get('/Url' , {sortBy:this.value}).done(function(result){
             $('#yourTable').html(result);
            }).fail(function(){
                alert('Error !');
            });
        });
    </script>

Answer 2

好的，我只是想向您展示如何使用 AJAX 实现这样的目标。据我了解，您希望根据您拥有的下拉列表中用户的选择对您的帖子列表进行排序。请参考下面的代码 sn-p 并让我知道您是否能够根据您的要求得到您想要的：

<script>
 $('select').on('change', function () {
//SortSelected = this.value;

//First get the text of the selected item
var selectedText=$('#hide-selector-dropdown :selected').text();

//Now generate your JSON data here to be sent to the server
  var json = {
              selectedText: selectedText
             };

//Send the JSON data via AJAX to your Controller method
    $.ajax({
        url: '@Url.Action("ProcessMyValue", "Home")',
        type: 'post',
        dataType: "json",
        data: { "json": JSON.stringify(json)},
        success: function (result) {
            //Show your list here
                if (data.success) {
                  console.log(data.sortedArticles);
                 }
                else {
                 console.log("List empty or not found");
                }
        },
        error: function (error) {
             console.log(error)
        }
      });
    });
</script>

你的控制器看起来像：

using System.Web.Script.Serialization;

[HttpPost]
public ActionResult ProcessMyValue(string json)
{

        var serializer = new JavaScriptSerializer();
        dynamic jsondata = serializer.Deserialize(json, typeof(object));

        //Get your variables here from AJAX call
        var SortSelected= jsondata["selectedText"];

        //Do something with your variables here. I am assuming this:

        var sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).Reverse().ToList();

        if (SortSelected == "Most recent")
        {
         sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).Reverse().ToList();
        }
        else if (SortSelected == "Oldest")
        {
          sortedArticles = ListOfPosts.OrderBy(x => x.GetPropertyValue<DateTime>("articleDate")).ToList();
        }  

    return Json(new { success = true, sortedArticles }, JsonRequestBehavior.AllowGet);
}

Answer 3

您可以使用 ajax 在服务器端调用 web 方法。 使用该方法在服务器端更新变量