Блог

Главная - Вопросы по программированию - Хранение результатов AJAX MVC .Net Core

Хранение результатов AJAX MVC .Net Core

#asp.net-core #asp.net-core-mvc #asp.net-ajax

#asp.net-core #asp.net-core-mvc #asp.net-ajax

Вопрос:

У меня есть <script> следующее

         $(function () {
        $("#validateBtn").click(function () {
            var userkeyInput = $("#UserKeyInput").val();
            var EmailInput = $("#EmailInput").val();

            $.ajax({
                url: "@Url.Action("ValidateUser")",
                data: { UserKey: userkeyInput, Email: EmailInput },
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.success == true) {
                        $("#verificationTab").hide();
                        $("#setpasswordTab").show();
                        var userKey = result.userKey; // This is the UserKey of the user.
                        var headertext = document.getElementById("TabHeaderText2");
                        headertext.innerHTML = "Verified";
                    }
                    else {
                        var headertext = document.getElementById("TabHeaderText1");
                        headertext.innerHTML = result.error;

                    }
                },
                error: function (result) {
                    window.alert("This is an unhandled exception. ");

                }
            });

        });

    });

это AJAX позволяет получить результаты в формате Json. После завершения проверки я теряю данные, которые я получил от AJAX. Мне нужны эти данные для других функций после завершения проверки. Как я могу сохранить эти данные под рукой? Должен ли я использовать Tempdata на стороне сервера?

контроллер

     public IActionResult ValidateUser(string UserKey,string Email)
    {

      return Json(new { success = false, data="this is the data that i want to save somewhere"});
    }

Комментарии:

1. ваш вопрос вообще не имеет смысла. Где изначально хранятся потерянные данные? Если это на стороне сервера, клиентский код не задействован, вы должны опубликовать код на стороне сервера.

2. Ну, я все объяснил. Серверная часть возвращает результаты в формате JSON теперь я хочу, чтобы этот JSON был сохранен где-нибудь после того, как я использую его для отображения данных. Эти данные никогда не сохраняются, в этом весь смысл вопроса

3. для хранения данных есть только 2 места: на стороне сервера и на стороне клиента. Если он сохранен на стороне сервера, просто сохраните его прямо перед возвратом результата клиенту. Если он сохраняется на стороне клиента, вам необходимо где-то хранить данные (помимо обработки данных) при получении данных (например: используйте localStorage, sessionStorage …). Это зависит от вашей цели сохранения таких данных.

Ответ №1:

После завершения проверки я теряю данные, которые я получил от AJAX. Мне нужны эти данные для других функций после завершения проверки. Как я могу сохранить эти данные под рукой? Должен ли я использовать Tempdata на стороне сервера?

Вы можете хранить данные на стороне сервера или на стороне клиента. На стороне сервера вы можете использовать сеанс для хранения записей. На стороне клиента вы можете использовать веб-хранилище HTML для хранения данных.

Для использования сеанса в asp.net основное приложение, файл Startup.cs должен содержать:

  • Любой из кэшей памяти IDistributedCache. Реализация IDistributedCache используется в качестве резервного хранилища для сеанса. Для получения дополнительной информации см. раздел Распределенное кэширование в ASP.NET Ядро.
  • Вызов AddSession в ConfigureServices.
  • Вызов UseSession в Configure.

Код, как показано ниже:

 public void ConfigureServices(IServiceCollection services)
{
    services.AddDistributedMemoryCache();

    services.AddSession(options =>
    {
        options.IdleTimeout = TimeSpan.FromMinutes(30); //remember check the session expired time, by default it is 10 seconds.
        options.Cookie.HttpOnly = true;
        options.Cookie.IsEssential = true;
    });

    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseSession();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapRazorPages();
    });
}

Затем, чтобы использовать сеансы для хранения данных объектного типа, мы должны создать файл SessionExtensions.cs и содержать следующий код:

 //required using Microsoft.AspNetCore.Http;
//required using System.Text.Json;
public static class SessionExtensions
{
    public static void Set<T>(this ISession session, string key, T value)
    {
        session.SetString(key, JsonSerializer.Serialize(value));
    }

    public static T Get<T>(this ISession session, string key)
    {
        var value = session.GetString(key);
        return value == null ? default : JsonSerializer.Deserialize<T>(value);
    }
}

