how to call js function in cs in razor pages?

Question

how to call js functions in razor pages cs file?

as you know If I post create form to razor pages cs OnPostAsync

there will be error and I want to post it to html.

function ShowError(){

dialog.css('display','block');

}

how to call it?

Answer 1

Hi @Sir

You can't call the JavaScirpt from the OnPostAsync method.

Based on your code and description, I assume if there has some error in the OnPostAsync method, you want to return to current page and show the error.

If that is the case, in the OnPostAsync method, you can add an if-else statement to check whether there has error or not, if it has error, you can use ViewData to store the css display attribute value (block or none), besides you can also use a ViewData to store the custom error message. Then, in the view page, you can display the error container based on the ViewData value. Refer to the following sample:

.cshtml : by default, the custom error container is hide.

@page
@model RazorAspNet6Sample.Pages.CreateEmployeeModel
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="NewEmployee.EmpName" class="control-label"></label>
                <input asp-for="NewEmployee.EmpName" class="form-control"  /> 
                <span asp-validation-for="NewEmployee.EmpName" class=" text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="NewEmployee.Department" class="control-label"></label>
                <input asp-for="NewEmployee.Department" class="form-control" />
                <span asp-validation-for="NewEmployee.Department" class=" text-danger"></span>
            </div> 
            @{
                var isdisplay = "none";
                if (ViewData["showerror"]!=null && ViewData["showerror"] as string == "true")
                {
                    isdisplay = "block";
                }
            }
            <div class="form-group" style="display:@isdisplay">
                Custom Container to display custom error: <br />
                <span style="color:red">@ViewData["customerror"]</span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

.cshtml.cs: use ViewData to transfer the error message and error status to current page, then in the view page, set the css display attribute dynamically.

    public class CreateEmployeeModel : PageModel
    {
        [BindProperty]
        public Employee NewEmployee { get; set; }
        public void OnGet()
        { 
        } 
        public IActionResult OnPostAsync()
        {
            var newemp = NewEmployee;

            var showerror = true; //assume there has an error and we want to show the error.
            if (showerror)
            {
                ViewData["showerror"]="true"; //used to set the display attribute.
                ViewData["customerror"]="the custom error message"; //show the custom error message.
                return Page();
            }

            return RedirectToPage("./Index");
        }
    }

The result as below:

Besides, you can also try to use JQuery Ajax to call the handler method to submit the form, then based on the result, to show the error message in the Aajx success function.

Update:

how to show an alert when name id duplicate? just show message not alert?

To check the duplicate, you could try to use the Remote Validation, but if you want to show the error message using alert, you could try to use JQuery Ajax to call the handler method and check whether the data is duplicate or not, then display the error message use alert in the ajax success function. Refer to the following links:

Using jQuery AJAX in ASP.Net Core Razor Pages

Calling C# method from JQuery Ajax in .NET Core Razor Pages

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

Razor pages run on the server. It does not call JavaScript, but rather it renders JavaScript code that will run when the browser loads the page html produced by the razor page.

javascript is not required to change html or css that the razor page is rendering.