ajax - MVC3 ASP.NET Ajax BeginForm 在被其他 Ajax 注入(inject)时有时不起作用

Question

我试图在页面中使用一些 Ajax 表单，但它根本不起作用，它在提交时不发送任何请求，在 Firebug 中指出，表单正在通过 ajax 加载到页面，但我有其他表单它们由 ajax 加载形成一个 jquery UI 对话框并且它们工作正常，这是我的整个部分 View 代码，(带有操作“SeacrhTasksTable”的部分不起作用)我会附上呈现的整个 HTML 但它太大了.

@model APS.HelpDesk.UI.MyModel<APS.HelpDesk.Data.App_ProjectTask>
<h2>
    پروژه
    @ViewBag.ProjectTitle
</h2>
<div class="wrapperTask">
    <div class="firstTask">
   @* <input type="hidden" value="@(ViewBag.ProjectId)" />*@
        @Ajax.ActionLink("تعریف کار جدید", "AddProjectTaskDialog", new
   {
       Id = ViewBag.ProjectId,
       area = "ProjectAdmin"
   }, new AjaxOptions()
   {
       HttpMethod = "GET",
       LoadingElementId = "AddProjectTaskLoadingGif",
       UpdateTargetId = "AddProjectTaskDialog",
       InsertionMode = InsertionMode.Replace,
       OnBegin = "clearDialogs();",
       OnSuccess = " $('#AddProjectTaskDialog').dialog('open');"
   }, new { id = "AddProjecTaskLink" })
        <a href="javascript:void(0);" id="resetbutton">بارگذاری مجدد جدول </a>
    </div>
    <div class="secondTask">
        <div id="AddProjectTaskLoadingGif" style="display: none;">
            <img src="@Url.Content("~/Content/Images/ajax-loader/253L.gif")" alt="" />
        </div>
    </div>
</div>
<div id="test">
    <table>
        <tr>
            <th>
                #
            </th>
            <th>
                کد کار
            </th>
            <th>
                عنوان کار
            </th>
            <th style="min-width: 300px;">
                مختصری از توضيحات
            </th>
            <th>
                تاريخ ايجاد کار
            </th>
            <th>
                مهلت انجام
            </th>
            <th>
                وضعيت
            </th>
            <th>
                وابستگی های کار
            </th>
            <th colspan="2">
                ويرايش و حذف
            </th>
        </tr>
         @using (Ajax.BeginForm("SeacrhTasksTable", new { area = "ProjectAdmin" }, new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "test" 
    }))
        {
            <tr>
                <td>
                </td>
                <td>
                    <input type="text" id="IdTask"  style = "width:40px"  name = "Id" />
                </td>
                <td>
                    <input type="text" id="TitleTask"  style = "width:80%;" placeholder = "جست و جو" name = "Title" />
                </td>
                <td style="min-width: 250px;">
                    <input type="text" id="DescriptionTask"  style = "width:80%;" placeholder = "جست و جو" name = "Description" />
                </td>

                 <td>
                     <input type="text" id="DeliverDateTask"  style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
                 </td>
                 <td>
                     <input type="text" id="DeadlineDateTask"  style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
                 </td>
                 <td>
                   <select name="Status">
                       <option value="0"> همه</option>
                       <option value="1">شروع نشده</option>
                       <option value="2">در حال انجام</option>
                       <option value="3">تمام شده</option>
                       <option value="4">بی مسئول</option>
                    </select>
                </td>
                <td colspan="4">

                    <input type="submit" value="submit" style="" />
                    <input type="hidden" value="@(ViewBag.ProjectId)" name="ProjectId" id ="ProjectIdTask"/>

                </td>
            </tr>
        }
        <tbody id="TaskList">
            @Html.Partial("_ProjectTaskList", Model.MyList)
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    صفحه
                    @(Model.PageIndex + 1)
                    از
                    @Model.TotalPages
                    [ تعداد کل : @Model.TotalCount ]
                </td>
                <td id="pagesizeTaskTd" style="text-align: center;">
                    سايز صفحه
                    <select id="pagesizeTask">
                        <option value="5">5</option>
                        <option value="10" selected="selected">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                </td>
                <td colspan="6" align="left" class="tfoot-padding" id="morepagesTask">
                    @{
                        int start = Model.PageIndex;
                        if (start > 0)
                        {
                            int c = 0;
                            while (start > 0 && c < 4)
                            {
                                c++;
                                start--;
                            }
                        }
                        for (int j = start; j < Model.TotalPages && j < start + 10; j++)
                        {
                            if (Model.PageIndex != j)
                            {


                        <span>
                            @Ajax.ActionLink((j + 1).ToString(), "TaskListTablePage", "Project", new
                       {
                           Id = ViewBag.ProjectId,
                           PageIndex = j,
                           PageSize = Model.PageSize,
                           area = "ProjectAdmin"
                       }, new AjaxOptions
                       {
                           HttpMethod = "GET",
                           UpdateTargetId = "test",
                           InsertionMode = InsertionMode.Replace
                       }, new { mode = "mode" })
                        </span>
                            }
                            else
                            { 
                        <span><b style="text-decoration: underline;">@(j + 1)</b></span>
                        <input type="hidden" id="PIndexAll" value="@(j)" />
                            }
                        }
                        if (Model.PageIndex + 10 < Model.TotalPages)
                        { 
                        <span>. . . </span>
                        }
                    }
                </td>
            </tr>
        </tfoot>
    </table>
