Что необходимо сделать частичной перезагрузкой после отправки, чтобы пользователю не требовалось «обновление» или «F5» - PullRequest
0 голосов
/ 20 октября 2019

В настоящее время я работаю над редактированием mvc - inline -, в котором нужно получить последний штрих, и я не могу заставить его работать так, как мне бы хотелось:

История такова:

enter image description here

Пользователь представлен с этим экраном и заполняет его (Числа)

enter image description here

После успешного ввода чисел частичное представление обновляется и выглядит следующим образом: enter image description here

Но из-за отсутствия ajax / ничего из этого я не могу выяснитьобновление вообще не происходит, а "СТРЕЛКА" исчезает и выглядит как последнее изображение, и я хочу получить результат: enter image description here

Значение в базе данных обновлено правильно, ипоследний вид может появиться, если я обновлю страницу / частичное представление.

Мое представление состоит из «представления» и частичного представления, которое выглядит следующим образом в сокращенной версии:

Сначала представление и javasection:

….

            <div id="partial">
                @Html.Partial("~PartialView_WaterUsageToDo.cshtml", Model)
            </div>

        </div>        

Теперь раздел вида:

И секция скрипта:


  <script>
        $(document).ready(function () {

             $('.edit').editable('/WaterUsage/WaterNumberReportedThisPeriode', {
                cssclass: 'jeditForm',
                tooltip: 'click to edit me...',
                width: 'none',
                height: 'none',
                onsubmit: function (settings, original) {
                    oldValue = original.revert;
                },
                submitdata: function () {
                    return {
                        id: $(this).data('id'),
                        PropertyName: $(this).data('propertyname')

                    }
                },
                callback: function (value, settings) {
                    var jsonData = $.parseJSON(value);
                    if (jsonData.status) {
                        $(this).text(jsonData.value);
                    }
                    else {
                        $(this).text(oldValue);
                    }
                }                
            })

            $('.editSelect').editable('/WaterUsage/WaterNumberReportedThisPeriode', {
                cssclass: 'jeditForm',
                tooltip: 'click to edit me...',
                width: 'none',
                height: 'none',
                type: 'select',
                submit: 'Ok',
                loadurl: '/hWaterUsage/WaterNumberReportedThisPeriode',
                loaddata: function () {
                    return { id: $(this).data('id') }
                },
                onsubmit: function (settings, original) {
                    oldValue = original.revert;
                },
                submitdata: function () {
                    return {
                        id: $(this).data('id'),
                        PropertyName: $(this).data('propertyname')
                    }
                },
                callback: function (value, settings) {
                    var jsonData = $.parseJSON(value);
                    if (jsonData.status) {
                        $(this).text(jsonData.value);
                    }
                    else {
                        $(this).text(oldValue);
                    }
                }
            }) 
            $('.editSelect').click(function () {
                $('select', this).addClass('form-control pull-left w100');
                $('button', this).addClass('btn btn-sm btn-success margin10')
            })            
    </script>

И частичное представление, которое я хочу, чтобы обновить:


  @model IEnumerable<eMaja.Design.ViewModels.WaterUsageViewModel>
@{
    WebGrid grid = new WebGrid(Model, rowsPerPage: 50, ajaxUpdateContainerId: "waterUsageToReportGrid");
}
<div class="alert-success">@ViewBag.Message</div>
<div class="row">
    <div id="divProcessing">
        <p>
            Processing, please wait ..
            <img src="../../eMajaContent/ajax-loader.gif">
        </p>
    </div>
    @grid.GetHtml(

    ...
    <script src="https://www.appelsiini.net/download/jquery.jeditable.js"></script>
    <script src="~/Scripts/jquery.jeditable.datepicker.js"></script>
     <script>
        $(document).ready(function () {
            var oldValue = '';
            var divProcessing = $("#divProcessing");
            // Hide the animated Gif when page loads:
            divProcessing.hide();
            $('#email').click(function () {
                // Required hack to get animated gif to run in IE:
                setTimeout(function () {
                    divProcessing.show();
                    location.reload();
                }, 1000);
                $('myform').submit();
            });
            $('.edit').editable('/WaterUsage/WaterNumberReportedThisPeriode', {
                cssclass: 'jeditForm',
                tooltip: 'click to edit me...',
                width: 'none',
                height: 'none',
                onsubmit: function (settings, original) {
                    oldValue = original.revert;
                },
                submitdata: function () {
                    return {
                        id: $(this).data('id'),
                        PropertyName: $(this).data('propertyname')
                    }
                },
                callback: function (value, settings) {
                    var jsonData = $.parseJSON(value);
                    if (jsonData.status) {
                        $(this).text(jsonData.value);
                    }
                    else {
                        $(this).text(oldValue);
                    }
                } 


            })
            $('.editSelect').editable('/WaterUsage/WaterNumberReportedThisPeriode', {
                cssclass: 'jeditForm',
                tooltip: 'click to edit me...',
                width: 'none',
                height: 'none',
                type: 'select',
                submit: 'Ok',
                loadurl: '/hWaterUsage/WaterNumberReportedThisPeriode',
                loaddata: function () {
                    return { id: $(this).data('id') }
                },
                onsubmit: function (settings, original) {
                    oldValue = original.revert;
                },
                submitdata: function () {
                    return {
                        id: $(this).data('id'),
                        PropertyName: $(this).data('propertyname')
                    }
                },
                callback: function (value, settings) {
                    var jsonData = $.parseJSON(value);
                    if (jsonData.status) {
                        $(this).text(jsonData.value);
                    }
                    else {
                        $(this).text(oldValue);
                    }
                }
            })

             ...
        })
    </script>
}

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

С уважением

Casper

1 Ответ

0 голосов
/ 20 октября 2019

Твой вопрос мне не понятен. Я думаю, вы хотите обновить часть страницы. Так что вам нужно сделать запрос AJAX. Например, $ .ajax ({url: 'your url', data: 12345, success: function (result) {enter code here}})

В вашем контроллере верните частичное представление, затем добавьте его в рамках успеха следующим образом$ ( '# DIVID'). HTML (результат)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...