1

我有以下部分观点。

@using System.Data;
@using System.Dynamic;
@using System.Collections.Generic;
@using System.Linq;
@model TheMProject.Models.MyViewModel  

 <div id="Item_Buttons">
      <h2 class="alignleft">Table 1</h2>
      <p class="alignright">Item Name<input type="text" name="item_name" value="@Html.ValueFor(x => x.itemname)" class="search-query" placeholder="Search" style ="width:100px"/>
            <button class="btn btn-success" id="Change_Item_Name" value="Change_Item_Name" name="action:Change_Item_Name" type="button"> Change Item Name</button>
                            Grade<input type="text" name="item_grade" value="@Html.ValueFor(x => x.grade)" class="search-query" placeholder="Search" style="width:100px"/>
            <button class="btn btn-success" id="ChangeItemGrade" value="ChangeItemGrade" name="action:Change_Grade" type="button">Change Grade</button>
                            Delete Record<input type="text" name="delete_item" value="@Html.ValueFor(x => x.itemname)" class="search-query" placeholder="Search" style ="width:100px"/>
            <button class="btn btn-success" id="DeleteItem" value="DeleteItem" name="action:Delete_Item" type="button">Delete Record</button>
  </p>
    <div style="clear: both;"></div>
    </div>
<section>
    <div id ="firstgrid">
        <table id="TTable" class="gridTable">
            <thead class="gridHead">
                <tr>
                    @Html.DisplayFor(x => x.TColumns)
                </tr>
            </thead>
            <tbody>
                @Html.DisplayFor(x => x.TRows)
            </tbody>
        </table>
        </div>
</section>
    <section>
            <form id="form1">
        <div id="grid">
            <table id="CTable" class="gridTable">
                <thead class="gridHead">
                    <tr>
                        @Html.DisplayFor(x => x.Columns)
                    </tr>
                </thead>
                <tbody>
                    @Html.DisplayFor(x => x.Rows)
                </tbody>
            </table>
                </div>
            </form>
        </section>
<section>
    <div id ="Display_Average">
        <table id="AvgDisplayTable" class="gridTable">
            <thead class="gridHead">
                <tr>
                    @Html.DisplayFor(x => x.AvgColumns)
                </tr>
            </thead>
            <tbody>
                @Html.DisplayFor(x => x.AvgRows)
            </tbody>
        </table>
        </div>
</section>
<button class="btn" id="SubmitAverage" value ="SubmitAverage" name="action:SubmitAverage" type="button">Submit Averages</button>

<div id="ItemNameDiv" title="Change Item Name">
    @using (Html.BeginForm("ChangeItemName", "Home", "POST"))
    {
        <section>
            Heat Name:<input type="text" name="itemName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/>
            Change to:<input type="text" name="updatedName" value="" style="width: 100px" />
            <input type="button" id="ChangeItemName" name="ChangeItemName" value="Change" />
        </section>
    }
</div>

<div id="ItemGradeDiv" title="Change Item Grade">
    @using (Html.BeginForm("ChangeGrade", "Home", "POST"))
    {
        <section>
            Item Grade:<input type="text" name="grade" value="@Html.ValueFor(x => x.grade)" style ="width:100px"/>
            Change to:<input type="text" name="updatedName" value="" style="width: 100px" />
            <input type ="hidden" name="hiddenItem" value ="@Html.ValueFor(x => x.itemname)" />
            <input type="submit" name="ChangeGrade" value="Change" />
        </section>
    }
</div>

<div id="DeleteItemDiv" title="Delete Item">
@using (Html.BeginForm("DeleteItem", "Home", "POST"))
{
    <section>
        Heat Name:<input type="text" name="itemName" value="@Html.ValueFor(x => x.itemname)" style ="width:100px"/>
        <input type="submit" name="DeleteItem" value="Delete" />
    </section>
}
    </div>

单击更改项目名称按钮时，将使用 jquery 调用 ajax 帖子，如下所示： 

   $(document).ready(function () {
        $('#ChangeItemName').click(function (e) {
            var tdata = $('#form1').serialize();
            var origname = $('#ItemNameDiv').find('input[name="itemName"]').first().val();
            var newname = $('#ItemNameDiv').find('input[name="updatedName"]').first().val();
            $.ajax({
                type: "POST",
                data: {
                    mCollection: tdata,
                    itemName: origname,
                    updatedName: newname
                },

                url: "Home/ChangeItemName",
                success: function (result) { success(result); }
            });
        });


        function success(result) {

            $('#ItemNameDiv').dialog('close');
            $("#My_Partial_V").html(result);
        }
    });

. 完成后，部分视图将使用帖子中的更新数据进行刷新。包括这篇文章所需的 jquery，还有其他脚本需要在视图中执行其他操作，例如隐藏显示在提交平均按钮下方的 div，直到单击其他按钮。在第一次执行前面提到的 ajax 帖子后，如果单击相同的按钮，帖子会被调用两次而不是一次，第三次点击它会运行 4 次，依此类推。

我试过移动脚本参考

<script src="@Url.Content("~/Scripts/partialitemscripts.js")" 
type="text/javascript"></script>

在局部视图之外并进入包含局部视图的视图以及布局文件。当我尝试这两种方法时，一切都正确加载，直到刷新部分视图，此时所有脚本都无法被调用/引用。

4

2 回答 2

5

您可以尝试将脚本移到 Partialview 之外并进入主视图（如您所说），但对其进行一些更改：而不是在加载文档时触发该函数，而是将其全部放在一个函数中：

function ajaxCallback(result){
    $('#ChangeItemName').click(function (e) {
        var tdata = $('#form1').serialize();
        var origname = $('#ItemNameDiv').find('input[name="itemName"]').first().val();
        var newname = $('#ItemNameDiv').find('input[name="updatedName"]').first().val();
        $.ajax({
            type: "POST",
            data: {
                mCollection: tdata,
                itemName: origname,
                updatedName: newname
            },

            url: "Home/ChangeItemName",
            success: function (result) { success(result); }
        });
    });
}

然后你从你的主视图（包含部分视图的那个）的就绪事件中调用这个函数。

要在完成 ajax 请求后修复按钮不再工作，您必须更新成功函数以调用 ajaxCallback（这将partialitemscripts.js与 ajaxCallback 函数一起使用）：

function success(result) {
        $('#ItemNameDiv').dialog('close');
        $("#My_Partial_V").html(result);
        ajaxCallback();
    }

我不确定这是不是理想的解决方案，但我设法以这种方式获得了类似的工作。

于 2013-04-16T14:48:20.327 回答
0

虽然很难从发布的代码中确定。似乎脚本在第一次之后失败的原因是因为您使用了.html()将元素添加到 DOM 并且 click() 事件尚未绑定到这些新元素。

在这种情况下，您应该使用on()or delegate()。请参阅 jquery 文档以了解如何使用它们。很简单。

于 2013-04-16T14:47:05.533 回答