jwebster77
asked on
Get value from a table cell and display in partial view table cell in MVC
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:
THIS IS HOW THE PARTIAL VIEW IS DISPLAYED FROM THE MAIN VIEW:
THIS IS THE PARTIAL VIEW:
Partial-View-to-show_add-comments.JPG
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>
</body>
</html>Partial-View-to-show_add-comments.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.