locked
Ajax Jquery + HTML Partial View and Error Message Handling RRS feed

  • Question

  • User1328933117 posted

    Perhaps someone has already asked this.  I am new to ajax and would need assistance in handling and linking ajax jquery with MVC ModelState.AddModelError.  I would like the message in ModelState.AddModelError to be displayed as an alert in the error or success function of ajax jquery.  As a background, the general method is that once the controller is called, it will return a PartialView to the ajax jquery to display in a particular <div>.  If there is an error, the message should be displayed as an alert and there should be no change to whatever is currently displayed.

    Below is a sample simple controller (HttpPost) and the ajax jquery routine. 

    Controller:

            [Authorize]
            [HttpPost]
            public PartialViewResult Add()
            {
                int currentUser = (int)WebSecurity.CurrentUserId;
                Book myBook = new Book();
    
                myBook.GetChapter(currentUser, "Draft");
    
                if (myBook.Chapters.Count() > 3)
                {
                    ModelState.AddModelError("", "Too many chapters.");
                }
    
                return PartialView(myBook);           
            }

    The ajax call to post:

       function submitaddbook() {
            $.ajax({
                url: '@Url.Action("Add", "Book")',
                type: "Post",
                data: $('#addchapter').serialize(),
                success: function (data) {
                   $("#notes").html(data); 
                },
                error: function (data) {
                    alert(data.errormessage);
                }
            });
        }

    Saturday, August 2, 2014 6:11 PM

Answers

  • User1918509225 posted

    Hi cummer_mcneal,

    you can try the code sinppet  like below:

     $.ajax({
                cache: false,
                type: "POST",
                url: addStudentUrl,
                data: data,
                dataType: "json",
                success: function (data) {
                    // There is no problem with the validation
                    if (data.Valid) {
                        $("#divStudent").html(data.StudentsPartial);
                        $("input").val("");
                        return;
                    }
     
                    // Problem happend during the validation, display
                    // the messages. The following script will display the last
                    // message related to the field.
                    $.each(data.Errors, function (key, value) {
                        if (value != null) {
                            $("#Err_" + key).html(value[value.length - 1].ErrorMessage);
                        }
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                    alert("Critical Error!. Failed to call the server.");
                }
            });
        });
    

    Below is a article which explain how to use  Data Validation Using Annotations for jQuery AJAX Calls in MVC Applications step by step.

    http://www.codeproject.com/Articles/216439/Data-Validation-Using-Annotations-for-jQuery-Ajax

    Best Regards,

    Kevin Shen.

    This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 4, 2014 10:04 AM