使用 JQuery 刷新数据

Question

在一个视图中我有一个局部视图。我的视图包含一个开放的 IT 票证列表。当我单击一张打开的工单时，部分视图会加载工单详细信息以及已添加的任何 cmets。我正在使用 JQuery/Ajax 加载部分视图。

在工单详细信息中，有一个按钮运行另一个 JQuery/Ajax 脚本，该脚本返回到控制器以添加注释，然后再次呈现部分视图，以便在用户输入后立即显示注释。这几乎完美无缺。当用户单击按钮添加评论时，它被添加并显示在页面上。但是，如果您单击另一张票，然后返回上一张票，则最新评论将消失。然而它在数据库中。此外，如果我通过 Visual Studio 停止该站点并重新启动它，则该注释就在那里。所以我认为在显示更新数据时我的逻辑有问题。

在详细信息视图中添加注释的 JQuery 脚本：

    $(function  () {
    $("#AddComment").unbind('click').click(function (){
        var tickid = @Html.Raw(Json.Encode(Model.TicketID));
        var commenttext = $("#txtAddComment").val();
        var creator = "Java";
        $.ajax({
            url: '@Url.Action("AddCommentToTicket", "HelpDesk")',
            data: { 'ticketID': tickid, 'comment': commenttext, 'creator':creator },
            type: 'GET',

            success: function (result) {
                $("#loadpartial").html(result);

            }
        });

})});

重新加载数据的Controller：

    public PartialViewResult SelectTicketView(int ticketID)
    {


            Tickets model = new Tickets();

            ViewBag.CategoryList = Category.GetCategories();
            ViewBag.StatusList = TicketStatus.GetStatusList();

            model = Tickets.GetTicketByID(ticketID);
            model.TicketComments = new List<Comments>();
            model.TicketComments = Comments.GetCommentsForTicketByID(ticketID);

            //model.TicketComments = Comments.GetCommentsForTicketByID(ticketID);

            //ViewBag.TicketComments = Comments.GetCommentsForTicketByID(ticketID);

            return PartialView("TicketDetails", model);

    }

包含 Tickets 列表的我的主视图（索引）。还有获取哪张票以显示详细信息的 JQuery 代码：

    @Model MVCPage.Models.Tickets

    <script>
$(function () {
    $(":radio").on('click', function () {
        var value = $(this).val();

        $.ajax({
            url: '@Url.Action("SelectTicketView", "HelpDesk")',
        data: { 'ticketID': value },
        type: 'GET',

        success: function (data) {
            $("#loadpartial").html(data);
        }
    });
});
});

    <div id="TicketList">
<table id="tblTickets">
    <tr>
        <th>Ticket #</th>
        <th>Created By</th>
        <th>Title</th>
        <th>Submitted</th>
        <th>Category</th>
    </tr>
    @foreach (var item in Model.OpenTicketList)
    {
        <tr>
            <td>
                @Html.RadioButtonFor(m => m.TicketID, item.TicketID, new { @class = "radioBtn" })@item.TicketID.ToString()
            </td>
            <td>
                <label>@item.Creator.ToString()</label>
            </td>
            <td>
                <label>@item.Title.ToString()</label>
            </td>
            <td>
                <label>@item.DateCreated.ToString()</label>
            </td>
            <td>
                <label>@item.Cat.CategoryDesc.ToString()</label>
            </td>
        </tr>                
       }
</table>

主视图（索引）内的我的局部视图。它保存了所选票证的详细信息以及与票证相关的 cmets：

    @Model MVCPage.Models.Tickets

    <div id="divSelectedTicket" class="ContentColumn">
<fieldset>
    <legend>Ticket Details</legend>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label id="lblActiveTicketTitle">Title</label>
        </div>
        <div class="RightColumn">
            @Html.TextBoxFor(m =>m.Title)
        </div>
    </div>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label id="lblCreatedBy">Created By</label>
        </div>
        <div class="RightColumn">
            @Html.TextBoxFor(m =>m.Creator)
        </div>
    </div>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label id="lblCategory">Category</label>
        </div>
        <div class="RightColumn">
            @Html.DropDownListFor(m => m.Cat.CatID, new SelectList(ViewBag.CategoryList, "CatID", "CategoryDesc"))
        </div>
    </div>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label id="lblTickStatus">Status</label>
        </div>
        <div class="RightColumn">
            @Html.DropDownListFor(m =>m.StatusID, new SelectList(ViewBag.StatusList, "StatusID","StatusDesc"))
        </div>
    </div>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label>Description</label>
        </div>
        <div class="RightColumn">
            @Html.TextAreaFor(m =>m.Description)
        </div>
    </div>

</fieldset>
</div> <!-- Closer for #divSelectedTicket !-->
<div id="divSelectedTicketComments" class="ContentColumn">
<fieldset>
    <legend>Ticket Comments</legend>
    <div class="CommentColumns">
        <div class="LeftColumn">
            <label>Add Comment</label>
        </div>
        <div class="RightColumn">
            <textarea id="txtAddComment"></textarea>
            <input type="button" id="AddComment" value="Add"  />
        </div>
    </div>
    <div id="divComments">
        @foreach(var comment in Model.TicketComments)
        {
            @Html.TextAreaFor(m=>comment.CommentText, new {@class= "CommentTextBox"})
            <div class="CommentColumns">
                <div class="LeftColumn">
                    <label>@comment.DateAdded</label>
                </div>
                <div class="RightColumn">
                    <label>@comment.CreatedBy</label>
                </div>
            </div>
        }
    </div>
</fieldset>
</div>

Answer 1

您需要提供更多的局部视图和容器视图。您是对的，问题在于您如何在视图中设置局部视图以及您的 jquery 如何更新内容。请提供更多的意见。

这是我的假设 - 上面的 jquery 代码来自 TicketDetails 部分视图？之所以会这样，是因为var tickid = @Html.Raw(Json.Encode(Model.TicketID)); SelectTicketView Action 是通过另一个 Jquery 调用的，它会显示 Ticket Details？

如果我看到更多代码，可以回答更多。

更新
根据您的新代码，我可以在一定程度上猜到它的行为。但与你所说的相比，仍然有些奇怪的行为。

您的主视图将生成一个门票列表。并且这些票证列表中的每一个都包含连接到 ajax 事件的单选按钮。当用户单击单选按钮时，您的 ajax 将根据 ID 获取票证详细信息。到目前为止一切顺利。

当用户单击“添加评论”时，它应该将评论发送到您的 MVC 操作并将其添加到数据库中。

我有几个问题：

1. 添加评论时 - 你返回什么？我看到$("#loadpartial").load(data)

把它放在你的主视图中：

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});