时间戳

首页 > 解决方案 > 通过 Ajax 更新 C# 变量？

c# - 通过 Ajax 更新 C# 变量？

问题描述

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

现在我创建了一个下拉列表，以便用户可以按最新或最旧对帖子进行排序。唯一的问题是我不知道如何通过 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>

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

我没有太多的经验.net/c# 谢谢！

标签： c#asp.net.netajaxasp.net-mvc

解决方案

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

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

推荐阅读