从表单元格获取值并在MVC的部分视图表单元格中显示

时间:2019-12-11 14:30:36

标签: javascript jquery html model-view-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);
        }
    }

这是从主视图显示部分视图的方式:

    @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>

}

这是部分视图:

    @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>

1 个答案:

答案 0 :(得分:0)

这可以通过使用以下代码行解决:

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