Link to home
Start Free TrialLog in
Avatar of lovettjay
lovettjay

asked on

AJAX Create / Update Not working MVC

Trying to do an AJAX call for create and update however I am not able to get either to work.  No error message to use in development tools.  

Model:
  public partial class concern
    {
        public int concern_id { get; set; }
        public string concern_desc { get; set; }
    }

Open in new window



Controller: I have delete working but don't understand what is wrong with the create and update
   [HttpPost]
        public ActionResult Create([Bind(Exclude = "concern_id")] concern concern)
        {
            if (ModelState.IsValid)
            {
                db.concerns.Add(concern);
                db.SaveChanges();
            }
            return Json(concern, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult Update(concern concern)
        {
            if (ModelState.IsValid)
            {           
                db.Entry(concern).State = EntityState.Modified;
                db.SaveChanges();
            }
            return Json(concern, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult Delete(int id)
        {
            var concern = db.concerns.ToList().Find(x => x.concern_id == id);
            if (ModelState.IsValid)
            {          
                db.concerns.Remove(concern);
                db.SaveChanges();
            }
            return Json(concern, JsonRequestBehavior.AllowGet);
        }

Open in new window



View:
<!--Insert / Update Modal-->
<div id="concernModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><label id="title"></label></h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-10">                         
                            <label>ID</label>
                            <input type="text" id="concern_id" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">                          
                            <label>Description</label>
                            <input type="text" id="concern_desc" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" id="btnSave" class="btn btn-primary">Save</button>
                <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!--Delete Modal-->
<div id="confirmModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><label id="title"></label></h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    Do you want to delete this record?
                   
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" id="btnOk" class="btn btn-primary">Save</button>
                <button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript" src="~/Scripts/lib/concern.js"></script>
}

Open in new window



Script:
$(document).ready(function () {
    getConcerns();
});
//declare a variable to check when the action is Insert or Update
var isUpdateable = false;

$("btnSave").click(function (e) {
    var data = {
        concern_id: $("#concern_id").val(),
        concern_desc: $("#concern_desc").val()       
    }
    if (!isUpdateable) {
        $.ajax({
            url: "http://localhost/NAHP/concerns/Create",
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function() {
                getConcerns();
                $("#concernModal").modal('hide');
                clear();
            },
            error: function(err) {
                alert("Error: " + err.responseText);
            }
        });
    } else {
        $.ajax({
            url: "http://localhost/NAHP/concerns/Create",
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function() {
                getConcerns();
                isUpdateable = false;
                $("#concernModal").modal('hide');
                clear();
            },
            error: function(err) {
                alert("Error: " + err.responseText);
            }
        });
    }
});

Open in new window



Any help or guidance is appreciated.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lovettjay
lovettjay

ASKER

Thanks for your help
@lovettjay

Do you still require assistance with this question? If so post back here otherwise please can you close the question.

JulianH
Thanks for your help
You are welcome.