Link to home
Start Free TrialLog in
Avatar of jwebster77
jwebster77

asked on

Update button on modal form not updating, in MVC

Hi,
I am displaying data on the ViewAllTasks page which has a delete, an edit and an add.  They all work except for the update one.  I do not get any errors and the program seems to run fine but the database is not updated and the view is not updated as well.
The add does something similar and it works:  it inserts a record in the database and the view is updated via the loadData() javascript.  What is it that I am doing wrong?  Please help.  Thank you

JAVASCRIPT:
//Load Data in Table when documents is ready
$(document).ready(function () {
    loadData();
});

//Load Data function
function loadData() {
    $.ajax({
        url: "/Tickets/ListITTasks",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.ITNumber + '</td>';
                html += '<td>' + item.ITDescription + '</td>';
                html += '<td>' + item.ITEnterDate + '</td>';
                html += '<td>' + item.ITAssignedTo + '</td>';
                html += '<td>' + item.ITEstimatedCompletion + '</td>';
                html += '<td>' + item.ITPriority + '</td>';
                html += '<td>' + item.ITFrom + '</td>';
                html += '<td>' + item.ITStatus + '</td>';
                html += '<td><a href="#" onclick="return getbyTicketNumber(' + item.ITNumber + ')">Edit</a> | <a href="#" onclick="DeleteItTask(' + item.ITNumber + ')">Delete</a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

//Add IT Task
function AddItTask() {
    var res = validate();
    if (res == false) {
        return false;
    }
    var taskObj = {
        ITDescription: $('#ITDescription').val(),
        ITEnterDate: $('#ITEnterDate').val(),
        ITAssignedTo: $('#ITAssignedTo').val(),
        ITEstimatedCompletion: $('#ITEstimatedCompletion').val(),
        ITPriority: $('#ITPriority').val(),
        ITFrom: $('#ITFrom').val(),
        ITStatus: $('#ITStatus').val()
    };
    $.ajax({
        type: "POST", 
        url: "/Tickets/AddTask",
        data: JSON.stringify(taskObj), 
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            loadData();
            //$('#myModal').modal('hide');
            clearTextBox();
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

//Function for getting the data based upon Ticket Number
function getbyTicketNumber(TicketNumber) {
    $('#ITDescription').css('border-color', 'lightgrey');
    $('#ITEnterDate').css('border-color', 'lightgrey');
    $('#ITAssignedTo').css('border-color', 'lightgrey');
    $('#ITEstimatedCompletion').css('border-color', 'lightgrey');
    $('#ITPriority').css('border-color', 'lightgrey');
    $('#ITFrom').css('border-color', 'lightgrey');
    $('#ITStatus').css('border-color', 'lightgrey');
    $.ajax({
        url: "/Tickets/GetTaskByTicketNumber/" + TicketNumber,
        type: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (result) {
            $('#ITNumber').val(result.ITNumber);
            $('#ITDescription').val(result.ITDescription);
            $('#ITEnterDate').val(result.ITEnterDate);
            $('#ITAssignedTo').val(result.ITAssignedTo);
            $('#ITEstimatedCompletion').val(result.ITEstimatedCompletion);
            $('#ITPriority').val(result.ITPriority);
            $('#ITFrom').val(result.ITFrom);
            $('#ITStatus').val(result.ITStatus);

            $('#myModal').modal('show');
            $('#btnUpdate').show();
            $('#btnAddItTask').hide();
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
    return false;
}

//Function for updating ticket number
function UpdateItTask() {
    var res = validate();
    if (res == false) {
        return false;
    }
    var taskObj = {
        Number: $('#ITNumber').val(),
        ITDescription: $('#ITDescription').val(),
        ITEnterDate: $('#ITEnterDate').val(),
        ITAssignedTo: $('#ITAssignedTo').val(),
        ITEstimatedCompletion: $('#ITEstimatedCompletion').val(),
        ITPriority: $('#ITPriority').val(),
        ITFrom: $('#ITFrom').val(),
        ITStatus: $('#ITStatus').val()
    };
    $.ajax({
        url: "/Tickets/UpdateTask",
        data: JSON.stringify(taskObj),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            loadData();
            //clearTextBox();
            $('#myModal').modal('hide');
            $('#ITNumber').val("");
            $('#ITDescription').val("");
            $('#ITEnterDate').val("");
            $('#ITAssignedTo').val("");
            $('#ITEstimatedCompletion').val("");
            $('#ITPriority').val("");
            $('#ITFrom').val("");
            $('#ITStatus').val("");
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

Open in new window



VIEW:
@model IEnumerable<HelpDeskSupport.Models.ITTasksModel>

@{
    Layout = null;
}

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>ViewAllTasks</title>

    <script src="~/Scripts/ITTasksJS.js"></script>
</head>

<div class="container">
    <h2>IT Tasks</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Task</button><br /><br />

    <table class="display table table-striped table-bordered" id="tasksTable">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ITNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITDescription)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEnterDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITAssignedTo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITEstimatedCompletion)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITPriority)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITFrom)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ITStatus)
                </th>
            </tr>
        </thead>
        <tbody class="tbody"></tbody>
    </table>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title" id="myModalLabel">Add IT Task</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                            <label for="ITNumber">Number</label>
                            <input type="text" class="form-control" id="ITNumber" placeholder="Number" disabled="disabled" />
                    </div>
                    <div class="form-group">
                        <label for="ITDescription">Description</label>
                        <input type="text" class="form-control" id="ITDescription" placeholder="Description" />
                    </div>
                    <div class="form-group">
                        <label for="ITEnterDate">Enter Date</label>
                        <input type="text" class="form-control" id="ITEnterDate" placeholder="Enter Date" />
                    </div>
                    <div class="form-group">
                        <label for="ITAssignedTo">Assigned To</label>
                        <input type="text" class="form-control" id="ITAssignedTo" placeholder="Assigned To" />
                    </div>
                    <div class="form-group">
                        <label for="ITEstimatedCompletion">Estimated Completion</label>
                        <input type="text" class="form-control" id="ITEstimatedCompletion" placeholder="Estimated Completion" />
                    </div>
                    <div class="form-group">
                        <label for="ITPriority">Priority</label>
                        <input type="text" class="form-control" id="ITPriority" placeholder="Priority" />
                    </div>
                    <div class="form-group">
                        <label for="ITFrom">From</label>
                        <input type="text" class="form-control" id="ITFrom" placeholder="From" />
                    </div>
                    <div class="form-group">
                        <label for="ITStat">Status</label>
                        <input type="text" class="form-control" id="ITStatus" placeholder="Status" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnAddItTask" onclick="return AddItTask();">Add</button>
                <button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="UpdateItTask();">Update</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Open in new window



CONTROLLER:
public ActionResult ViewAllTasks()
        {
            HelpDeskDBHandle dbhandle = new HelpDeskDBHandle();
            return View(dbhandle.GetITTasksList());
        }

        //ADD IT TASK
        [HttpPost]
        public JsonResult AddTask(ITTasksModel Task)
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();          
            return Json(hdDB.AddTaskIT(Task), JsonRequestBehavior.AllowGet);
        }

        //LIST IT TASKS
        public JsonResult ListITTasks()
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
            return Json(hdDB.GetITTasksList(), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetTaskByTicketNumber(int id)
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
            var ITNumber = hdDB.GetITTasksList().Find(x => x.ITNumber.Equals(id));
            return Json(ITNumber, JsonRequestBehavior.AllowGet);
        }

        //UPDATE TASK
        [HttpPost]
        public JsonResult UpdateTask(ITTasksModel Task)
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
            return Json(hdDB.UpdateTaskIT(Task), JsonRequestBehavior.AllowGet);
        }

Open in new window



DATABASE HANDLE:
private void connection()
        {
            string constring = ConfigurationManager.ConnectionStrings["HelpDeskSupportConn"].ToString();
            con = new SqlConnection(constring);
        }

// **********VIEW IT TASKS DETAILS********************
        public List<ITTasksModel> GetITTasksList()
        {
            connection();
            List<ITTasksModel> Ittaskslist = new List<ITTasksModel>();

            string constring = ConfigurationManager.ConnectionStrings["HelpDeskSupportConn"].ToString();
            string query = "SELECT * FROM ITTasks";
            using (SqlConnection con = new SqlConnection(constring))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            Ittaskslist.Add(new ITTasksModel
                            {
                                ITNumber = Convert.ToInt32(sdr["ITNumber"]),
                                ITDescription = Convert.ToString(sdr["ITDescription"]),
                                ITEnterDate = Convert.ToString(sdr["ITEnterDate"]),
                                ITAssignedTo = Convert.ToString(sdr["ITAssignedTo"]),
                                ITEstimatedCompletion = Convert.ToString(sdr["ITEstimatedCompletion"]),
                                ITPriority = Convert.ToString(sdr["ITPriority"]),
                                ITFrom = Convert.ToString(sdr["ITFrom"]),
                                ITStatus = Convert.ToString(sdr["ITStatus"])
                            });
                        }
                    }
                    con.Close();
                }
                return Ittaskslist;
            }
        }

        //***************ADD IT INTERNAL TASK********************
        public int AddTaskIT(ITTasksModel itt)
        {
            int i;
            connection();

            SqlCommand com = new SqlCommand("p_AddITTicket", con);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@ITDescription", itt.ITDescription);
            com.Parameters.AddWithValue("@ITEnterDate", itt.ITEnterDate);
            com.Parameters.AddWithValue("@ITAssignedTo", itt.ITAssignedTo);
            com.Parameters.AddWithValue("@ITEstimatedCompletion", itt.ITEstimatedCompletion);
            com.Parameters.AddWithValue("@ITPriority", itt.ITPriority);
            com.Parameters.AddWithValue("@ITFrom", itt.ITFrom);
            com.Parameters.AddWithValue("@ITStatus", itt.ITStatus);

            con.Open();
            i = com.ExecuteNonQuery();
            con.Close();
            return i;
        }

        //**************UPDATE IT TASK******************************
        public int UpdateTaskIT(ITTasksModel itt)
        {
            int i;
            connection();
            con.Open();

            SqlCommand com = new SqlCommand("p_UpdateITTicket", con);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@ITNumber", itt.ITNumber);
            com.Parameters.AddWithValue("@ITDescription", itt.ITDescription);
            com.Parameters.AddWithValue("@ITEnterDate", itt.ITEnterDate);
            com.Parameters.AddWithValue("@ITAssignedTo", itt.ITAssignedTo);
            com.Parameters.AddWithValue("@ITEstimatedCompletion", itt.ITEstimatedCompletion);
            com.Parameters.AddWithValue("@ITPriority", itt.ITPriority);
            com.Parameters.AddWithValue("@ITFrom", itt.ITFrom);
            com.Parameters.AddWithValue("@ITStatus", itt.ITStatus);

            i = com.ExecuteNonQuery();
            con.Close();

            return i;
        }

Open in new window



MODEL:
public class ITTasksModel
    {
        [Key]
        public int ITNumber { get; set; }
        public string ITDescription { get; set; }
        public string ITEnterDate { get; set; }
        public string ITAssignedTo { get; set; }
        public string ITEstimatedCompletion { get; set; }
        public string ITPriority { get; set; }
        public string ITFrom { get; set; }
        public string ITStatus { get; set; }
    }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of PANkaj Kumar
PANkaj Kumar
Flag of India 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 jwebster77
jwebster77

ASKER

Spot on! That was the error I made.  Thank you very much!