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

Question

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);
        }
    }

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>

}

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>

Answer 1

这是通过使用以下代码行解决的：

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

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

Question

1 answers

solution1
0 2019-12-11 18:37:27

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

Question

1 answers

solution1 0 2019-12-11 18:37:27

solution1
0 2019-12-11 18:37:27