How to display succes or error message in MVC with Javascript?

Question

I'm wondering how to display a succes or error message on succes or fail by a controller action in my MVC project with bootstrap. For example I got the following action:

Input:

Javascript method to send data to controller:

              //Sends data filled in in modal to backend.
              $(document).ready(function () {
                $("#btnSubmit").click(function () {
                    var datastring = $("#myForm").serialize();

                    $.ajax({
                        type: "POST",
                        url: "/ApiBroker/AddApi",
                        dataType: 'json',
                        data: datastring,
                    });
                    $('#myModal').modal('hide');
                    $('body').removeClass('modal-open');
                    $('.modal-backdrop').remove();
                })
            })

Controller method:

 [HttpPost]
    public ActionResult AddApi(ApiRedirect model)
    {
        var data = model;
        try
        {
            List<ApiRedirect> list = dbProducts.ApiRedirects.ToList();
            int companyID = dbProducts.Companies.Where(x => x.CompanyName == model.Company.CompanyName).FirstOrDefault().CompanyID;
            int mappingID = dbProducts.MappingNames.Where(x => x.Name == model.MappingName.Name).FirstOrDefault().MappingID;
            ApiRedirect api = new ApiRedirect();
            api.ApiName = model.ApiName;
            api.CompanyID = companyID;
            api.ApiURL2 = model.ApiURL2;
            api.MappingID = mappingID;
            api.ResponseType = model.ResponseType;
            dbProducts.ApiRedirects.Add(api);
            dbProducts.SaveChanges();
            return View ();
        }
        catch (Exception ex){
            throw ex;
        }
    }

If the method AddUser added the user into my database I want to display a error message, and if the user was not added I want to display a error message. I dont know how to achieve this, any suggetions?

Thanks in advance!

UPDATE

So the alert works but the POST call is getting the following internal server error:

You can use a ViewBag, TempData, or even, since you are using ajax post, you can return a string and display that to the user — Bosco
– Bosco, Commented Jul 1, 2019 at 12:07

Rav · Accepted Answer · 2019-07-01 13:05:52Z

1

Firstly you ajax needs to be updated to use a success or failure

     $.ajax({
            type: 'POST',
            url: "/ApiBroker/AddApi",
            data: datastring,
            dataType: 'json',
            success:
                function(data){
                    //... put your logic here 
             },
            error:
                function(){ alert('error'); }
        });

Secondly you need to update your controller action to return a IHttpActionResult where you can specify a Response message.

If you look at this

HttpResponseMessage

edited Jul 1, 2019 at 13:05

answered Jul 1, 2019 at 12:08

Rav

7154 silver badges13 bronze badges

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

8 Comments

NielsStenden Over a year ago

Somehow this code giving me the alert "Error" but the data gets added to my database.

JamesS Over a year ago

Success / Error is not always necessary though. mostly depends on the return of the method you are calling

Rav Over a year ago

@JamesS yes, not necessary but as the OP said he needs to know the status.

Rav Over a year ago

@NielsStenden I forgot the add the datatype to the Ajax call, where are you getting an error? please post your code.

Rav Over a year ago

@NielsStenden I would use the following code for the URL within the ajax request: url: '@Url.Action("ACTION", "CONTROLLER")', That error is saying that MVC is searching and can't find the controller/action. Can you post the full controller code if the URL doesn't work. Also decorate your method with [HttpPost]

|

Collectives™ on Stack Overflow

How to display succes or error message in MVC with Javascript?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related