无法在视图上动态呈现标签标签

Posted 2023-05-09

【中文标题】无法在视图上动态呈现标签标签

【英文标题】：Not able to render label tag on a view dynamically

【发布时间】：2017-03-31 15:15:24

【问题描述】：

我在.cshtml 文件中有以下代码。

<div class="row">

            <input type="text" placeholder="Enter POR ID" id="porID" class="col-md-2 input-sm" name="porTextBox">
            <button class="btn btn-primary col-md-2 btn-sm" style="margin-left:15px;width:150px;" type="submit" id="btnCreateTFSItems"><strong>Create TFS Items</strong></button>
            @if (TempData["formState"] != null)
            
                //@Html.Label("lblsuccess", "Successfully created TFS Work Items!")
                <label id="lblsuccess" style="color:green; visibility:visible">   Successfully created TFS Work Items!</label>
            
        </div>

并且按钮正在脚本标签中调用以下函数：

<script type="text/javascript">
$(document).ready(function (e) 

    $('#btnCreateTFSItems').click(function () 
        var txt = $('#porID');
        var errorLabel = $('#lblError');
        if (txt.val() != null && txt.val() != '') 
            //alert('clicked');

            $.ajax(
                url: '@Url.Action("CreateWorkItems", "Tables")',
                type: 'POST',
                data:  'porTextBox': $('#porID').val() 
            );
           // alert('Successfully added');
        
        else 
            errorLabel.text("Please enter valid PORID");
            return false;
        
    );

    $("#porID").keypress(function (e) 
        var errorLabel = $('#lblError');
        errorLabel.text("");
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            return false;
        
    );
);

问题出在.cshtml 文件中，它正在检查条件但未添加标签。原因可能是因为页面没有刷新以呈现标签。我是 UI 开发的新手，所以我尝试了在网上找到的某些选项，但无法使其工作。有什么办法可以实现吗？

【问题讨论】：

你是什么意思不添加标签？您在 keypress() 方法中将其设置为空字符串（并且仅在您的输入为空时才给它一个值）

我尝试在按钮标签下方的单独 div 中添加标签，但我仍然无法为其分配值。

第一次呈现页面时TempData["formState"] 的值是多少 - 如果是null，那么标签甚至都不存在。不清楚你想在这里做什么

它的值为'Created'。这只是一张支票。我在操作本身中更新TempData["formState"] 的值，然后在视图中检查它。如果它不为空，那么我呈现该标签。在此之前，我在 <Form> 标签中使用了相同的逻辑，并且它运行良好。

只需删除视图中的if 块并创建一个空标签。然后在控制器中，return Json("your message here"); 并在 ajax 调用中添加 success: function(response) errorLabel.text(response);

【参考方案1】：

原因可能是页面没有刷新渲染标签。

没错。您使用 JQuery（客户端脚本）向服务器发出 Ajax 请求，并期望执行 Razor 代码（服务器代码）以显示标签。这不起作用，因为服务器代码对客户端代码一无所知。

解决方案是通过 JQuery 显示标签。默认渲染它，但用 CSS 隐藏它（显示：无）。请求成功后，您可以通过使用JQuery将CSS显示属性设置为“block”或“inline”来显示标签。