</div>
<div id="AddProjectTaskDialog" title="تعریف کار جدید" style="text-align: right;">
</div>
<div id="EditProjectTaskDialog" title="ويرايش کار" style="text-align: right;">
</div>
<div id="ReportProjectTaskDialog" title="گزارش کل کار" style="text-align: right;">
</div>
<div id="DescriptionProjectTaskDialog" title="توضيح کار" style="text-align: right;">
</div>
<div id="EditProjectDepenDialog" style="text-align: right;">
</div>
<div id="Taskresult">
</div>
<script type="text/javascript">

    $("#AddProjectTaskDialog").dialog({
        autoOpen: false,
        width: 720,
        modal: true,
        draggable: true,
        position: "top"
    });

    $("#EditProjectTaskDialog").dialog({
        autoOpen: false,
        width: 720,
        modal: true,
        draggable: true,
        position: "top"
    });

    $("#EditProjectDepenDialog").dialog({
        autoOpen: false,
        width: 720,
        modal: true,
        draggable: true,
        position: "top",
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        }
    });


    $("#AddProjecTaskLink").button();
    $("#resetbutton").button();


    $("#pagesizeTask").live( 'change' ,  function (){

        var val = $(this).find(":selected").val();
        $("#morepagesTask").find('*[mode]').each(function(index){

            var n=$(this).attr("href").lastIndexOf("=");
            var t= $(this).attr("href").substring(0,n+1);
            $(this).attr("href" ,t+val );
        });

          var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
          url += '?Id=' + @(ViewBag.ProjectId);         
          url += '&PageIndex=' + $("#PIndexAll").val();
          url += '&PageSize=' +val;         
          $.ajax({
              url: url, type: 'get',
              success: function (data, status) {
                $("#test").html('');
                $("#test").html(data);
              }
          });         

    });

     $(".firstTask").delegate( '#resetbutton','click',function(){

        var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
          url += '?Id=' + @(ViewBag.ProjectId);         
          url += '&PageIndex=0' ;
          url += '&PageSize=10';          

          $.ajax({
              url: url, type: 'get',
              success: function (data, status) {
                $("#test").html('');
                $("#test" ).html(data);
              }
          }); 

        });
</script>

表单的 HTML

<form action="/ProjectAdmin/Project/SeacrhTasksTable" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#test" id="form0" method="post">            <tr>
                <td>
                </td>
                <td>
                    <input type="text" id="IdTask"  style = "width:40px"  name = "Id" />
                </td>
                <td>
                    <input type="text" id="TitleTask"  style = "width:80%;" placeholder = "جست و جو" name = "Title" />
                </td>
                <td style="min-width: 250px;">
                    <input type="text" id="DescriptionTask"  style = "width:80%;" placeholder = "جست و جو" name = "Description" />
                </td>

                 <td>
                     <input type="text" id="DeliverDateTask"  style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
                 </td>
                 <td>
                     <input type="text" id="DeadlineDateTask"  style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
                 </td>
                 <td>
                   <select name="Status">
                       <option value="0"> همه</option>
                       <option value="1">شروع نشده</option>
                       <option value="2">در حال انجام</option>
                       <option value="3">تمام شده</option>
                       <option value="4">بی مسئول</option>
                    </select>
                </td>
                <td colspan="4">

                    <input type="submit" value="submit" style="" />
                    <input type="hidden" value="38" name="ProjectId" id ="ProjectIdTask"/>

                </td>
            </tr>
</form> 

Answer 1

您的代码无效，因为您的标记无效。通过无效标记我的意思是你有一个 <form>直接嵌套在 <tr> 中这是规范所禁止的。你不能有 <form>在 <table> 里面, <tbody>或 <tr> .

为了以简化的方式说明问题，这是您当前拥有的无效内容:

<table>
    <tr>
        <form>
            <td>Foo</td>
            <td>Bar</td>
            <td><input type="submit" /></td>
        </form>
    </tr>
</table>

只要用 FireBug 检查 DOM，你就会看到你的 <form>单独 float (立即打开和关闭)，内部没有任何元素。

这是无效的标记，它会导致未定义的行为，在您的情况下，浏览器会简单地不提交表单进行翻译。发生这种情况的原因是因为 unobtrusive-ajax您正在使用的库使用 .live 订阅所有 ajax 表单的提交事件。 :

$("form[data-ajax=true]").live("submit", function (evt) {
    ...
});

问题是在这种情况下永远不会引发提交事件。 similar question昨天被问到同样的问题。

要解决此问题，您可以使用嵌套表:

<table>
    <tr>
        <td>
            <form>
                <table>
                    <tr>
                        <td>Foo</td>
                        <td>Bar</td>
                        <td><input type="submit" /></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>

所以简单地把你的 Ajax.BeginForm在 <td> 里面然后使用嵌套表格来放置元素。