Get value from a table cell and display in partial view table cell in MVC

jwebster77
jwebster77 used Ask the Experts™
on
Hi,
I have a main form displaying data.  Then I have a "Comments" link on each row and on the click of it a partial view with a table opens up.  The partial view is to view/add comments and other data.  In this partial view, after the table, there are textboxes I can fill with data.  After adding data I click on "Add" and when I am done I would click on "Save" and whatever I typed in the textboxes is entered in the database.  This all works and gives you an idea of what I am working with(see attached pics as well).  

What I am looking for now is a way to fill the Ticket Number textbox(on the partial view) with the number from the Number field(on main form).  Also, this number should not be edited on the partial.  How can I achieve that?

I have been unable to find a solution.  Please help.  Thank you.

THIS IS THE CODE IN THE CONTROLLER:
//VIEW ALL COMMENTS AND DISPLAY IN PARTIAL
        [HttpPost]
        public ActionResult ViewComments(int ticketNum)
        {
            List<Comment> AllComments = new List<Comment>();
            using (DBModel db = new DBModel())
                AllComments = db.Comments.Where(x => x.TicketNumber == ticketNum).ToList();

            return PartialView("ViewComments", AllComments);
        }


//INSERT COMMENT
        public JsonResult InsertComments(List<Comment> commentsArray)
        {
            using (DBModel db = new DBModel())
            {
                //Truncate Table to delete all comments. Previous comments are copied in javascript and re-populated
                db.Database.ExecuteSqlCommand("TRUNCATE TABLE [Comments]");

                //Check for NULL
                if (commentsArray == null)
                {
                    commentsArray = new List<Comment>();
                }

                foreach (Comment comment in commentsArray)
                {
                    db.Comments.Add(comment);
                }               
                int insertedRecords = db.SaveChanges();
                return Json(insertedRecords);
            }
        }

Open in new window



THIS IS HOW THE PARTIAL VIEW IS DISPLAYED FROM THE MAIN VIEW:
@section modalComments
    {
    <script type="text/javascript">
        function showComments() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                title: "View Details"
            });
            $("#ticketTable .details").click(function () {
                var ticketNum = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST",
                    url: "/Tickets/ViewComments",
                    data: '{ticketNum: "' + ticketNum + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#dialog').html(response);
                        $('#dialog').dialog('open');
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        };

        $(function () {
            showComments();
        });
    </script>
}

Open in new window



THIS IS THE PARTIAL VIEW:
@model IEnumerable<HelpDeskSupport.Models.Comment>

<html>
<body>
    <table class="table table-striped table-bordered" cellpadding="0" cellspacing="0" border="0" width="1500" id="tblComments">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.TicketNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Comment1)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AssignedTo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.CreatedBy)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Date)
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.TicketNumber)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Comment1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.AssignedTo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CreatedBy)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date)
                    </td>
                </tr>
            }

        </tbody>
        <tfoot>
            <tr>
                <td><input type="text" id="txtTicketNumber" value=""/></td>
                <td><input type="text" id="txtComment" /></td>
                <td><input type="text" id="txtAssignedTo" /></td>
                <td><input type="text" id="txtCreatedBy" /></td>
                <td><input type="text" id="txtDate" /></td>
                <td><input type="button" id="btnAddComment" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <br />
    <input type="button" id="btnSave" value="Save All" />

    <script src="~/Scripts/json2.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#btnAddComment", function () {
            //Reference the TextBoxes
            var txtTicketNumber = $("#txtTicketNumber");
            var txtComment = $("#txtComment");
            var txtAssignedTo = $("#txtAssignedTo");
            var txtCreatedBy = $("#txtCreatedBy");
            var txtDate = $("#txtDate");

            //Get the reference of the Table's TBODY element
            var tBody = $("#tblComments > TBODY")[0];

            //Add Row
            var row = tBody.insertRow(-1);

            //Add TicketNumber cell
            
            var cell = $(row.insertCell(-1));
            cell.html(txtTicketNumber.val());

            //Add Comment cell
            cell = $(row.insertCell(-1));
            cell.html(txtComment.val());

            //Add AssignedTo cell
            cell = $(row.insertCell(-1));
            cell.html(txtAssignedTo.val());

            //Add CreatedBy cell
            cell = $(row.insertCell(-1));
            cell.html(txtCreatedBy.val());

            //Add Date cell
            cell = $(row.insertCell(-1));
            cell.html(txtDate.val());


            //Clear the TextBoxes
            txtTicketNumber.val("");
            txtComment.val("");
            txtAssignedTo.val("");
            txtCreatedBy.val("");
            txtDate.val("");
        });

        $("body").on("click", "#btnSave", function () {
            //Loop through the Table rows and build a JSON array
            var commentsArray = new Array();
            $("#tblComments TBODY TR").each(function () {
                var row = $(this);
                var commentLine = {};
                commentLine.TicketNumber = row.find("TD").eq(0).html();
                commentLine.Comment1 = row.find("TD").eq(1).html();
                commentLine.AssignedTo = row.find("TD").eq(2).html();
                commentLine.CreatedBy = row.find("TD").eq(3).html();
                commentLine.Date = row.find("TD").eq(4).html();
                commentsArray.push(commentLine);
            });

            //Send the JSON array to Controller using AJAX
            $.ajax({
                type: "POST",
                url: "/Tickets/InsertComments",
                data: JSON.stringify(commentsArray),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("Comment(s) inserted.");
                }
            });
        });
    </script>
</body>
</html>

Open in new window

Main-Form.JPG
Partial-View-to-show_add-comments.JPG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
This was solved by the following line of code:

<td><input type="text" id="txtTicketNumber" value=@ViewData["NumberFromViewAll"] readonly /></td>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial