Ajax POST jQuery issue

Question

I'm trying to delete an element from the DB.... i have created this Action Method in my MVC Controller.......

    [HttpPost]
    public ActionResult RemoveDoctor(DoctorModel doctor)
    {
        //confirming whether element is removed from DB
        bool confirmationResult = repo.RemoveDoctor(doctor.Id);
        string str = null;
        if (confirmationResult == true)
            str = "You have successfully Removed your record!!";
        else
            str = "Error!! Some Thing Went Wrong, Please Try Again!!";
        return Json(str);

    }

I need to see whether it s deleted or not and give a notification to the user saying it has successfully deleted or not............ but the issue is when i return this as Json the string will not move to my jQuery POST function, it will just displays my string in the browser....................... Just for Example it will just output this message: "You have successfully Removed your record!!"..................... This is how my fuction looks like:

$('#submit').click(function () {

    var modelDataJSON = @Model;

    $.ajax({
          type: "POST",
          url: "../Doctor/RemoveDoctor",
          data: {"doctor" : modelDataJSON},
          success: function (data) {
               alert(data);
          },
          dataType: "json",
          error: function () {
               alert("Error!!!");
          }

     });

  });

this is how my html form looks like:

@using (Html.BeginForm("AddDoctor", "Doctor"))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4></h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @*@Html.LabelFor(model => model.UserId, new { @class = "col-sm-2 control-label" })*@
            <label class="col-sm-2 control-label"> User ID</label>
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.UserId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>        

        <div class="form-group">
            @*@Html.LabelFor(model => model.DoctorSpecialityId, new { @class = "col-sm-2 control-label" })*@
            <label class="col-sm-2 control-label"> Doctor Speciality ID</label>
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.DoctorSpecialityId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.DoctorSpecialityId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Charges, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Charges, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Charges)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PhoneNo, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.PhoneNo, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PhoneNo)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.WardId, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.WardId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.WardId)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-primary" id="submit" />
            </div>
        </div>

Answer 1

You are not restricting your form from submitting, and hence the ajax success function is not invoked. Add return false at the end of the click event handler.

$('#submit').click(function () {

var modelDataJSON = @Model;

//do ajax call.

return false;
});