How to display an returned message after a successful submission using ajax.beginform

See more:

Ajax

MVC5

hi, i have a simple mvc form like this

@using (Ajax.BeginForm("submitSchlReg", "Ministry", new AjaxOptions { HttpMethod = "POST", OnSuccess = "Showsuccess", OnFailure = "Showfail" }, new { @id = "schlregdiv", @class = "form-horizontal" }))
            {
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">School Name</label>
                    <div class="col-sm-10"><input name="schlname" type="text" class="form-control" placeholder="School Name" required /></div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">School Acronym</label>
                    <div class="col-sm-10"><input name="schlacr" type="text" class="form-control" placeholder="Acronym Format (BCS, HNY, etc)" required /></div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">School Address</label>
                    <div class="col-sm-10"><textarea name="schladdress" class="form-control" rows="3" placeholder="School Address" required></textarea></div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">State</label>
                    <div class="col-sm-10">
                        @Html.DropDownList("mylist", new SelectList(Model.Name), "", new { @onchange = "getlgass()", @class = "form-control-select" })
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Local Government</label>
                    <div class="col-sm-10">
                        <select id="schLga" name="schlga" class="form-control-select" required></select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Town(Origin)</label>
                    <div class="col-sm-10"><input name="schltown" type="text" class="form-control" placeholder="Town" required /></div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Year Of Establishment</label>
                    <div class="col-sm-10">
                        <input name="schlyear" class="form-control-select" type="month" required />@*// month and year*@
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Category</label>
                    <div class="col-sm-10">
                        <select name="schlcategory" class="form-control-select" required>
                            <option></option>
                            <option>Primary</option>
                            <option>Secondary</option>
                            <option>etc...</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Type</label>
                    <div class="col-sm-10">
                        <select name="schltype" class="form-control-select" required>
                            <option></option>
                            <option>Private</option>
                            <option>Missionary</option>
                            <option>State</option>
                            <option>Federal</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10"><button id="schregsubmit" type="submit" class="btn btn-default">Submit</button></div>
                </div>
                }

submitted via ajax.beginform
, the controller then receives the user input and pass as parameter to a web service function as shown below

[HttpPost]
        public ActionResult submitSchlReg()
        {
            string staff = "eg34hdj";//this is the id of the staff who added the school supposed to be retrieved from session
            try
            {
                FormData fd = new FormData
                                    {
                                        schName = Request.Form["schlname"],
                                        schacr = Request.Form["schlacr"],
                                        schAdd = Request.Form["schladdress"],
                                        schTwn = Request.Form["schltown"],
                                        schLga = Request.Form["schlga"],
                                        schState = Request.Form["mylist"],
                                        //add country here
                                        schYr = Request.Form["schlyear"],
                                        schCat = Request.Form["schlcategory"],
                                        schTyp = Request.Form["schltype"]
                                    };

                fd.returnedxml = ss.addSchool(fd.schName, fd.schacr, fd.schAdd, fd.schTwn, fd.schLga, fd.schState, fd.schCountry, fd.schYr, fd.schCat, fd.schTyp, staff);//i'm passing the values above to the web service function here
                ViewData["ret"] = fd.returnedxml;
                
                return View(fd);
            }
            catch(Exception ex)
            {
                FormData fd = new FormData();
                fd.returnedxml = ex.Message;
                ViewData["ret"] = fd.returnedxml;
                return View(fd);
            }
        }

i want to display the value of the string returned from the web service which i got into fd.returnedxml via javascript alert.

Every assistance would be appreciated, Thanks

What I have tried:

[HttpPost]
        public ActionResult submitSchlReg()
        {
            string staff = "eg34hdj";//this is the id of the staff who added the school supposed to be retrieved from session
            try
            {
                FormData fd = new FormData
                                    {
                                        schName = Request.Form["schlname"],
                                        schacr = Request.Form["schlacr"],
                                        schAdd = Request.Form["schladdress"],
                                        schTwn = Request.Form["schltown"],
                                        schLga = Request.Form["schlga"],
                                        schState = Request.Form["mylist"],
                                        //add country here
                                        schYr = Request.Form["schlyear"],
                                        schCat = Request.Form["schlcategory"],
                                        schTyp = Request.Form["schltype"]
                                    };

                fd.returnedxml = ss.addSchool(fd.schName, fd.schacr, fd.schAdd, fd.schTwn, fd.schLga, fd.schState, fd.schCountry, fd.schYr, fd.schCat, fd.schTyp, staff);//i'm passing the values above to the web service function here
                ViewData["ret"] = fd.returnedxml;
                
                return View(fd);
            }
            catch(Exception ex)
            {
                FormData fd = new FormData();
                fd.returnedxml = ex.Message;
                ViewData["ret"] = fd.returnedxml;
                return View(fd);
            }
        }

function Showsuccess()
{
alert("Submitted");
} // this function is written in an external javascript file
when the function submits d form successfully, it displays submitted as shown in the function Showsuccess. but instead than just showing "Submitted", i need to show the server sent response. i've tried using view data and temp data but none worked.
any assistance would be appreciated