Call a JavaScript function from C# code in asp.net core 5 MVC view

Question

I'm working on an Asp.net core 5 MVC targeted .Net 5.

I have a JavaScript function in one of my views, this function should execute if a condition is true.

To be clear : I have a Controller's Action this action will sometimes return an object ViewResultMessageModel.

ViewResultMessageModel Definition:

    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
        }

What I did in my action:

     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 );
            }

My JavaScript function:

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

I tried this:

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

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

resultMessage defined in the above of the view like this :

@{
    var resultMessage = (ViewResultMessageModel) ViewBag.ResultMessage;
}

but the function doesn't executed when @resultMessage !== null I know the way I used with Js is not good, but pease is there any way to check the condition and if it is True wanna execute ShowSuccess method ??

Rena · Accepted Answer · 2021-04-25 02:34:09Z

1

Firstly, you need know that the variable(resultMessage) in view cannot be null. Because the variable value is rendered when the page loading. If it equals to null, resultMessage.Type will throw the exception:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

For your scenario, the reason why the function does not execute the statement is that once the page load the variable will render the value. For easy understanding to say, you could see the script like below when the page load. It is not acceptable for js, it will consider them as variable but you do not define such variable in js:

if (ViewResultMessageModel!== null)
{
    if(Sucess === Success)
    {
        ShowSuccess(Edited,Success);
    }
}

The correct way should be:

if('@resultMessage.Type' === '@ViewResultMessageType.Success')
{
    ShowSuccess('@resultMessage.Message','@resultMessage.Title');
}

And it will generate the js when page load:

if('Sucess' === 'Sucess')
{
    ShowSuccess('Edited','Sucess');
}

answered Apr 25, 2021 at 2:34

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JOCKH Over a year ago

Massive thanks kitten, you helped me many times I have just one question, how can I handle System.NullReferenceException: 'Object reference not set to an instance of an object.' in case if resultMessage has no object initialized ??

Rena Over a year ago

Hi @JOCKH, It is impossible to handle this issue if you use @resultMessage.propertyName. I have said this issue in my answer above. Razor code in view does not like backend code, backend code could run the code step by step and if the statement does not satisfy it will not execute the code. But razor code in the view will render all the razor variables when the page load. So you must initialize the resultMessage. You could initialize it without setting detailed value.

JOCKH Over a year ago

Really I appreciate this for you, you helped me many times, thank you again

Collectives™ on Stack Overflow

Call a JavaScript function from C# code in asp.net core 5 MVC view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related