Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

.NETCore and how to use AJAX Post Request to update SQL database

I am working on a .NETCore application and I want to use a jQuery AJAX Post call to update my SQL database when a button is clicked. I have tried a couple of different variations of ajax calls but nothing is working. I either receive a 404 or 400 error. I am not sure what I am doing wrong. Below is the code for my ajax call

$("#addMilestoneBtn").on('click', function (e) {
    e.preventDefault();
    var milestoneDetails = {};
    var date = $("#milestoneDate").val();

    milestoneDetails.MilestoneName = $("#milestoneText").val();
    milestoneDetails.Date = new Date(date);
    milestoneDetails.Date.setHours(0, 0, 0, 0);
    milestoneDetails.ProjectId = Number($("#projectId").val());

    var jsonData = JSON.stringify(milestoneDetails);

    var url = '@Url.Action("AddMilestone","HomeController")';

    $.ajax({
        type: "POST",
        url: url,
        data: jsonData,    
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response) {
        var result = response.d;
        if (result == "success") {
            alert("Milestone Added Sucessfully")
            //$("#").html("Milestone addded successfully").css("color", "green");
            buildMilestoneTable();
        }
        $("#milestoneDate").val("");
        $("#milestoneText").val("");  

    }

    function OnErrorCall(response) {
        //$("#").html("An Error has occurred. Please Try Again!").css("color", "red");
        console.log(response); 
    }
  
    return false; 

}); 

For the ajax call I have tried @Url.Action to create the url. I have also tried using the controller and action name like this: ‘/HomeController/AddMilestone’.

Here is the code for my Controller:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

[HttpPost]
    public bool AddMilestone(HomeViewModel obj)
    {
        //Create new Milestone
        obj.Milestone.Date = DateTime.Today;
        obj.Milestone.MilestoneName = obj.Milestone.MilestoneName;
        obj.Milestone.ProjectId = obj.Project.Id;
        _db.Milestones.Add(obj.Milestone);
        _db.SaveChanges();

        return true;
    }

Here is the code for my HomeViewModel:

   public class HomeViewModel
{
    public Project Project{ get; set; }
    public IEnumerable<Project> Projects { get; set; }
    public IEnumerable<SelectListItem> TeamDropDown { get; set; }
    public IEnumerable<SelectListItem> GroupDropDown { get; set; }
    public IEnumerable<SelectListItem> StatusDropDown { get; set; }
    public IEnumerable<SelectListItem> NotesDropDown { get; set; }
    public IEnumerable<SelectListItem> NetworkDropDown { get; set; }
    public IEnumerable<SelectListItem> AssigneeDropDown { get; set; }
    public GTMNote GTMNote { get; set; }
    public SECNote SECNote { get; set; }
    public OPSNote OPSNote { get; set; }
    public LCNote LCNote { get; set; }
    public CTRNote CTRNote { get; set; }
    public Update Update { get; set; }
    public Milestone Milestone { get; set; }  
    public NextStep NextStep { get; set; }

}

Here is the HTML part of my form:

       <div class="tab-pane" id="milestones" role="tabpanel">
                    <br />
                    <fieldset class="form-group">
                        <input class="form-control col-2" asp-for="Milestone.Date" type="text" value="@ViewBag.DateNoTime" id="milestoneDate">
                    </fieldset>
                    <fieldset class="form-group">
                        <input class="form-control" type="text" asp-for="Milestone.MilestoneName" oninput="charLimit();" id="milestoneText" />
                        <p>
                            <small class="text-danger" id="milestoneValidation" style="padding-top: 10px; display: none;">Please provide milestone text.</small>

                        </p>
                    </fieldset>
                    <br />
                    <a class="btn btn-primary" id="addMilestoneBtn">Add Milestone</a>
                    <br />
                    <div id="milestoneTable"></div>
                </div>

Milestone Class:

public class Milestone
{
    [Key]
    public int Id { get; set; }
    [DisplayName("")]
    public string MilestoneName { get; set; }
    [DisplayName("Milestone Date")]
    public DateTime Date { get; set; }

    //Forgein Keys
    public int ProjectId { get; set; }
    [ForeignKey("ProjectId")]
    public Project Project { get; set; }
}

Thank you in advance for your help!

>Solution :

try to send this data

  var milestoneDetails = {
    MilestoneName : $("#milestoneText").val(),
    ProjectId :$("#projectId".val()
};
  var jsonData = JSON.stringify(milestoneDetails);
  var url = '@Url.Action("AddMilestone","HomeController")';
  // or try , if you get 404
var url = '/Home/AddMilestone';

and use this action, add [FromBody] since you are using "application/json" contentType

    [HttpPost("~/Home/AddMilestone")]
    public bool AddMilestone([FromBody] Milestone mileStone)
    {
       
        mileStone.Date = DateTime.Today;
       
        _db.Milestones.Add(mileStone);
        _db.SaveChanges();

        return true;
    }
   
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading