Как мне обновить специальную вкладку c в сообщении в Asp. Net Страницы с вкладками Core Razor - PullRequest
Новая
       125

Как мне обновить специальную вкладку c в сообщении в Asp. Net Страницы с вкладками Core Razor

0 голосов
/ 07 августа 2020

У меня есть страница Razor с вкладками, при загрузке нет данных для извлечения с сервера, активная вкладка установлена ​​для первой вкладки. Однако, когда я обновляю данные на одной вкладке и публикую их, я хочу, чтобы страница получала данные только для этой вкладки. У меня пока есть 

<ul class="nav nav-tabs" id="PTWTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="PTW-tab" data-toggle="tab" href="#PTW" aria-controls="ptw" aria-selected="true" style="width:200px">Permit To Work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="HazId-tab" data-toggle="tab" href="#HazId" aria-controls="hazid" aria-selected="false" style="width:200px">Hazard Identification</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="GasTest-tab" data-toggle="tab" href="#GasTest" aria-controls="gt" aria-selected="false" style="width:200px">Gas Testing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="IsoCert-tab" data-toggle="tab" href="#IsoCert" aria-controls="isocert" aria-selected="false" style="width:200px">Isolation Certificate</a>
    </li>
</ul>

и cs html: 

public async Task<IActionResult> OnPostIsoCertAsync(int? PTWNo)
    {

        if (!ModelState.IsValid)
        {
            return Page();
        }

        var newIsoCert = await _context.ICContents.FindAsync(PTWNo);

        if (newIsoCert == null)
        {
            return NotFound();
        }

        if (await TryUpdateModelAsync<ICContent>(
                     newIsoCert,
                     "ICContent",
                       c => c.IdICD,
                       c => c.IsoStep,
                       c => c.EquipmentID,
                       c => c.EquipmentDescription,
                       c => c.EnSource,
                       c => c.IsType,
                       c => c.IsMethod,
                       c => c.LockNo,
                       c => c.PreparedBy,
                       c => c.ImplementedBy,
                       c => c.VerifiedBy,
                       c => c.IsStatus))
        {
            await _context.SaveChangesAsync();
            
            return Page();
        }

        return Page();
    }

есть также процедура OnGet и html для отображения данных

1 Ответ

0 голосов
/ 07 августа 2020

когда я обновляю данные на одной вкладке и отправляю их, я хочу, чтобы страница получала данные только для этой вкладки.

Если вы хотите просто обновить спецификацию c содержимое раздела вкладки, как упоминалось в @Tavershima, вы можете попытаться динамически отобразить частичный вид, используя Ajax на JavaScript. Следующая простая демонстрация предназначена для вашей справки. 

@page
@model WebGlobalSearch.MenuTabModel
@{
    ViewData["Title"] = "MenuTab";
}

<h1>MenuTab</h1>

<ul class="nav nav-tabs" id="PTWTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="PTW-tab" data-toggle="tab" href="#PTW" aria-controls="ptw" aria-selected="true" style="width:200px">Permit To Work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="HazId-tab" data-toggle="tab" href="#HazId" aria-controls="hazid" aria-selected="false" style="width:200px">Hazard Identification</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="GasTest-tab" data-toggle="tab" href="#GasTest" aria-controls="gt" aria-selected="false" style="width:200px">Gas Testing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="IsoCert-tab" data-toggle="tab" href="#IsoCert" aria-controls="isocert" aria-selected="false" style="width:200px">Isolation Certificate</a>
    </li>
</ul>

<div class="tab-content">
    <div id="PTW" class="tab-pane fade active show">
        <h3>Permit To Work</h3>
        <br />
        <div class="tab-c">
            <partial name="PTW" />
        </div>
    </div>
    <div id="HazId" class="tab-pane fade">
        <h3>Hazard Identification</h3>
    </div>
    <div id="GasTest" class="tab-pane fade">
        <h3>Gas Testing</h3>
        <br />
        <div class="tab-c">
            <partial name="GasTest" />
        </div>
    </div>
    <div id="IsoCert" class="tab-pane fade">
        <h3>Isolation Certificate</h3>
    </div>
</div>

@Html.AntiForgeryToken()

@section scripts{
    <script>
        function UpdateGasTestFunc() {

            $.ajax({
                type: "POST",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                url: "MenuTab?handler=UpdateGasTest",
                //data: data,
                success: function (res) {
                    $("#GasTest").find("div.tab-c").html(res);
                }
            });
        }
    </script>
}

Обработчик OnPostUpdateGasTest 

public IActionResult OnPostUpdateGasTest()
{
    return Partial("GasTest");
}

Содержимое частичного просмотра GasTest

Gas Testing Page @DateTime.Now.ToString()


<input type="button" value="Update" id="btn_update" onclick="UpdateGasTestFunc()" />

Результат теста

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

Я просто хотел избежать javascript и обновить только интересующую меня вкладку

По сценарию, который вы описали в своем вопросе, обычно, если пользователь браузера отправить обновленные данные на сервер без JavaScript, сервер вернет новый ответ клиенту браузера, и будет повторно отрисована вся страница, а не только часть содержимого html.

Обновление:

Я хочу опубликовать, обновить sh страницу и показать вкладку, которую я публикую, из

Для динамического сброса активной вкладки после перезагрузки страницы вы можете обратиться к следующему фрагменту кода. 

$(function () {
    var active_tab_id = localStorage.getItem('activetab');

    if (active_tab_id != null) {
        //console.log(active_tab_id);
            $('#PTWTab a[id="' + active_tab_id + '"]').tab('show');
    }
           
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        //console.log($(e.target).attr("id")); 
        localStorage.setItem('activetab', $(e.target).attr('id'));
    });
})
...