После этого обратитесь к следующему коду для сохранения / получения данных из сеанса:

         List<UserViewModel> items = new List<UserViewModel>();
        // check if session exist
        if (HttpContext.Session.Get<List<UserViewModel>>("userdata") != default)
        {
            //get the stored data from the session
            items = HttpContext.Session.Get<List<UserViewModel>>("userdata");
        } 
        items.Add(model);
        //store the latest data in the session
        HttpContext.Session.Set<List<UserViewModel>>("userdata", items);

Веб-хранилище HTML предоставляет два объекта для хранения данных на клиенте:

  • окно.localStorage — хранит данные без даты истечения срока действия
  • window.sessionStorage — хранит данные за один сеанс (данные теряются при закрытии вкладки браузера)

Использование веб-хранилища, как показано ниже:

     //check if browser support Web storage.
    if (typeof (Storage) !== "undefined") {
        // Code for localStorage/sessionStorage.  
        // Store
        localStorage.setItem("data", "Smith"); 
        // Retrieve
        var data = localStorage.getItem("data");
    } else {
        // Sorry! No Web Storage support..
    }

Наконец, вы могли бы сослаться на следующий пример кода для хранения данных в Asp.net Ядро с использованием jQuery Ajax.

Модели:

 public class UserViewModel
{
    public string userkey { get; set; }
    public string Email { get; set; }
}

HomeController.cs (добавьте атрибут HttpPost в заголовок метода ValidateUser):

     public IActionResult Index2()
    {
        List<UserViewModel> items = new List<UserViewModel>();
        // check if session exist, and then get data from session.
        if (HttpContext.Session.Get<List<UserViewModel>>("userdata") != default)
        {
            items = HttpContext.Session.Get<List<UserViewModel>>("userdata");  
        } 
        return View(items);
    }

    [HttpPost]
    public IActionResult ValidateUser(UserViewModel model)
    {
        List<UserViewModel> items = new List<UserViewModel>();
        // check if session exist
        if (HttpContext.Session.Get<List<UserViewModel>>("userdata") != default)
        {
            //get the stored data from the session
            items = HttpContext.Session.Get<List<UserViewModel>>("userdata");
        } 
        items.Add(model);
        //store the latest data in the session
        HttpContext.Session.Set<List<UserViewModel>>("userdata", items);

        return Json(new { success = true, data = items });
    }

Просмотр (Index2.cshtml):

 @model IEnumerable<WebApplication.Models.UserViewModel>

@{
    ViewData["Title"] = "Index2";
    Layout = "~/Views/Shared/_Layout.cshtml";
} 
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.userkey)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.userkey)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </tbody>
</table>


<div class="row">
    <div class="col-md-4"> 
            <div class="form-group">
                <label for="UserKeyInput" class="control-label">User Key</label>
                <input id="UserKeyInput" class="form-control" /> 
            </div>
            <div class="form-group">
                <label for="EmailInput" class="control-label">Email</label>
                <input id="EmailInput" class="form-control" /> 
            </div>
            <div class="form-group">
                <input type="button" value="Create" id="validateBtn" class="btn btn-primary" />
            </div> 
    </div>
</div>

В конце страницы Index2.cshtml используйте следующий скрипт для отправки данных контроллеру:

 @section Scripts{ 
    <script>
        $(function () {
            $("#validateBtn").click(function () {
                var UserViewModel = {}; //create an object 
                UserViewModel.userkey = $("#UserKeyInput").val();
                UserViewModel.Email = $("#EmailInput").val();

                $.ajax({
                    url: "@Url.Action("ValidateUser")",
                    data: { model: UserViewModel }, //the name ("model") should be the same with the parameter's name in the controller.
                    type: "Post", //change the method to Post.
                    success: function (result) {
                        if (result.success == true) {
                            console.log(result.data);
                            if (typeof (Storage) !== "undefined") {
                                // Code for localStorage/sessionStorage. 
                                sessionStorage.setItem("userdata", JSON.stringify(result.data));
                            } else {
                                // Sorry! No Web Storage support..
                            }
                        }
                        else {
                            alert("fail");
                        }
                        location.reload(); //refresh the current page
                    },
                    error: function (result) {
                        window.alert("This is an unhandled exception. ");
                    }
                }); 
            }); 
        });
    </script>
}

Результат, как показано ниже (откройте инструменты разработчика F12, затем мы могли бы найти веб-хранилище на панели приложений):

введите описание изображения здесь

Метки: