Как сохранить значение Select после ajax в частичном представлении? - PullRequest
2 голосов
/ 24 сентября 2019

В моем веб-приложении ASP.NET Core у меня есть частичное представление, которое нужно будет разместить в нескольких представлениях, и я буду способен реагировать на динамические данные, которые будут различаться в зависимости от представления, которое отображает это частичное в данный момент.Красное поле на изображении представляет область, в которой визуализируется частичное.

enter image description here

Частичное по сути является Select, которое вызовет хранимую процедуруи вернуть таблицу данных и вывести таблицу в частичное представление.Я могу выбрать опцию на странице и заставить ее позвонить в SP и просмотреть все соответствующие данные из таблицы данных, и могу выписать ее на странице без проблем.Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз при частичном обновлении через ajax Select возвращается к значению по умолчанию «Выбор» и не сохраняет выбранную ранее выбранную опцию.

Для краткости предположим, чточто объект FeedbackQueries содержит только 4 строковых элемента.

_FeedbackQueryResultPartial.cshtml

@using Contract.Shared;
@model FeedbackQueries


<style>
#select {
    margin: auto;
    text-align: center;
}
</style>

<div id="feedbackQueryResultPartial">
    <div style="height:25px;">
        <div id="select">
            <select name="StoredProcs" id="StoredProcs" onchange="selectQuery()">
                <option value="Select">Select</option>
                @foreach (FeedbackQuery query in Model.Queries)
                {
                    @Html.Raw($"<option value='{query.SprocName}'>{query.SprocName}</option>");
                }
            </select>
        </div>

        <div id="feedbackQueryDiv" class="row">
            @if (Model.FeedbackQueryResults.Rows.Count > 0)
            {
                <h3>DataTable goes here</h3>
            }
            else
            {
                <h3>No rows were returned from your query. Please select another.</h3>
            }
        </div>
    </div>
</div>

Processing.cshtml

@using Contract.Parent
@using Contract.Shared
@model Processing
<script>
        function showFeedbackPartial(x, y, z, q) {
            $.ajax({
                cache: false,
                url: '@Url.Action("GetFeedbackQueryDatatable", "Client")',
                type: 'POST',
                data: { databaseConnectionString: x, storedProcedure: y, page: z, Model: q },
                success: function (result) {
                    var selected = $('#StoredProcs').val();
                    console.log(selected);
                    if (result.rowCount > 0) {
                        console.log(result.rowCount);
                        var databaseConnectionString = x;
                        var storedProcedure = y;
                        var page = z;
                        var model = q;
                        var url = '@Url.Action("ViewFeedbackQueryPartial", "Client")';
                        $("#feedbackQueryResultPartial").load(url, { databaseConnectionString, storedProcedure, page, model });
                    }
                    else {
                        document.getElementById('feedbackQueryDiv').innerHTML = '<h3>No rows were returned from your query.  Please select another.</h3>';
                    }
                    $('#StoredProcs').val(selected);
                    $("#StoredProcs option[value='Select']").remove();
                }
            });
        }
    </script>
    <script>
        function selectQuery() {
            var e = document.getElementById('StoredProcs');
            var ev = e.options[e.selectedIndex].text;
            var p = 'Processing';
            var model = @Html.Raw(Json.Serialize(Model.FeedbackQueries));
            console.log(model);
            showFeedbackPartial('@Model.Client.DatabaseConnectionString', ev, p, model);

        }
    </script>
    <script>
        $(document).ready(function () {
            document.getElementById('feedbackQueryDiv').innerHTML = '<h3>Select a query to view feedback.</h3>';
        });
    </script>
}
<form method="post" enctype="multipart/form-data">
...
    <partial name="_FeedbackQueryResultPartial" for="@Model.FeedbackQueries" />
...
</form>

Действия контроллера, которые визуализируют представление обработки

[HttpGet]
        public IActionResult Processing(int Id)
        {
            ViewBag.Id = Id;
            Processing processing = new Processing();

            //Get pertinent information for Client 
            processing.Client = _clientProcessingService.GetSingleClient(Id, _appSettings.MOPConfigConnectionString);
            processing.Client.DatabaseConnectionString = _clientProcessingService.GetClientConnectionFromConfig(processing.Client, _appSettings);
            processing.Steps = _clientProcessingService.GetClientSteps(processing.Client.DatabaseConnectionString, "Processing");
            processing.CurrMoInfo.CurrMo = _clientProcessingService.GetProcessingCurrMo(processing.Client.DatabaseConnectionString);
            processing.FeedbackQueries = _clientProcessingService.GetFeedbackQueriesFromDb(processing.Client.DatabaseConnectionString, "Processing");

            return View(processing);
        }

        [HttpPost]
        public IActionResult Processing(Processing Model)
        {
            //Get pertinent information for Client 
            Model.Client = _clientProcessingService.GetSingleClient(Model.Client.ClientID, _appSettings.MOPConfigConnectionString);
            Model.Client.DatabaseConnectionString = _clientProcessingService.GetClientConnectionFromConfig(Model.Client, _appSettings);
            Model.Steps = _clientProcessingService.GetClientSteps(Model.Client.DatabaseConnectionString, "Processing");
            Model.CurrMoInfo.CurrMo = _clientProcessingService.GetProcessingCurrMo(Model.Client.DatabaseConnectionString);
            Model.FeedbackQueries = _clientProcessingService.GetFeedbackQueriesFromDb(Model.Client.DatabaseConnectionString, "Processing");

            return View(Model);
        }

Действие контроллера, которое визуализирует частичное

public IActionResult ViewFeedbackQueryPartial(string DatabaseConnectionString, string StoredProcedure, string Page, FeedbackQueries Model)
{
    if(StoredProcedure == "Select")
    {
        return PartialView("_FeedbackQueryResultPartial", Model);
    }
    Model.FeedbackQueryResults = _clientProcessingService.GetFeedbackQueryDataTable(DatabaseConnectionString, Page, StoredProcedure);

    return PartialView("_FeedbackQueryResultPartial", Model);
}

Я пыталсятак много разных способов поддержания этой ценности.Добавляя его в модель, добавляя его в Viewbag и бесчисленное множество других способов попытаться сохранить это значение где-нибудь и независимо от успеха или неудачи, сохраните значение и измените его на выбранную опцию через javascript.Сбрасывается на «Выбрать» каждый раз, когда партиал перезагружается после выполнения вызова ajax.

Это также представляет другую проблему, при которой, когда я отправляю форму в представлении Processing, нажимая RUN на страницеобновится и перейдет к следующему этапу процесса, но в идеале также должно произойти следующее: значение в частичном сохраняется, запрос запускается снова, и пользователю не нужно выбирать новое значение в любой точке, если он не хочетзапустить другой SP, чтобы увидеть другие данные в таблице.

Возможно ли это вообще, или я пытаюсь сделать это совершенно неправильно?

1 Ответ

1 голос
/ 25 сентября 2019

Для вашей проблемы вам может потребоваться передать выбранный SprocName из родительского просмотра в частичное представление с Model.

  1. Добавить SelectedSprocName в FeedbackQueries

    public class FeedbackQueries
    {
        public string SelectedSprocName { get; set; }
        public List<FeedbackQuery> Queries { get; set; }
        public FeedbackQueryResults FeedbackQueryResults { get; set; }
    }
    
  2. Изменить вид для установки SelectedSprocName

    function showFeedbackPartial(x, y, z, q) {
        $.ajax({
            cache: false,
            url: '@Url.Action("GetFeedbackQueryDatatable", "Process")',
            type: 'POST',
            success: function (result) {
                var selected = $('#StoredProcs').val();                   
                model.SelectedSprocName = selected;
                var url = '@Url.Action("ViewFeedbackQueryPartial", "Process")';
                $("#feedbackQueryResultPartial").load(url,{ databaseConnectionString, storedProcedure, page, model });
                console.log('after load' + selected);
               // your rest code
            }
        });
    }
    
  3. Частичный вид установить выбранную опцию

    @foreach (FeedbackQuery query in Model.Queries)
    {
        if (query.SprocName == Model.SelectedSprocName)
        {
            @Html.Raw($"<option value='{query.SprocName}' selected='true'>{query.SprocName}</option>");
        }
        else
        {
            @Html.Raw($"<option value='{query.SprocName}'>{query.SprocName}</option>");
        }
    }
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...