在 asp.net core 5 MVC 视图中从 C# 代码调用 JavaScript 函数

Posted 2023-04-12

【中文标题】在 asp.net core 5 MVC 视图中从 C# 代码调用 JavaScript 函数

【英文标题】：Call a JavaScript function from C# code in asp.net core 5 MVC view

【发布时间】：2021-07-18 17:02:55

【问题描述】：

我正在处理Asp.net core 5 MVC 目标.Net 5。

我的views 之一中有一个javascript 函数，如果条件为true，则应执行此函数。

要明确： 我有一个Controller 的Action 这个动作有时会返回一个对象ViewResultMessageModel。

ViewResultMessageModel 定义：

    public class ViewResultMessageModel
        
            public string                Title    get; set; 
            public string                Message  get; set; 
            public ViewResultMessageType Type     get; set; 
        

**ViewResultMessageType Definition:**

    public enum ViewResultMessageType
        
            Error,
            Success
        

我在行动中做了什么：

     public async Task<IActionResult> Edit(PedagogicalSequenceModelVm model)
            
                if (ModelState.IsValid)
                
// Some logic here
                    var resultMessage = new ViewResultMessageModel() Type = ViewResultMessageType.Success, Title = "Success", Message = "Edited";
                    ViewBag.ResultMessage = resultMessage;
    
                    return RedirectToAction(nameof(Edit), new id = model.Id);
                
    
           // Some logic here
    
                return View( _model );
            

我的 JavaScript 函数：

    function ShowSuccess(message,title="Succés") 
    
//Some logic here
    
    

我试过了：

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

            if (@resultMessage !== null)
            
                if(@resultMessage.Type === @ViewResultMessageType.Success)
                
                    ShowSuccess(@resultMessage.Message,@resultMessage.Title);
                
            
    );
    </script>

resultMessage在上面的视图中定义如下：

@
    var resultMessage = (ViewResultMessageModel) ViewBag.ResultMessage;

但是当@resultMessage !== null 时函数没有执行我知道我使用Js 的方式不好，但是有什么方法可以检查条件，如果是True 想执行ShowSuccess方法？？

【参考方案1】：

首先，您需要知道视图中的变量（resultMessage）不能为空。因为变量值是在页面加载时渲染的。如果等于null，resultMessage.Type会抛出异常：

System.NullReferenceException: '对象引用未设置为对象的实例。'

对于您的场景，该函数不执行该语句的原因是一旦页面加载，该变量将呈现该值。为了便于理解，您可以在页面加载时看到如下脚本。 js不能接受，它会认为是变量，但是你没有在js中定义这样的变量：

if (ViewResultMessageModel!== null)

    if(Sucess === Success)
    
        ShowSuccess(Edited,Success);
    

正确的做法应该是：

if('@resultMessage.Type' === '@ViewResultMessageType.Success')

    ShowSuccess('@resultMessage.Message','@resultMessage.Title');

页面加载时会生成js：

if('Sucess' === 'Sucess')

    ShowSuccess('Edited','Sucess');

【讨论】：

非常感谢小猫，你帮了我很多次我只有一个问题，如果resultMessage没有初始化对象，我该如何处理System.NullReferenceException: 'Object reference not set to an instance of an object.'？？

嗨@JOCKH，如果您使用@resultMessage.propertyName，则无法处理此问题。我在上面的回答中已经说过这个问题。视图中的剃刀代码不喜欢后端代码，后端代码可以逐步运行代码，如果语句不满足则不会执行代码。但是视图中的 razor 代码会在页面加载时呈现所有的 razor 变量。所以你必须初始化resultMessage。您可以在不设置详细值的情况下对其进行初始化。

真的很感谢你，你帮助了我很多次，再次感谢你