اعتبار سنجی و نمایش پیغام خطا با استفاده از JQuery Ajax Error Handling

در این مقاله نحوه نمایش پیغامهای خطا در JQuery با استفاده از JQuery Dialog را شرح می دهیم .

دو نوع اعتبارسنجی است که با JQuery می توان آنها را تست کرد :

1 - زمانی که شئی در یک فرم Json باشد .

2 - زمانی که شئی در داخل تگ های HTML باشد .

در پایین ما یک WebMethod می نویسیم

[System.Web.Services.WebMethod]
public static void ValidateNumber(string number)
{
    int no = Convert.ToInt32(number);
}

در ادامه تگ های Html مربوط به صفحه را قرار می دهیم که شامل :یک Textbox و یک دکمه که مقدار وارد کرده توسط کاربر را در زمان اجرا چک میکند . مقدار وارد شده به WebMethod که قبلا آنرا نوشته ایم پاس داده میشود و DataType مقدار را با استفاده از Convert از رشته به عدد تغییر میدهد .

اگر مقدار وارد شده معتبر بود (عدد بود) سپس از طریق رویداد JQuery Ajax Handler پیغام معتبر بودن محتوا نمایش داده می شود .


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        #dialog { height: 600px; overflow: auto; font-size: 10pt !important; font-weight: normal !important; background-color: #FFFFC1; margin: 10px; border: 1px solid #ff6a00; }
        #dialog div { margin-bottom: 15px; }
    </style>
</head>
<body>
<form id="form1" runat="server" dir="rtl">
        <h3>
            <a href="http://barnamenevisan.org/"> </a>
            برنامه نویسان
        </h3>
        <u>1: When exception object is in the form of JSON object</u>
        <br/>
        <br/>
لطفا عدد وارد نماید :
        <input id="txtNumber1" type="text"/>
        <input id="btnValidate1" type="button" value="اعتبارسنجی"/>      
        <div id="dialog" style="display: none"></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
            rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            $(function () {
                $("#btnValidate1").click(function () {
                    var number = $("#txtNumber1").val();
                    $.ajax({
                        type: "POST",
                        url: " Default.aspx/ValidateNumber",
                        data: '{number: "' + number + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            alert("Valid number.");
                        },
                        error: OnError
                    });
                });
            });
            function OnError(xhr, errorType, exception) {
                var responseText;
                $("#dialog").html("");
                try {
                    responseText = jQuery.parseJSON(xhr.responseText);
                    $("#dialog").append("<div><b>" + errorType + " " + exception + "</b></div>");
                    $("#dialog").append("<div><u>Exception</u>:<br /><br />" + responseText.ExceptionType + "</div>");
                    $("#dialog").append("<div><u>StackTrace</u>:<br /><br />" + responseText.StackTrace + "</div>");
                    $("#dialog").append("<div><u>Message</u>:<br /><br />" + responseText.Message + "</div>");
                } catch (e) {
                    responseText = xhr.responseText;
                    $("#dialog").html(responseText);
                }
                $("#dialog").dialog({
                    title: "jQuery Exception Details",
                    width: 700,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            }
        </script>
    </form>
</body>
</html>

توابع تعریف شده در بالا سه پارامتر میگیرند :

Xhr : شئی گرفته شده است

errorType : نوع خطا را تشخیص می دهد .

exception : شامل موضوع خطای رخ داده شده است .


function OnError(xhr, errorType, exception) {
    var responseText;
    $("#dialog").html("");
    try {
        responseText = jQuery.parseJSON(xhr.responseText);
        $("#dialog").append("<div><b>" + errorType + " " + exception + "</b></div>");
        $("#dialog").append("<div><u>Exception</u>:<br /><br />" + responseText.ExceptionType + "</div>");
        $("#dialog").append("<div><u>StackTrace</u>:<br /><br />" + responseText.StackTrace + "</div>");
        $("#dialog").append("<div><u>Message</u>:<br /><br />" + responseText.Message + "</div>");
    } catch (e) {
        responseText = xhr.responseText;
        $("#dialog").html(responseText);
    }
    $("#dialog").dialog({
        title: "jQuery Exception Details",
        width: 700,
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
}
 
 
Demo
 
 
Downloads
Related Articles
Exception - error 26 - Error Locating Server Instance Specified
Here Mudassar Ahmed Khan has explained how to resolve the exception SQL Network Interfaces error: 26 - Error Locating ServerInstance Specified while connecting to SQL Server Database.
Comments
No comments have been added to this article.
Add Comments
You can add your comment about this article using the form below. Make sure you provide a valid email address
else you won't be notified when the author replies to your comment
Please note that all comments are moderated and will be deleted if they are

    Not relavant to the article
    Spam
    Advertising campaigns or links to other sites
    Abusive content.

Please do not post code, scripts or snippets.

Follow @ASPSnippets

Name
Email
Comment
Security code:
Captcha

فایل های ضمیمه

jQuery_AJAX_Exception_Handling.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

اعتبار سنجی و نمایش پیغام خطا با استفاده از JQuery Ajax Error Handling

1 - زمانی که شئی در یک فرم Json باشد .

2 - زمانی که شئی در داخل تگ های HTML باشد .

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید